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

/* ABSOLUTE LAST OVERRIDE: mobile container shell removal */
@media (max-width: 900px) {
    .container {
        background: transparent !important;
        border: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 8px 10px !important;
    }

    .container > .tabs {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-mutfak .kitchen-note-card {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .container {
        padding: 0 6px 10px !important;
    }
}

/* FINAL MOBILE FLATTEN: remove remaining container box layer */
@media (max-width: 900px) {
    .container {
        background: transparent !important;
        border: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 8px 10px !important;
    }

    .container > .tabs {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

.site-disclaimer-banner {
    max-width: 1260px;
    margin: 0 auto 12px;
    padding: 12px 14px;
    border: 1px solid #fdba74;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff7ed 0%, #fffbeb 100%);
    color: #7c2d12;
    box-shadow: 0 4px 10px rgba(194, 65, 12, 0.08);
    font-size: 13px;
    line-height: 1.5;
    width: calc(100% - 24px);
}

.kvkk-consent-box,
#auth-legal-group {
    margin-top: 12px;
    padding: 12px 14px;
    border: 2px solid #111827;
    border-radius: 10px;
    background: linear-gradient(135deg, #000000 0%, #111827 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.kvkk-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
}

.kvkk-consent-check span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kvkk-consent-check input {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    accent-color: #f59e0b;
}

.kvkk-consent-note {
    margin-top: 8px;
    color: #fde68a;
    font-size: 12px;
    font-weight: 700;
}

.legal-inline-title {
    color: #f9fafb;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.legal-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    width: 100%;
}

.legal-inline-link {
    border: 1px solid rgba(255,255,255,0.25);
    background: #ffffff;
    color: #111827;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    text-align: center;
}

.legal-inline-link:hover {
    background: #f3f4f6;
}

#auth-legal-group .legal-inline-title {
    color: #ffffff;
}

.site-footer-legal-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 12px;
}

.site-footer-legal-link {
    border: 1px solid #111827;
    background: #ffffff;
    color: #111827;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.14);
}

.site-footer-legal-link:hover {
    background: #f8fafc;
    color: #000000;
}

.site-footer-info-link {
    background: linear-gradient(180deg, #fff7ed 0%, #fffbeb 100%);
}

.site-footer-support-text {
    display: inline-flex;
    align-items: center;
    color: #111827;
    background: #ffffff;
    border: 1px solid #f59e0b;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin-left: 6px;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.18);
}

.site-footer-support-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

.site-footer-support-link:hover {
    background: #fff7ed;
    color: #9a3412;
}

.site-footer .site-brand-tr {
    width: 1.1em;
    height: 1.1em;
    font-size: 0.88em;
    font-weight: 900;
    margin-left: 6px;
    margin-right: 6px;
    border-width: 2px;
    transform: translateY(-0.08em);
    text-transform: none;
}

.site-footer-legal-links {
    gap: 8px;
    margin: 0 0 12px;
}

.site-footer-legal-link,
.site-footer-support-text {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    color: #111827;
    border-color: #111827;
}

.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
}

.legal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.68);
}

.legal-modal-content {
    position: relative;
    width: min(920px, calc(100% - 24px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    margin: 20px auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.28);
}

.legal-close-btn {
    position: sticky;
    top: 0;
    float: right;
    border: none;
    background: #ef4444;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
}

.legal-tab-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
}

.legal-tab-btn {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #1e293b;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.legal-tab-btn.active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

.legal-content-panel {
    display: none;
    color: #334155;
    line-height: 1.65;
    font-size: 14px;
}

.legal-content-panel.active {
    display: block;
}

.legal-content-panel h3 {
    font-size: 18px;
    color: #0f172a;
    margin-bottom: 12px;
}

.legal-content-panel p {
    margin-bottom: 12px;
}

@media (max-width: 700px) {
    .legal-modal-content {
        padding: 14px;
        width: calc(100% - 12px);
        margin: 6px auto;
        max-height: calc(100vh - 12px);
    }

    .kvkk-consent-box,
    #auth-legal-group {
        padding: 10px 10px;
        border-radius: 12px;
    }

    .legal-inline-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 3px;
    }

    .legal-inline-link {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        border-radius: 7px;
        padding: 3px 6px;
        font-size: 8px;
        line-height: 1.1;
    }

    .kvkk-consent-check {
        gap: 8px;
        font-size: 12px;
        line-height: 1.5;
    }

    .kvkk-consent-note,
    .legal-inline-title {
        font-size: 10px;
    }
}

.site-header {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    padding: 14px 18px;
    text-align: left;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    margin-bottom: 12px;
    border-bottom: 2px solid #f59e0b;
}

.site-header-inner {
    max-width: 1260px;
    margin: 0 auto;
}

.site-header-toprow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 4px;
}

.site-header-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 0;
}

.site-header-focus-text {
    flex: 1;
    text-align: center;
    font-size: clamp(17px, 2vw, 28px);
    font-weight: 700;
    font-family: 'Segoe Script', 'Lucida Handwriting', 'Brush Script MT', cursive;
    font-style: italic;
    letter-spacing: 1.2px;
    word-spacing: 4px;
    color: #334155;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    padding: 0 6px;
    line-height: 1;
    transform: skewX(-11deg) rotate(-2deg);
    text-decoration: underline;
    text-decoration-thickness: 1.8px;
    text-underline-offset: 5px;
}

.site-header-title {
    white-space: nowrap;
}

.site-header-services {
    max-width: 1260px;
    width: calc(100% - 24px);
    margin: 0 auto 12px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    align-items: center;
    padding: 0;
    border: 2px solid #111827;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, #fffdf8 0%, #fff3d6 100%);
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.18);
}

.site-header-service-btn {
    text-align: center;
    font-size: 13px;
    line-height: 1.15;
    color: #4a1b06;
    font-weight: 800;
    letter-spacing: 0.2px;
    border: none;
    border-right: 1px solid #111827;
    background: transparent;
    border-radius: 0;
    padding: 8px 6px;
    min-height: 68px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: normal;
    word-break: keep-all;
}

.site-header-service-btn:last-child {
    border-right: none;
}

.site-header-service-btn:hover {
    background: linear-gradient(180deg, #ffefc8 0%, #ffe3ab 100%);
    color: #3b1404;
}

.site-header-service-btn.active {
    background: linear-gradient(180deg, #ffd891 0%, #ffc861 100%);
    color: #311003;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.38);
}

.site-header-service-btn:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

.site-header-logo {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.2));
}

.site-header-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

.site-header-title {
    margin: 0;
    color: #111827;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: none;
}

.brand-verified-badge {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: inline-block;
    flex: 0 0 24px;
    margin-left: -3px;
    transform: translate(-1px, 2px);
}

.site-footer-brand .brand-verified-badge {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    transform: translate(-1px, 2px);
}

.site-brand-tr {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    margin-left: 6px;
    margin-right: 6px;
    font-size: 0.88em;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
    letter-spacing: 0.3px;
    color: #111827;
    background: #f59e0b;
    border: 2px solid #f59e0b;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
    transform: translateY(-0.08em);
    animation: none;
}

.site-brand-tr::after {
    content: '';
}

.site-brand-dot {
    display: inline-block;
    margin: 0 2px 0 0;
    color: #f59e0b;
    font-weight: 900;
    transform: translateY(-0.03em);
}

.site-header-line {
    margin: 0 0 2px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.site-header-line-soft {
    color: rgba(251, 191, 36, 0.92);
    font-size: 13px;
    letter-spacing: 0.3px;
}

.site-header-line-muted {
    margin-bottom: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.site-header-cta {
    border: 1px solid #f59e0b;
    background: linear-gradient(135deg, #fff7e6 0%, #ffe3b0 100%);
    color: #7c2d12;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
}

.site-header-cta:hover {
    background: linear-gradient(135deg, #ffeac2 0%, #ffd792 100%);
}

.site-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-left: auto;
}

.site-header-role {
    color: #b91c1c;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: right;
    text-transform: lowercase;
}

.site-header-logout-btn {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
    box-shadow: none;
}

.site-header-logout-btn:hover {
    background: #b91c1c;
}

.site-header-subtitle {
    display: none;
    margin-top: 12px;
    color: #7f1d1d;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.site-marquee {
    width: 100%;
    display: flex;
    overflow: hidden;
    background: #ffffff;
    color: #111827;
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    box-shadow: none;
    margin-top: -6px;
    margin-bottom: 10px;
}

.site-marquee-track {
    flex-shrink: 0;
    min-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 26px;
    white-space: nowrap;
    padding: 7px 0;
    animation: site-marquee-scroll 34s linear infinite;
}

.site-marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15px;
}

.site-marquee-track span::before {
    content: '🔨';
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
    filter: saturate(1.15) contrast(1.05);
}

@media (max-width: 900px) {
    .site-header-inner {
        position: relative;
    }

    .site-header-toprow {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
        gap: 6px;
        padding-right: 0;
        text-align: center;
    }

    .site-header-brand {
        grid-column: 1;
        justify-self: center;
        width: max-content;
        transform: none;
    }

    .site-header-focus-text {
        grid-column: 1;
        justify-self: center;
        text-align: center;
        font-size: clamp(12px, 3.2vw, 16px);
        font-family: 'Segoe Script', 'Lucida Handwriting', 'Brush Script MT', cursive;
        letter-spacing: 0.7px;
        word-spacing: 2px;
        margin-top: 2px;
        padding: 0 8px;
        white-space: normal;
        line-height: 1.08;
        transform: skewX(-8deg) rotate(-1.5deg);
    }

    .site-header-services {
        width: calc(100% - 14px);
        margin: 0 auto 10px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .site-header-service-btn {
        font-size: clamp(9px, 2.35vw, 10.8px);
        min-width: 0;
        border-right: 1px solid #fcd34d;
        border-bottom: none;
        padding: 6px 3px;
        min-height: 64px;
        letter-spacing: -0.05px;
    }

    .site-header-service-btn:last-child {
        border-right: none;
    }

    .site-header-cta {
        position: static;
        grid-column: 1;
        justify-self: center;
        align-self: center;
        padding: 7px 10px;
        font-size: 11px;
        font-weight: 700;
        margin: 2px auto 0;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
}

@keyframes site-marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.container {
max-width: 1200px;
    margin: 0 auto 20px auto;
    background: transparent;
    border-radius: 0;
    padding: 30px 34px 26px;
    box-shadow: none;
    border-top: none;
    border: none;
}

.site-stats {
    text-align: center;
    color: #374151;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
}

.site-stats strong {
    font-weight: 600;
}

h1 {
    text-align: center;
    color: #1f2937;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
}

h2 {
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

h3 {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

h4 {
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 22px;
    border-bottom: none;
    padding-bottom: 0;
}

.tab {
    flex: 1;
    padding: 14px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s;
    text-align: center;
    line-height: 1.2;
}

.tab:hover {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.28), inset 0 0 0 1px rgba(255,255,255,0.55);
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.tab.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #111827;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}


/* İmalatçı Navigasyon Menüsü */
.imalatci-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.imalatci-nav-btn {
    flex: 1;
    min-width: 100px;
    padding: 10px 14px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.imalatci-nav-btn:hover {
    background: #f9fafb;
    border-color: #2563eb;
}

.imalatci-nav-btn.active {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
    font-weight: 600;
}

.nav-icon {
    font-size: 18px;
    display: none;
}

.nav-text {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

.kisisel-ayar-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 14px;
}

.kisisel-ayar-tab {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.kisisel-ayar-tab:hover {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}

.kisisel-ayar-tab.active {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.2);
}

.kisisel-ayar-panels {
    margin-top: 8px;
}

.kisisel-ayar-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}

.kisisel-ayar-bilgi {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 1px solid #dbeafe;
    border-radius: 10px;
    padding: 12px;
    font-size: 12px;
    color: #334155;
    line-height: 1.65;
    margin-bottom: 12px;
}

.kisisel-ayar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kisisel-ayar-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.kisisel-ayar-warn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #111827;
}

.kisisel-ayar-muted {
    color: #64748b;
    font-size: 12px;
    margin-top: 8px;
}

.kisisel-ayar-profile {
    margin-bottom: 12px;
    display: grid;
    gap: 10px;
}

.kisisel-ayar-profile-block {
    border: 1px solid #dbeafe;
    background: #f8fbff;
    border-radius: 10px;
    padding: 10px;
}

.kisisel-ayar-profile-title {
    font-size: 12px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 8px;
}

.kisisel-ayar-form-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kisisel-ayar-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.kisisel-ayar-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: #0f172a;
    background: #fff;
}

.kisisel-ayar-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.imalatci-section {
    animation: slideIn 0.4s ease;
    background: white;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}


@media (max-width: 900px) {
    #boya-content {
        display: flex;
        flex-direction: column;
    }

    #badana-preview-section {
        display: flex;
        flex-direction: column;
    }

    #badana-teklif-card {
        order: 1;
        margin-top: 12px;
    }
}

/* Badana compact section stilleri */
/* Daha kompakt ve estetik görünüm için güncellendi */
.imalatci-section.badana-compact {
    padding: 10px 8px;
    margin-bottom: 8px;
    background: #f8fafc;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(102,126,234,0.07);
    border: 1px solid #e5e7eb;
}

#section-sorgula {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.panel {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-group {
    margin-bottom: 8px;
}

/* Boya badana kompakt form stilleri */
/* Daha kompakt form alanı */
.badana-compact .form-group {
    margin-bottom: 4px;
}

.badana-compact .form-row {
    gap: 6px;
}

.badana-compact input,
.badana-compact select {
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f9fafb;
}

.badana-compact label {
    font-size: 10px;
    margin-bottom: 2px;
    color: #64748b;
    font-weight: 500;
}

.badana-compact .musteri-bilgi {
    padding: 8px 8px;
    margin-bottom: 6px;
    background: #f1f5f9;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

label {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

input, select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #1f2937;
    font-weight: 500;
}

input:focus, select:focus {
    outline: none;
    border-color: #fbbf24;
    background: white;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

input:hover:not(:focus), select:hover:not(:focus) {
    border-color: #9ca3af;
    background: white;
}

/* Daha küçük ve modern buton */
.btn-primary {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #0f172a;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    letter-spacing: 0.3px;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

#teklif-sonuc {
    margin-top: 22px;
    width: 100%;
}

.teklif-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.teklif-card {
    background: white;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 0;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #2563eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
    min-width: 0;
    height: auto;
    align-self: start;
}

.teklif-card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.teklif-card h3 {
    color: #1f2937;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}

.konum-link {
    display: inline-block;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12px;
    text-decoration: none;
    margin-bottom: 8px;
    font-weight: 600;
    transition: all 0.3s;
    border: 1px solid #667eea;
}

.konum-link:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.teklif-card p {
    color: #6b7280;
    margin: 3px 0;
    font-size: 13px;
    line-height: 1.3;
}

.fiyat {
    font-size: 19px;
    font-weight: 700;
    color: #059669;
    margin-top: 8px;
    line-height: 1.2;
    word-break: break-word;
}

@media (max-width: 1100px) {
    .teklif-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }
}

@media (max-width: 700px) {
    .teklif-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .teklif-card {
        padding: 10px;
    }

    .fiyat {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .teklif-grid {
        grid-template-columns: 1fr;
    }
}

.imalatci-item {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s;
}

.imalatci-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.imalatci-item-info {
    flex-grow: 1;
}

.cizim-alani {
    text-align: center;
}

.cizim-alani h3 {
    color: #1f2937;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
}

.cizim-alani {
    background: white;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.pvc-preview-card {
    border: 2px solid #cbd5e1;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.pvc-preview-title {
    margin-top: 0;
    margin-bottom: 4px;
}

#pencere-canvas,
#imalatci-pencere-canvas {
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    max-width: 100%;
    height: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: box-shadow 0.2s;
    display: block;
    margin: 0 auto;
}

#pencere-canvas:hover,
#imalatci-pencere-canvas:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.canvas-info {
    color: #6b7280;
    font-size: 11px;
    margin-top: 8px;
    text-align: center;
}

/* Metraj Panel */
.metraj-panel  {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    min-width: 180px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.metraj-panel h4 {
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #2563eb;
}

.metraj-icerik {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metraj-icerik p {
    margin: 0;
    padding: 0;
}

.metraj-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #4b5563;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}

.metraj-item:last-child {
    border-bottom: none;
}

.metraj-label {
    font-weight: 500;
    color: #6b7280;
}

.metraj-value {
    font-weight: 600;
    color: #1f2937;
}

.musteri-bilgi {
    background: #f9fafb;
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    border: 1px solid #e5e7eb;
}

.musteri-bilgi h3 {
    color: #1f2937;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}
.pencere-detay-panel {
    background: #f9fafb;
    padding: 14px;
    border-radius: 6px;
    margin: 14px 0;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
    max-width: 100%;
}

.pencere-detay-panel h4 {
    color: #1f2937;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
}

.bolum-item {
    background: white;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #2563eb;
    overflow: visible;
}

.bolum-item label {
    font-size: 11px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 4px;
    display: block;
}

.bolum-item select {
    padding: 8px;
    font-size: 14px;
    width: 100%;
    max-width: 100%;
}

.pvc-kanat-detay-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 8px 0 0 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

#bolum-detaylari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

#imalatci-bolum-detaylari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.bolum-item {
    margin-bottom: 0;
}

.bolum-kart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.bolum-tipi-alan,
.bolum-ikinci-alan {
    min-width: 0;
}

/* Mobil ve dar ekranlarda flex öğeleri dikey yap */
@media (max-width: 768px) {
    .bolum-item > div[style*="flex"] {
        flex-direction: column !important;
    }
}

/* İKİ SÜTUNLU YAPI */
.panel-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

#imalatci-panel #auth-container:not([style*="display: none"]) ~ #imalatci-main-tabs,
#imalatci-panel #auth-container:not([style*="display: none"]) ~ [id^="imalatci-dashboard-"] {
    display: none !important;
}

/* İmalatçı dashboard'da panel-layout'u block yap, sadece section içindekiler flex olsun */
#imalatci-dashboard-pimapen {
    display: block !important;
}

#imalatci-dashboard-pimapen > .form-section {
    flex: none;
    width: 100%;
    max-width: 100%;
}

/* section-cizim içindeki panel-layout flex olsun */
#section-cizim .panel-layout {
    display: flex;
}

#section-cizim .form-group {
    margin-bottom: 8px;
}

#section-cizim .pencere-detay-panel,
#section-cizim .cizim-alani,
#section-cizim #imalatci-metraj-panel {
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#section-cizim label {
    font-size: 12px;
}

#section-cizim input,
#section-cizim select {
    padding: 7px 10px;
    font-size: 13px;
    border-color: #94a3b8;
}

#section-cizim .canvas-info {
    font-size: 11px;
}

#section-cizim #imalatci-adet-gosterge {
    padding: 8px !important;
    font-size: 12px !important;
}

#imalatci-pvc-kanat-detay-panel {
    padding: 10px;
    background: #fff;
    border: 1px solid #cbd5e1;
}

#imalatci-pvc-kanat-detay-panel h4 {
    font-size: 12px;
    margin-bottom: 8px;
}

#imalatci-bolum-detaylari {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 6px;
}

#imalatci-bolum-detaylari .bolum-item {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    border-left-width: 2px;
}

#imalatci-bolum-detaylari .bolum-item label {
    font-size: 11px;
    margin-bottom: 3px;
}

#imalatci-bolum-detaylari .bolum-item select,
#imalatci-bolum-detaylari .bolum-item input {
    padding: 7px 9px;
    font-size: 13px;
}

/* Cam balkon paneli için layout düzenlemesi */
#cam-balkon-panel .panel-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    max-width: 1280px;
    margin: 0 auto;
}

.form-section {
    flex: 0 0 280px;
}

/* Cam balkon form bölümü */
#cam-balkon-panel .form-section {
    flex: 0 0 280px;
}

/* Cam balkon preview bölümü */
#cam-balkon-panel .preview-section {
    flex: 1 1 660px;
    width: auto;
    min-width: 500px;
    max-width: calc(100vw - 420px);
    position: sticky;
    top: 80px;
    height: auto;
}

#cam-balkon-panel #balkon-3d-preview {
    width: 100% !important;
    max-width: none !important;
    height: clamp(340px, 50vh, 520px) !important;
    margin: 0 auto;
}

#cam-balkon-panel #balkon-3d-preview canvas,
#cambalkon-section-musteri #imalatci-balkon-3d-preview canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* İmalatçı dashboard'ları için özel genişlik */
#imalatci-dashboard-pimapen {
    display: block !important;
    max-width: 100%;
    width: 100%;
}

#imalatci-dashboard-pimapen > .form-section {
    max-width: 100%;
    width: 100%;
    flex: 1 !important;
}

#imalatci-dashboard-cambalkon {
    display: block !important;
    max-width: 100%;
    width: 100%;
}

#imalatci-dashboard-cambalkon > .form-section {
    flex: none;
    width: 100%;
    max-width: 100%;
}

#imalatci-dashboard-cambalkon .cambalkon-firma-nav-btn {
    margin-left: auto;
}

#cambalkon-section-firma .cambalkon-firma-panel {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#cambalkon-section-musteri .cambalkon-musteri-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

#cambalkon-section-musteri .form-section {
    flex: 0 0 320px;
    min-width: 300px;
}

#cambalkon-section-musteri .cambalkon-preview-panel {
    flex: 1;
    margin-top: 0 !important;
    position: sticky;
    top: 20px;
}

#cambalkon-section-musteri #imalatci-balkon-3d-preview {
    flex-direction: column;
    gap: 4px;
    height: clamp(340px, 48vh, 520px) !important;
    align-items: center;
}

@media (max-width: 900px) {
    #imalatci-dashboard-cambalkon .cambalkon-firma-nav-btn {
        margin-left: 0;
    }

    #cambalkon-section-firma .cambalkon-firma-panel {
        max-width: 100% !important;
    }

    #cambalkon-section-musteri .cambalkon-musteri-layout {
        flex-direction: column;
        gap: 12px;
    }

    #cambalkon-section-musteri .form-section,
    #cambalkon-section-musteri .cambalkon-preview-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #cambalkon-section-musteri .cambalkon-preview-panel {
        position: static;
        top: auto;
    }
}

#imalatci-dashboard-badana {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
}

#imalatci-dashboard-parke,
#imalatci-dashboard-mermer,
#imalatci-dashboard-insaat,
#imalatci-dashboard-celik,
#laminant-parke-panel,
#mermer-panel,
#insaat-ustalik-panel {
    display: none !important;
}

/* Badana dashboard için özel ayar */
#imalatci-dashboard-badana > .form-section {
    flex: 1;
    max-width: 100%;
    width: 100%;
}

#imalatci-dashboard-badana .badana-panel-card {
    border: 1px solid #dbe4ee !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

#imalatci-dashboard-badana .badana-panel-card h3 {
    color: #0f172a;
    font-size: 13px !important;
    font-weight: 800;
    letter-spacing: 0.01em;
}

#imalatci-dashboard-badana .badana-link-card {
    border-style: dashed !important;
}

#imalatci-dashboard-badana .badana-link-note {
    margin: 0 0 10px;
    color: #475569;
    font-size: 12px;
    line-height: 1.5;
}

#imalatci-dashboard-badana .badana-link-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#imalatci-dashboard-badana .badana-alt-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 2px 0 12px;
    padding: 5px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff8e3 0%, #ffefc8 100%);
    border: 1px solid #1f2937;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

#imalatci-dashboard-badana .badana-alt-nav-btn {
    position: relative;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #7c5a10;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

#imalatci-dashboard-badana .badana-alt-nav-btn.active {
    background: #111827;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(17, 24, 39, 0.18);
}

#imalatci-dashboard-badana .badana-alt-nav-btn.active::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #facc15;
    animation: nimoSelectedBounce 1.2s ease-in-out infinite;
}

@media (max-width: 560px) {
    #imalatci-dashboard-badana .badana-alt-nav {
        gap: 6px;
        padding: 4px;
    }

    #imalatci-dashboard-badana .badana-alt-nav-btn {
        font-size: 10.5px;
        padding: 9px 4px;
    }
}

.preview-section {
    flex: 1;
    position: sticky;
    top: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
}

#laminant-parke-panel .panel-layout {
    max-width: 900px;
    margin: 0 auto;
    transform: translateX(-18px);
}

#laminant-parke-panel .results-section {
    flex: 1;
    min-width: 0;
}

#mermer-panel .panel-layout {
    max-width: 900px;
    margin: 0 auto;
    transform: translateX(-18px);
}

#mermer-panel .results-section {
    flex: 1;
    min-width: 0;
}

#mutfak-dolabi-panel .panel-layout {
    max-width: 1120px;
    margin: 0 auto;
    gap: 28px;
    flex-wrap: wrap;
}

#mutfak-dolabi-panel .kitchen-customer-bottom-offers {
    flex: 1 1 100%;
    width: 100%;
}

.kitchen-intro-card {
    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 auto 20px auto;
    max-width: 1120px;
    box-shadow: 0 10px 26px rgba(194, 120, 3, 0.08);
}

.kitchen-intro-card p {
    margin: 0;
    color: #7c2d12;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.kitchen-form-section {
    flex: 0 0 300px;
}

.kitchen-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.kitchen-collapsible-header h3 {
    margin: 0;
    color: #334155;
    font-size: 18px;
}

.kitchen-collapse-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    transition: background 0.2s;
}

.kitchen-collapse-btn:hover {
    background: #e2e8f0;
}

.kitchen-form-body {
    overflow: hidden;
    max-height: 3000px;
    transition: max-height 0.35s ease;
}

.kitchen-form-body.collapsed {
    max-height: 0;
}

.kitchen-dashboard-shell {
    max-width: 1120px;
    margin: 0 auto;
    gap: 28px;
}

.kitchen-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.kitchen-preview-section {
    flex: 1 1 680px;
    min-width: 0;
}

.kitchen-range-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.kitchen-layout-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.kitchen-layout-btn {
    border: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: #334155;
    border-radius: 10px;
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kitchen-layout-btn:hover {
    border-color: #f59e0b;
    color: #92400e;
    transform: translateY(-1px);
}

.kitchen-layout-btn.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #d97706;
    color: #fff7ed;
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.32);
}

.kitchen-color-input {
    height: 52px;
    padding: 6px;
    cursor: pointer;
}

.kitchen-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.kitchen-toggle-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #dbe4ee;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.kitchen-toggle-card label,
.kitchen-toggle-card span {
    margin: 0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.kitchen-checkbox-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.kitchen-checkbox-card input {
    width: 20px;
    height: 20px;
    accent-color: #d97706;
}

.kitchen-note-card {
    margin: 14px 0 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.kitchen-note-card strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 6px;
}

.kitchen-note-card p {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.6;
}

.kitchen-module-editor {
    max-height: 220px;
    overflow: auto;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px;
}

.kitchen-module-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.kitchen-module-row:last-child {
    margin-bottom: 0;
}

.kitchen-module-row label {
    margin: 0;
    font-size: 12px;
    color: #334155;
}

.kitchen-module-row select {
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 8px;
}

.kitchen-preview {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 8px;
    min-height: 80px;
}

.kitchen-module {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #111;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.kitchen-counter {
    height: 8px;
    width: 60px;
    border-radius: 3px;
    margin-top: -6px;
}

body.kitchen-pro-mode .kitchen-price-card {
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.35);
}

.kitchen-dim-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
    border: 1px solid #c7d7f4;
    border-radius: 10px;
    margin-bottom: 16px;
}

.kitchen-dim-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    background: white;
    border-radius: 8px;
    border: 1px solid #dbeafe;
    min-width: 88px;
    text-align: center;
}

.kitchen-dim-item strong {
    font-size: 16px;
    color: #1e40af;
    margin-top: 3px;
    display: block;
}

.kitchen-dim-label {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    display: block;
}

.kitchen-dim-item.kitchen-dim-static {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.kitchen-dim-item.kitchen-dim-static strong {
    color: #475569;
    font-size: 15px;
}

.kitchen-dim-item.kitchen-dim-editable {
    min-width: 130px;
}

.kitchen-dim-input-row {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.kitchen-dim-input {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.kitchen-dim-input-row span {
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

.kitchen-dim-sep {
    width: 2px;
    align-self: stretch;
    background: #c7d7f4;
    border-radius: 2px;
    min-width: 2px;
    margin: 0 4px;
}

.kitchen-preview-overlay-wrap {
    position: relative;
}

.kitchen-preview-top-measure {
    position: absolute;
    top: 12px;
    left: 34px;
    right: 34px;
    z-index: 4;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.kitchen-preview-overlay-wrap.kitchen-preview-has-turn .kitchen-preview-top-measure {
    right: 190px;
}

.kitchen-preview-top-line {
    position: relative;
    flex: 1;
    height: 2px;
    background: rgba(30, 64, 175, 0.78);
}

.kitchen-preview-top-line:first-child::before {
    content: '';
    position: absolute;
    left: -1px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-left: 2px solid rgba(30, 64, 175, 0.78);
    border-top: 2px solid rgba(30, 64, 175, 0.78);
    transform: rotate(-45deg);
}

.kitchen-preview-top-line:last-child::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(30, 64, 175, 0.78);
    border-top: 2px solid rgba(30, 64, 175, 0.78);
    transform: rotate(45deg);
}

.kitchen-preview-top-label {
    margin: 0 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(30, 64, 175, 0.28);
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.kitchen-preview-side-measure {
    position: absolute;
    top: 38px;
    right: 34px;
    width: 156px;
    height: 42px;
    z-index: 4;
    pointer-events: none;
}

.kitchen-preview-side-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 84px;
    height: 2px;
    background: rgba(30, 64, 175, 0.78);
}

.kitchen-preview-side-line::before {
    content: '';
    position: absolute;
    left: -1px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-left: 2px solid rgba(30, 64, 175, 0.78);
    border-top: 2px solid rgba(30, 64, 175, 0.78);
    transform: rotate(-45deg);
}

.kitchen-preview-side-turn {
    position: absolute;
    top: 0;
    left: 84px;
    width: 2px;
    height: 20px;
    background: rgba(30, 64, 175, 0.78);
}

.kitchen-preview-side-end {
    position: absolute;
    top: 18px;
    left: 84px;
    width: 52px;
    height: 2px;
    background: rgba(30, 64, 175, 0.78);
}

.kitchen-preview-side-end::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(30, 64, 175, 0.78);
    border-top: 2px solid rgba(30, 64, 175, 0.78);
    transform: rotate(45deg);
}

.kitchen-preview-side-label {
    position: absolute;
    top: 18px;
    left: 110px;
    transform: translate(-50%, -130%);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(30, 64, 175, 0.28);
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.kitchen-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 12px;
}

.kitchen-stat-card {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.kitchen-stat-label {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 6px;
}

.kitchen-stat-card strong {
    color: #0f172a;
    font-size: 20px;
}

.kitchen-cizim-alani {
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
}

.kitchen-mini-palette {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.kitchen-mini-palette-title {
    font-size: 11px;
    font-weight: 700;
    color: #2d3748;
    line-height: 1;
}

.kitchen-mini-items-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.kitchen-mini-item {
    border: 1px solid #d1d5db;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 12px;
    padding: 4px 8px;
    cursor: grab;
    user-select: none;
    font-size: 11px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
    min-height: 34px;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.kitchen-mini-item span {
    font-size: 15px;
    line-height: 1;
}

.kitchen-mini-item small {
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    color: #334155;
}

.kitchen-mini-item:active {
    cursor: grabbing;
}

.kitchen-3d-preview.kitchen-drop-active {
    outline: 2px dashed #22c55e;
    outline-offset: -6px;
}

.kitchen-3d-preview.kitchen-drop-upper {
    box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.78), inset 0 120px 120px -90px rgba(56, 189, 248, 0.35);
}

.kitchen-3d-preview.kitchen-drop-lower {
    box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.82), inset 0 -120px 120px -90px rgba(34, 197, 94, 0.35);
}

.kitchen-3d-preview {
    width: 100%;
    height: 600px;
    padding-top: 0;
    border-radius: 12px;
    background: radial-gradient(circle at 20% 10%, #d5dee9 0%, #b8c4d3 52%, #8b99ab 100%);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 0 12px 24px rgba(15, 23, 42, 0.15);
}

.kitchen-module-plus-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}

.kitchen-module-plus-slot {
    position: absolute;
    top: 58%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kitchen-module-plus-slot.kitchen-main-plus-slot {
    transform: translate(calc(-50% - 12px), -50%);
}

.kitchen-module-plus-slot.kitchen-door-model-slot {
    flex-direction: row;
    gap: 0;
    transform: translate(calc(-50% + 12px), -50%);
}

.kitchen-module-plus-slot-label {
    display: none;
    pointer-events: none;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.25px;
    color: #0f172a;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.6);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
}

.kitchen-module-plus-btn {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    overflow: hidden;
}

.kitchen-module-plus-btn:hover {
    background: #ffffff;
    box-shadow: none;
}

.kitchen-module-plus-btn.kitchen-module-plus-btn-door {
    width: 18px;
    height: 18px;
    border: none;
    background: #ffffff;
    color: #d97706;
    box-shadow: none;
    overflow: hidden;
}

.kitchen-module-plus-btn.kitchen-module-plus-btn-door:hover {
    background: #ffffff;
    box-shadow: none;
}

.kitchen-module-plus-menu {
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    min-width: 124px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.22);
    display: none;
    gap: 4px;
    pointer-events: auto;
}

.kitchen-module-plus-menu.open {
    display: flex;
    flex-direction: column;
}

.kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn {
    width: 24px;
    height: 24px;
    font-size: 15px;
    border-width: 1px;
    box-shadow: 0 3px 7px rgba(15, 23, 42, 0.18);
}

.kitchen-wardrobe-section-control-layer .kitchen-module-plus-menu {
    bottom: 30px;
}

.kitchen-module-plus-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    color: #1f2937;
    text-align: left;
}

.kitchen-module-plus-item:hover {
    background: #eef2ff;
}

.kitchen-module-plus-item.active {
    background: #dbeafe;
}

.kitchen-module-plus-item small {
    font-size: 11px;
    font-weight: 600;
}

.kitchen-price-card {
    margin-top: 18px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f8fafc;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.kitchen-price-caption {
    display: block;
    font-size: 13px;
    color: rgba(248, 250, 252, 0.75);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kitchen-price-card strong {
    display: block;
    font-size: clamp(28px, 4vw, 40px);
    color: #fbbf24;
    margin-bottom: 10px;
}

.kitchen-price-breakdown {
    color: rgba(248, 250, 252, 0.85);
    font-size: 13px;
    line-height: 1.6;
}

.kitchen-gardrop-shell {
    align-items: stretch;
}

.kitchen-gardrop-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.kitchen-gardrop-settings-col {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    padding: 10px;
}

.kitchen-gardrop-group-title {
    margin: 0 0 8px;
    font-size: 12px;
    color: #0f172a;
}

.kitchen-gardrop-settings-col .form-row {
    margin-bottom: 6px;
}

.kitchen-gardrop-settings-col .form-group {
    margin-bottom: 7px;
}

.kitchen-gardrop-render-card {
    border-radius: 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 12px 12px 10px;
}

.kitchen-gardrop-summary-card {
    margin-top: 12px;
    border-radius: 12px;
    border: 1px solid #dbe4ee;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.kitchen-gardrop-cambar {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.kitchen-gardrop-cam-btn {
    width: 100%;
    border: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: #0f172a;
    border-radius: 10px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.kitchen-gardrop-cam-btn:hover {
    border-color: #f59e0b;
    color: #92400e;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(217, 119, 6, 0.22);
}

.kitchen-mobile-zoom-bar {
    display: none;
}

.kitchen-mobile-zoom-btn {
    min-height: 36px;
}

.kitchen-gardrop-interior-btn {
    background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: #6d28d9;
    color: #ffffff;
}

.kitchen-gardrop-interior-btn:hover {
    border-color: #5b21b6;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.32);
}

.kitchen-inline-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.kitchen-inline-select-grid .form-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.kitchen-inline-select-grid .form-group label {
    min-height: 18px;
    display: flex;
    align-items: center;
}

.kitchen-inline-select-grid .form-group select {
    width: 100%;
}

.kitchen-form-actions {
    display: flex;
    gap: 12px;
}

.kitchen-form-actions .btn-primary {
    width: 100%;
}

.kitchen-form-actions-fixed {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    align-items: stretch;
}

.kitchen-form-actions-fixed .btn-primary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px;
    margin-top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 640px) {
    .kitchen-form-actions-fixed {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .kitchen-form-actions-fixed .btn-primary {
        font-size: 13px !important;
        padding: 12px 10px !important;
    }
}

#celik-kapi-panel .panel-layout {
    max-width: 980px;
    margin: 0 auto;
    gap: 20px;
    align-items: stretch;
    transform: none;
}

#celik-kapi-panel .form-section {
    flex: 0 0 320px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    padding: 16px;
}

#celik-kapi-panel .results-section {
    flex: 1;
    min-width: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    padding: 16px;
}

@media (min-width: 901px) {
    #boya-badana-panel #boya-content {
        max-width: 980px;
        margin: 0 auto;
        justify-content: center;
        transform: none;
    }

    #boya-badana-panel #fayans-content,
    #fayans-seramik-panel .panel-layout {
        max-width: 980px;
        margin: 0 auto;
        justify-content: center;
        transform: none;
    }
}

/* Mobilde tek sütun yap */
@media (max-width: 900px) {
    .panel-layout {
        flex-direction: column;
    }

    .kitchen-stat-grid {
        grid-template-columns: 1fr;
    }

    .kitchen-option-grid {
        grid-template-columns: 1fr;
    }

    .kitchen-mini-palette {
        width: calc(100% - 14px);
    }

    .kitchen-mini-items-row {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .kitchen-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .kitchen-3d-preview {
        height: 420px;
    }

    .kitchen-gardrop-cam-btn {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
    }

    #mutfak-dolabi-panel .kitchen-gardrop-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #mutfak-dolabi-panel .kitchen-gardrop-settings-col {
        padding: 8px;
    }

    #mutfak-dolabi-panel .kitchen-gardrop-settings-col .form-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    
    .form-section {
        flex: 1;
        width: 100%;
        max-width: 100%;
    }
    
    .preview-section {
        position: static;
        width: 100%;
    }
    
    /* Cam balkon mobilde padding kaldır */
    #cam-balkon-panel .panel-layout {
        padding-right: 0;
        gap: 12px;
    }
    
    #cam-balkon-panel .preview-section {
        min-width: 0;
        max-width: 100%;
        max-height: none;
        overflow-y: visible;
        overflow-x: hidden;
        padding: 12px;
    }

    #cam-balkon-panel .cizim-alani {
        padding: 10px;
    }

    #cam-balkon-panel #balkon-3d-preview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: clamp(260px, 58vw, 360px) !important;
        margin: 0 auto !important;
    }

    #fayans-seramik-panel,
    #fayans-content,
    #fayans-tab-btn,
    #badana-section-fayans {
        display: none !important;
    }
}

.site-footer {
    margin-top: 36px !important;
    padding: 24px 14px 10px !important;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.18) !important;
}

.site-footer-brand {
    margin-bottom: 8px !important;
}

.site-footer-brand h2 {
    font-size: 24px !important;
}

.site-footer-services {
    gap: 16px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
}

.site-footer-bottom {
    padding-top: 12px !important;
    font-size: 12px !important;
}

@media (max-width: 900px) {
    .site-footer {
        margin-top: 24px !important;
        padding: 18px 10px 92px !important;
    }

    .site-footer-brand h2 {
        font-size: 20px !important;
    }

    .site-footer .site-brand-tr {
        width: 1.2em;
        height: 1.2em;
        font-size: 0.85em;
        font-weight: 900;
        letter-spacing: 0.5px;
        margin-left: 4px;
        margin-right: 4px;
        border-width: 2px;
        transform: translateY(-0.06em);
    }

    .site-footer-legal-links {
        gap: 5px !important;
        margin-bottom: 10px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 2px !important;
    }

    .site-footer-legal-link,
    .site-footer-support-text {
        padding: 4px 7px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    .site-footer-services {
        gap: 8px !important;
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }

    .site-footer-services > div {
        width: 100%;
    }

    .site-footer-bottom p {
        margin-bottom: 5px !important;
    }
}

/* YAZDIRMA MODU (Teklif Formatı) */
@media print {
    body {
        background: white;
        padding: 0;
    }
    
    .container {
        box-shadow: none;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .tabs, .btn-primary, .cizim-alani, .form-group, .musteri-bilgi h3, h1, .preview-section {
        display: none;
    }

    /* Sadece teklif sonucunu ve başlığı göster */
    #teklif-sonuc {
        display: block !important;
        margin-top: 0;
    }

    .teklif-card {
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    #teklif-sonuc::before {
        content: "PENCERE TEKLİF FORMU";
        font-size: 24px;
        font-weight: bold;
        display: block;
        margin-bottom: 20px;
        text-align: center;
    }
}

/* MOBİL UYUMLULUK */
@media (max-width: 900px) {
    .panel-layout {
        flex-direction: column-reverse; /* Mobilde çizim üstte kalsın */
    }
}

/* GİRİŞ EKRANI STİLLERİ */
.auth-box {
    max-width: 480px;
    margin: 50px auto;
    padding: 48px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    text-align: center;
    border: 2px solid #fbbf24;
}

.auth-box .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.btn-secondary {
    background: transparent !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    margin-top: 10px;
    box-shadow: none !important;
}
.btn-secondary:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* AI ASİSTAN STİLLERİ */
.ai-widget-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 92px;
    height: 92px;
    background: linear-gradient(135deg, #2563eb 0%, #1e293b 100%);
    border-radius: 28px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 22px;
    color: white;
    z-index: 1000;
    transition: all 0.2s;
    border: 2px solid #fbbf24;
    line-height: 1.2;
}

.ai-widget-btn::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 14px;
    width: 16px;
    height: 16px;
    background: #1e293b;
    transform: rotate(45deg);
    border-right: 2px solid #fbbf24;
    border-bottom: 2px solid #fbbf24;
    border-radius: 4px;
}

.ai-widget-top-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1;
    opacity: 0.95;
    text-transform: uppercase;
}

.ai-widget-icon {
    font-size: 22px;
    line-height: 1;
}

.ai-widget-text {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
    letter-spacing: 0.2px;
}

.ai-widget-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
}

.ai-chat-box {
    position: fixed;
    bottom: 90px;
    right: 16px;
    width: 340px;
    height: 420px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    display: none;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.ai-header {
    background: #2563eb;
    padding: 12px 14px;
    color: white;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.ai-messages {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    background: #f9f9f9;
}

.ai-message {
    margin-bottom: 8px;
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.4;
}

.ai-message.bot {
    background: #f3f4f6;
    color: #1f2937;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    margin-right: auto;
    border: 1px solid #e5e7eb;
}

.ai-message.user {
    background: #2563eb;
    color: white;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
    margin-left: auto;
}
.ai-option-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 10px;
    max-width: 95%;
}
.ai-option-btn {
    border: 1px solid #cbd5e1;
    background: white;
    color: #1d4ed8;
    border-radius: 14px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ai-option-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}

.ai-input-area {
    padding: 8px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
    background: white;
}

.ai-input-area input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 18px;
    outline: none;
    font-size: 12px;
}

.ai-input-area button {
    background: #2563eb;
    color: white;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    .ai-option-btn {
        font-size: 10px;
        padding: 5px 8px;
    }
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.ai-input-area button:hover {
    background: #1d4ed8;
}

/* NİMO AI - YAZMA GÖSTERGESİ */
.ai-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    min-width: 48px;
}
.ai-typing-dot {
    width: 7px;
    height: 7px;
    background: #93c5fd;
    border-radius: 50%;
    display: inline-block;
    animation: nimoTypingBounce 1.2s infinite ease-in-out;
}
.ai-typing-dot:nth-child(1) { animation-delay: 0s; }
.ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes nimoTypingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40% { transform: translateY(-6px); opacity: 1; }
}

/* TR EMBLEM PULSE ANİMASYONU */
@keyframes tr-pulse {
    0% {
        box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.25), 0 0 20px rgba(251, 191, 36, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
        transform: translateY(-0.42em) scale(1);
    }
    50% {
        box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.4), 0 0 30px rgba(251, 191, 36, 0.85), 0 8px 20px rgba(0, 0, 0, 0.5);
        transform: translateY(-0.44em) scale(1.08);
    }
    100% {
        box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.25), 0 0 20px rgba(251, 191, 36, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
        transform: translateY(-0.42em) scale(1);
    }
}

/* NİMO AI - AYARLAR BUTONU */
.ai-settings-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 15px;
    padding: 2px 5px;
    border-radius: 4px;
    transition: color 0.2s;
    line-height: 1;
}
.ai-settings-btn:hover { color: white; }
.ai-header-actions { display: flex; align-items: center; gap: 4px; }

/* NİMO AI - AKTIF DURUM ROZET */
.nimo-ai-badge {
    font-size: 9px;
    background: #22c55e;
    color: white;
    border-radius: 8px;
    padding: 1px 5px;
    margin-left: 5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* SEPET / LİSTE STİLLERİ */
.sepet-container {
    margin: 14px 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    display: block;
    width: 100%;
    clear: both;
}

/* Pencere Listesi - Sadece Pencere Çizim Sayfasında Göster */
#section-cizim .sepet-container {
    display: block !important;
}

/* Diğer Sayfalarda Pencere Listesi Gizle */
#section-firma .sepet-container,
#section-fiyatlar .sepet-container,
#section-fiyatlistem .sepet-container,
#section-sorgula .sepet-container {
    display: none !important;
}

/* Fiyatlandırma Ekranı - Sadece Pencere Çizim Sayfasında Göster */
#section-cizim #imalatci-fiyatlandirma-container {
    clear: both;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Diğer Sayfalarda Gizle */
#section-firma #imalatci-fiyatlandirma-container,
#section-fiyatlar #imalatci-fiyatlandirma-container,
#section-fiyatlistem #imalatci-fiyatlandirma-container,
#section-sorgula #imalatci-fiyatlandirma-container {
    display: none !important;
}

.sepet-header {
    background: #2563eb;
    color: white;
    padding: 8px 12px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.sepet-item {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    font-size: 12px;
}
.sepet-item:last-child {
    border-bottom: none;
}

/* DÜZENLE BUTONU */
.btn-edit {
    position: absolute;
    top: 50%;
    right: 55px;
    transform: translateY(-50%);
    background: #f59e0b;
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    transition: background 0.2s;
}
.btn-edit:hover {
    background: #d97706;
}

/* İMALATÇI LİSTE BAŞLIĞI VE TOPLU GÜNCELLEME */
.liste-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    transition: background-color 0.2s;
    border-radius: 4px;
    padding: 10px;
    margin: -10px -10px 15px -10px;
}

.liste-baslik:hover {
    background-color: #f9fafb;
}

.toplu-guncelle-grup {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toplu-guncelle-grup label {
    margin-bottom: 0;
    font-size: 12px;
}

.btn-toplu-guncelle {
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}
.btn-toplu-guncelle.artis { background: #10b981; }
.btn-toplu-guncelle.artis:hover { background: #059669; }
.btn-toplu-guncelle.azalis { background: #ef4444; }
.btn-toplu-guncelle.azalis:hover { background: #dc2626; }

/* HESAPLAMA MODU SEÇİCİ */
.mode-selector {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.btn-mode {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: #6b7280;
    font-size: 12px;
}
.btn-mode.active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
}

#musteri-panel > .pvc-top-mode-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    background: #f8fafc;
}

#musteri-panel > .pvc-top-mode-selector .btn-mode {
    margin: 0;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
}

/* GENEL BUTON STİLLERİ */
.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-dark {
    background: #374151;
    color: white;
}

.btn-dark:hover {
    background: #1f2937;
}

.btn-success {
    background: #10b981;
    color: white;
}

.btn-success:hover {
    background: #059669;
}

.btn-info {
    background: #2563eb;
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-info:hover {
    background: #1d4ed8;
}

.teklif-iletisim-kutusu {
    margin-top: 8px;
    padding: 8px;
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
}

.teklif-telefon-satiri {
    font-size: 12px;
    color: #334155;
    margin-bottom: 6px;
    word-break: break-word;
    line-height: 1.3;
}

.teklif-iletisim-aksiyonlari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 6px;
    align-items: stretch;
}

.teklif-iletisim-aksiyonlari .btn {
    width: 100%;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.15;
}

.btn-danger {
    background: #ef4444;
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-warning {
    background: #f59e0b;
    color: white;
}

.btn-warning:hover {
    background: #d97706;
}

.cambalkon-is-kolu-mobile {
    display: none;
}

/* MOBİL RESPONSIVE TASARIM */
@media (max-width: 768px) {
    body {
        padding: 8px;
    }

    .site-header {
        padding: 14px 12px;
        margin-bottom: 14px;
    }

    .site-header-logo {
        font-size: 30px;
    }

    .site-header-title {
        font-size: 27px;
    }

    .site-header-line {
        font-size: 12px;
        letter-spacing: 0.2px;
    }

    .container {
        padding: 12px;
        border-radius: 6px;
    }

    h1 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .tabs {
        margin-bottom: 12px;
        gap: 2px;
    }

    .tab {
        padding: 8px 10px;
        font-size: 11px;
        font-weight: 500;
    }

    .panel {
        padding: 12px;
    }

    /* Pencere paneli mobil düzeni */
    #musteri-panel .panel-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #musteri-panel .form-section {
        flex: 1;
        width: 100%;
        max-width: 100%;
        order: 2;
        padding: 0;
    }

    #musteri-panel .preview-section {
        flex: 1;
        width: 100%;
        position: relative;
        top: 0;
        max-height: none;
        order: 1;
        padding: 0;
        margin-bottom: 8px;
    }

    /* Mobilde bölge/firma bilgileri (şehir-ilçe) görünür kalsın */
    #musteri-panel .musteri-bilgi,
    #imalatci-dashboard-badana .musteri-bilgi:not(.badana-panel-card) {
        display: block;
    }

    /* Mode selector hemen görünsün */
    .mode-selector {
        order: -1;
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
        padding: 0;
        background: transparent;
    }

    .mode-selector button {
        flex: 1;
        padding: 8px;
        font-size: 11px;
        min-height: 32px;
        border-radius: 4px;
    }

    /* Pencere form container - ölçüler minimum */
    #pencere-form-container {
        order: 1;
        margin-top: 0;
        padding: 8px;
        background: white;
        border-radius: 4px;
    }

    #pencere-form-container h2 {
        display: none;
    }

    /* Genişlik/Yükseklik/Adet - genişlik/yükseklik altalta, adet yanında */
    #pencere-form-container > .form-row:first-of-type {
        display: grid;
        grid-template-columns: 1fr 1fr 56px;
        gap: 4px;
        margin-bottom: 8px;
        align-items: flex-start;
    }

    #pencere-form-container > .form-row:first-of-type .form-group {
        margin-bottom: 0;
    }

    #pencere-form-container > .form-row:first-of-type .form-group:nth-child(1),
    #pencere-form-container > .form-row:first-of-type .form-group:nth-child(2) {
        grid-column: span 1;
    }

    #pencere-form-container > .form-row:first-of-type .form-group:nth-child(3) {
        grid-column: 3;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    #pencere-form-container > .form-row:first-of-type .form-group:nth-child(3) label {
        font-size: 9px;
        margin-bottom: 1px;
    }

    #pencere-form-container > .form-row:first-of-type .form-group:nth-child(3) input {
        font-size: 12px;
        padding: 3px;
        height: 26px;
        text-align: center;
        font-weight: 600;
    }

    #pencere-form-container > .form-row:first-of-type .form-group label {
        font-size: 10px;
        margin-bottom: 2px;
    }

    #pencere-form-container > .form-row:first-of-type .form-group input {
        font-size: 11px;
        padding: 4px;
        height: 28px;
    }

    /* Renk/Cam - 2 sütun */
    #pencere-form-container > .form-row:nth-of-type(2) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-bottom: 8px;
    }

    #pencere-form-container > .form-row:nth-of-type(2) .form-group {
        margin-bottom: 0;
    }

    #pencere-form-container > .form-row:nth-of-type(2) .form-group label {
        font-size: 10px;
        margin-bottom: 2px;
    }

    #pencere-form-container > .form-row:nth-of-type(2) .form-group select {
        font-size: 11px;
        padding: 4px;
        height: 28px;
    }

    /* Bölme sayısı */
    #pencere-form-container > .form-group {
        margin-bottom: 8px;
    }

    #pencere-form-container > .form-group label {
        font-size: 10px;
        margin-bottom: 2px;
    }

    #pencere-form-container > .form-group select {
        font-size: 11px;
        padding: 4px;
        height: 28px;
    }

    /* Kanat detayları gizli */
    .pencere-detay-panel {
        display: none;
    }

    #pvc-kanat-detay-panel {
        display: block !important;
    }

    #imalatci-pvc-kanat-detay-panel {
        display: block;
    }

    /* Mobilde PVC ölçü grid ve pervaz/menfez yan yana */
    #imalatci-olcu-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #imalatci-pervaz-menfez-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 0;
    }

    #imalatci-pervaz-menfez-row .pencere-detay-panel {
        margin-top: 0;
    }

    #imalatci-bolum-grup-card {
        padding: 10px !important;
        display: flex;
        align-items: center;
    }

    #imalatci-bolum-grup-card #imalatci-bolum-grup {
        width: 100%;
        display: block;
        margin-bottom: 0;
    }

    #imalatci-bolum-grup-card #imalatci-bolum-grup label {
        margin-bottom: 6px;
        font-size: 11px;
    }

    #imalatci-bolum-grup-card #imalatci-bolum-grup select {
        width: 100%;
        min-width: 0;
    }

    /* Mobilde Pencere/Sineklik seçimi fiyat yönetimi altında görünür */
    #imalatci-mode-secim-desktop {
        display: none !important;
    }

    /* Desktop'ta mobil toggle gizli */
    #imalatci-pvc-mode-mobile {
        /* Varsayılan olarak gizli; gerekli durumda JS görünür yapar */
        display: none;
    }

    #bolum-detaylari,
    #imalatci-bolum-detaylari {
        grid-template-columns: 1fr;
    }

    /* Sineklik formu mobilde */
    #sineklik-form-container {
        display: none;
    }

    #sineklik-form-container,
    #imalatci-sineklik-form-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #imalatci-sineklik-form-container {
        grid-column: 1 / -1 !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    #sineklik-form-container .form-row.sin-olcu-row,
    #sineklik-form-container .form-row.sin-model-alan-row,
    #sineklik-form-container .form-row.sin-tul-renk-row,
    #imalatci-sineklik-form-container .form-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    #sineklik-form-container .form-row.sin-olcu-row .form-group,
    #sineklik-form-container .form-row.sin-model-alan-row .form-group,
    #sineklik-form-container .form-row.sin-tul-renk-row .form-group,
    #imalatci-sineklik-form-container .form-group {
        margin-bottom: 0 !important;
        min-width: 0 !important;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .form-group label {
        font-size: 12px;
        display: block;
        margin-bottom: 4px;
        font-weight: 500;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 14px;
        padding: 10px 8px;
        width: 100%;
        min-height: 36px;
    }

    .btn-primary,
    .btn-mode,
    button[onclick] {
        padding: 10px 8px;
        font-size: 12px;
        min-height: 36px;
        width: auto;
        margin-bottom: 6px;
    }

    /* Hızlı ekle/fiyat hesapla butonları - inline */
    #musteri-panel > div > div > div[style*="display:flex; gap:10px"] {
        display: flex !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    #musteri-panel > div > div > div[style*="display:flex; gap:10px"] button {
        flex: 1;
        width: auto;
        padding: 10px !important;
        font-size: 12px !important;
        min-height: 36px;
    }

    .mode-selector {
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
        background: transparent;
    }

    .mode-selector button {
        flex: 1;
        padding: 8px;
        font-size: 11px;
        min-height: 32px;
    }

    /* Sepet - alt tarafta */
    .sepet-container {
        order: 3;
        max-height: 160px;
        overflow-y: auto;
        margin: 8px 0;
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        background: white;
    }

    .sepet-header {
        padding: 6px 8px;
        font-size: 10px;
        font-weight: 600;
        background: #f3f4f6;
        position: sticky;
        top: 0;
    }

    .cizim-alani {
        width: 100%;
        padding: 8px;
        background: #fafbfc;
        border-radius: 6px;
    }

    .cizim-alani h3 {
        font-size: 13px;
        margin: 0 0 8px 0;
        text-align: center;
    }

    canvas {
        width: 100%;
        height: auto;
        display: block;
    }

    #pencere-canvas {
        width: 100%;
        height: 220px;
        display: block;
    }

    #imalatci-pencere-canvas {
        width: 100%;
        height: auto !important;
        max-height: none !important;
        display: block;
    }

    /* Canvas wrapper mobilde alt alta (yalniz musteri PVC) */
    #musteri-panel .cizim-alani > div[style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    #musteri-panel .cizim-alani > div[style*="display: flex"] > div {
        flex: 1 !important;
        width: 100% !important;
    }

    /* Metraj panel mobilde gizli */
    #musteri-panel .metraj-panel {
        display: none !important;
    }

    #balkon-3d-preview {
        width: 100%;
        max-width: 100%;
        height: 200px;
        display: block;
    }

    .form-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-row .form-group {
        flex: 1;
        width: 100%;
        margin-bottom: 0;
    }

    .sepet-container {
        max-height: 180px;
        overflow-y: auto;
        margin: 10px 0;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
    }

    .sepet-header {
        padding: 8px 10px;
        font-size: 12px;
        font-weight: 600;
    }

    .pencere-detay-panel {
        margin-top: 12px;
        padding: 10px;
        background: #f9fafb;
        border-radius: 6px;
    }

    .pencere-detay-panel h4 {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .bolum-item {
        margin-bottom: 8px;
        padding: 8px;
        background: white;
        border-radius: 4px;
    }

    .bolum-item label {
        font-size: 11px;
    }

    .bolum-item input {
        font-size: 12px;
        padding: 6px 8px;
    }

    .metraj-panel {
        width: 100%;
        padding: 10px;
        background: white;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
    }

    .metraj-panel h4 {
        font-size: 12px;
        margin-bottom: 8px;
        color: #374151;
    }

    .metraj-icerik {
        font-size: 12px;
    }

    .result-item {
        flex-direction: column;
        margin-bottom: 10px;
    }

    #site-stats {
        font-size: 11px;
        margin-bottom: 8px;
    }

    h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    h3 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    h4 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .musteri-bilgi h3 {
        font-size: 13px;
    }

    .ai-widget-btn {
        bottom: 10px;
        right: 10px;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        gap: 0;
        font-size: 14px;
    }

    .ai-widget-btn::after {
        width: 8px;
        height: 8px;
        right: 9px;
        bottom: -3px;
    }

    .ai-widget-top-label {
        display: none;
    }

    .ai-widget-icon {
        font-size: 15px;
    }

    .ai-widget-text {
        font-size: 7px;
    }

    .ai-chat-box {
        bottom: 70px;
        right: 10px;
        width: calc(100% - 20px);
        max-width: 280px;
        height: 300px;
    }

    .ai-header {
        padding: 10px;
        font-size: 12px;
    }

    .ai-messages {
        height: 180px;
        font-size: 12px;
    }

    .ai-input-area {
        padding: 8px;
    }

    .ai-input-area input {
        font-size: 12px;
        padding: 8px;
    }

    .ai-input-area button {
        padding: 8px 12px;
    }

    /* Teklif sonuçları daha kompakt */
    .results-section {
        padding: 12px;
        margin-top: 12px;
    }

    .results-section h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /* Sol panel yanında preview kısmında */
    .cizim-alani h3 {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .canvas-info {
        font-size: 11px;
        margin-top: 6px;
    }
}

    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

    #e-ticaret-panel {
        font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
        background: radial-gradient(circle at 20% 0%, rgba(255, 244, 231, 0.9), transparent 55%),
            radial-gradient(circle at 90% 10%, rgba(219, 234, 254, 0.85), transparent 55%),
            linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 14px;
        padding: 18px 16px 22px;
    }

    .ecom-topbar {
        display: grid;
        grid-template-columns: 170px minmax(0, 1fr) auto;
        gap: 14px;
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(226, 232, 240, 0.85);
        border-radius: 16px;
        padding: 12px 14px;
        margin-bottom: 16px;
        max-width: 1050px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(8px);
    }

    .ecom-topbar-brand {
        font-size: 30px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1;
        letter-spacing: -0.6px;
    }

    .ecom-topbar-brand span {
        color: #f59e0b;
    }

    .ecom-topbar-search {
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #ffffff;
        padding: 10px 12px;
        box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.6);
    }

    .ecom-search-icon {
        font-size: 16px;
        color: #6b7280;
    }

    .ecom-topbar-search input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #1f2937;
        font-size: 13px;
        padding: 0;
    }

    .ecom-topbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ecom-topbar-btn {
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #0f172a;
        border-radius: 10px;
        padding: 8px 11px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }

    .ecom-topbar-btn:hover {
        border-color: #f59e0b;
        background: #fff7ed;
        transform: translateY(-1px);
    }

    .ecom-musteri-panel {
        max-width: 1050px;
        margin: 0 auto 16px;
        background: #ffffff;
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 14px;
        padding: 16px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .ecom-musteri-panel h4 {
        margin-bottom: 4px;
        color: #0f172a;
        font-size: 15px;
    }

    .ecom-musteri-aciklama {
        margin-bottom: 10px;
        font-size: 12px;
        color: #64748b;
    }

    .ecom-musteri-aksiyon {
        display: flex;
        gap: 8px;
    }

    .ecom-musteri-aksiyon .btn-primary {
        width: auto;
        flex: 1;
        margin-top: 0;
    }

    .ecom-cart-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        margin-left: 5px;
        border-radius: 999px;
        background: #f59e0b;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
    }

    .ecom-ust-bilgi {
        background: linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(239, 246, 255, 0.9) 100%);
        padding: 14px;
        border-radius: 14px;
        margin-bottom: 16px;
        text-align: center;
        border: 1px solid rgba(226, 232, 240, 0.8);
        max-width: 1050px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    .ecom-ust-bilgi p {
        color: #475569;
        margin: 0;
        font-size: 13px;
    }

    .ecom-kategori-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        padding: 6px 2px 12px;
        margin-bottom: 12px;
        scrollbar-width: thin;
        max-width: 1050px;
        margin-left: auto;
        margin-right: auto;
    }

    .ecom-kategori-btn {
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #1f2937;
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    }

    .ecom-kategori-btn:hover {
        border-color: #f59e0b;
        color: #0f172a;
        background: #fff7ed;
    }

    .ecom-kategori-btn.active {
        border-color: #f59e0b;
        background: #f59e0b;
        color: #ffffff;
    }

    .ecom-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }

    .ecom-urun-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .ecom-urun-kart {
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 14px;
        padding: 10px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 300px;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .ecom-urun-kart:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
    }

    .ecom-kategori-etiket {
        align-self: flex-start;
        background: #0f172a;
        color: #fef3c7;
        border: none;
        font-size: 10px;
        font-weight: 700;
        border-radius: 999px;
        padding: 4px 8px;
        margin-bottom: 6px;
        letter-spacing: 0.2px;
    }

    .ecom-urun-gorsel {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid rgba(226, 232, 240, 0.9);
        background: #f8fafc;
        margin-bottom: 8px;
    }

    .ecom-kart-icerik {
        flex: 1;
    }

    .ecom-urun-kart h4 {
        font-size: 14px;
        color: #0f172a;
        margin-bottom: 4px;
        font-weight: 600;
    }

    .ecom-urun-kart p {
        font-size: 11px;
        color: #6b7280;
        line-height: 1.3;
    }

    .ecom-kart-alt {
        margin-top: 8px;
    }

    .ecom-kart-alt strong {
        display: block;
        font-size: 16px;
        color: #0f172a;
        margin-bottom: 6px;
    }

    .ecom-kart-alt .btn-primary {
        margin-top: 0;
        padding: 7px 10px;
        font-size: 12px;
    }

    .ecom-sepet-kutu {
        background: #f8fafc;
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 12px;
        padding: 12px;
        min-height: 140px;
        max-height: 320px;
        overflow-y: auto;
    }

    @media (max-width: 1400px) {

    @media (max-width: 1100px) {
        .ecom-urun-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .ecom-cart-column {
        position: sticky;
        top: 16px;
        align-self: start;
        background: #ffffff;
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    }

    .ecom-empty {
        color: #94a3b8;
        font-size: 13px;
        text-align: center;
        margin-top: 30px;
    }

    .ecom-sepet-kalem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #e2e8f0;
        padding: 10px 0;
    }

    .ecom-sepet-kalem:last-child {
        border-bottom: none;
    }

    .ecom-sepet-kalem h5 {
        margin: 0;
        font-size: 13px;
        color: #1f2937;
    }

    .ecom-sepet-kalem small {
        font-size: 11px;
        color: #64748b;
    }

    .ecom-sepet-aksiyon {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .ecom-sepet-aksiyon button {
        border: 1px solid #cbd5e1;
        background: #ffffff;
        border-radius: 6px;
        padding: 3px 8px;
        font-size: 12px;
        cursor: pointer;
    }

    .ecom-sepet-aksiyon span {
        min-width: 16px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #334155;
    }

    .ecom-toplam {
        margin-top: 10px;
        font-size: 15px;
        font-weight: 700;
        color: #0f172a;
        text-align: right;
    }

    .ecom-no-result {
        grid-column: 1 / -1;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        color: #64748b;
        font-size: 14px;
    }

    .ecom-satici-auth-box {
        max-width: 520px;
        margin: 24px auto;
    }

    .ecom-satici-nav {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .ecom-satici-nav-btn {
        flex: 1;
        min-width: 180px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .ecom-satici-nav-btn:hover {
        border-color: #f59e0b;
        background: #fff7ed;
        color: #111827;
    }

    .ecom-satici-nav-btn.active {
        border-color: #f59e0b;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        color: #0f172a;
        box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25);
    }

    .ecom-satici-firma-karti {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 14px;
    }

    .ecom-satici-layout {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    .ecom-satici-uyari {
        background: #eff6ff;
        color: #1e40af;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 12px;
        margin-bottom: 12px;
    }

    .ecom-satici-liste {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 12px;
        min-height: 220px;
        max-height: 520px;
        overflow-y: auto;
    }

    .ecom-satici-item {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #e2e8f0;
        align-items: center;
    }

    .ecom-satici-item-img {
        width: 64px;
        height: 64px;
        border-radius: 8px;
        object-fit: cover;
        border: 1px solid #cbd5e1;
        background: #f8fafc;
        flex: 0 0 64px;
    }

    .ecom-satici-item:last-child {
        border-bottom: none;
    }

    .ecom-satici-item h4 {
        margin: 0 0 4px 0;
        color: #1f2937;
        font-size: 14px;
    }

    .ecom-satici-item small {
        display: block;
        color: #64748b;
        font-size: 11px;
        margin-bottom: 4px;
    }

    .ecom-satici-item p {
        margin: 0;
        color: #475569;
        font-size: 12px;
    }

    .ecom-satici-item-actions {
        display: flex;
        gap: 8px;
        margin-top: 6px;
    }

    .ecom-satici-item-actions button {
        border: 1px solid #cbd5e1;
        background: #ffffff;
        color: #334155;
        border-radius: 6px;
        padding: 4px 10px;
        font-size: 12px;
        cursor: pointer;
    }

    .ecom-satici-item-actions button:hover {
        border-color: #94a3b8;
        background: #f8fafc;
    }

    .ecom-satici-item strong {
        white-space: nowrap;
        color: #0f172a;
        font-size: 14px;
    }

    @media (max-width: 900px) {
        .ecom-topbar {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .ecom-topbar-brand {
            font-size: 24px;
            text-align: center;
        }

        .ecom-topbar-actions {
            flex-wrap: wrap;
            justify-content: center;
        }

        .ecom-kategori-bar {
            padding-bottom: 8px;
            margin-bottom: 8px;
        }

        .ecom-layout {
            display: block;
        }

        .ecom-satici-layout {
            display: block;
        }

        .ecom-satici-nav {
            flex-direction: column;
        }

        .ecom-satici-nav-btn {
            width: 100%;
        }

        .ecom-cart-column {
            position: static;
            margin-top: 14px;
        }

        .ecom-musteri-aksiyon {
            flex-direction: column;
        }
    }

}

/* DUZEN TOPARLAMA - SADECE GORSEL IYILESTIRME */
:root {
    --ui-bg: #f8fafc;
    --ui-surface: #ffffff;
    --ui-border: #e2e8f0;
    --ui-border-strong: #cbd5e1;
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-accent: #f59e0b;
    --ui-control-font: 'Segoe UI', Tahoma, Arial, sans-serif;
}

body {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    color: var(--ui-text);
}

.container {
    max-width: 1260px;
    border-radius: 16px;
    padding: 22px;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
}

/* Ana sekme satirini daha sade hale getir */
.container > .tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 18px;
    border-bottom: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.container > .tabs .tab {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 9px;
    padding: 10px 8px;
    background: transparent;
    color: #1f2937;
    font-weight: 700;
    letter-spacing: 0.25px;
}

.container > .tabs .tab.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #0f172a;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.26);
}

.container > .tabs .tab:hover {
    background: #fff3cd;
    color: #78350f;
    box-shadow: none;
    text-shadow: none;
}

/* Imalatci ust ana sekmeleri: site formuna uygun yatay sekmeler */
#imalatci-main-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px !important;
    flex-wrap: wrap;
    position: relative;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    min-height: auto;
    width: fit-content;
    margin: 0 auto 18px auto;
}

#imalatci-main-tabs .tab {
    flex: 0 1 auto;
    min-width: 170px;
    height: auto;
    border-radius: 12px !important;
    border: 1px solid #0f172a;
    background: #111827;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
    font-size: 14px;
    letter-spacing: 0.2px;
    font-weight: 700;
    transition: all 0.2s ease;
}

#imalatci-main-logout {
    position: absolute;
    top: -2px;
    right: 0;
    border: none;
    border-radius: 999px;
    background: #ff4d4d;
    color: #ffffff;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 77, 77, 0.35);
}

#imalatci-main-tabs .tab.active {
    position: relative;
    border-color: #0f172a;
    background: #111827;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28);
    transform: translateY(-1px);
    padding-right: 28px;
}

#imalatci-main-tabs .tab.active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #facc15 100%);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.16);
    animation: nimoSelectedBounce 0.9s ease-in-out infinite;
    transform: translateY(-50%);
}

#imalatci-main-tabs .tab:hover {
    background: #1f2937;
    color: #ffffff;
    border-color: #111827;
}

#imalatci-dashboard-celik {
    display: block !important;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 14px 8px;
}

#imalatci-dashboard-celik > .form-section {
    flex: none !important;
    width: 100%;
    max-width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

#imalatci-dashboard-celik .kitchen-note-card,
#imalatci-dashboard-celik .imalatci-section,
#imalatci-dashboard-celik .imalatci-liste {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#imalatci-dashboard-celik .imalatci-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 0 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    padding: 8px;
}

#imalatci-dashboard-celik .musteri-bilgi {
    border: 1px solid #dbe4ee;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

#imalatci-dashboard-celik .imalatci-nav-btn {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#imalatci-dashboard-celik .btn-mode {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#imalatci-dashboard-celik .kisisel-ayar-tabs {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}

#imalatci-dashboard-celik .imalatci-nav-btn.active {
    background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
    color: #ffffff;
    border-color: #0f172a;
}

/* Buton/Sekme tipografisi standardi */
.tab,
.btn-primary,
.btn-mode,
.imalatci-nav-btn,
.cambalkon-firma-nav-btn,
.btn,
button {
    font-family: var(--ui-control-font);
    letter-spacing: 0.2px;
    line-height: 1.25;
}

.tab,
.btn-mode,
.imalatci-nav-btn,
.cambalkon-firma-nav-btn,
.btn {
    font-size: 13px;
    font-weight: 600;
}

.btn-primary {
    font-size: 13px;
    font-weight: 700;
}

.nav-text {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.3;
}

.panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 14px;
}

.panel-layout {
    gap: 24px;
}

.form-section,
.preview-section,
.results-section {
    min-width: 0;
}

.preview-section {
    border-radius: 10px;
    border: 1px solid var(--ui-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    padding: 16px;
}

.form-group {
    margin-bottom: 10px;
}

label {
    color: #334155;
}

input,
select,
textarea {
    background: #fff;
    border-color: var(--ui-border-strong);
}

.musteri-bilgi,
.pencere-detay-panel,
.cizim-alani,
.metraj-panel {
    border-radius: 10px;
    border-color: var(--ui-border);
}

/* Yana kayik panel etkisini kaldir */
#laminant-parke-panel .panel-layout,
#mermer-panel .panel-layout {
    transform: none;
}

/* Kucuk ekranlarda ana sekmeleri yatay kaydir */
@media (max-width: 1100px) {
    .container > .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }

    .container > .tabs .tab {
        min-width: 180px;
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 12px;
        border-radius: 10px;
    }

    .panel {
        padding: 10px;
        border-radius: 10px;
    }

    .preview-section {
        padding: 12px;
    }

    .tab,
    .btn-primary,
    .btn-mode,
    .imalatci-nav-btn,
    .cambalkon-firma-nav-btn,
    .btn {
        font-size: 12px;
        line-height: 1.2;
    }
}

/* GENEL MOBİL DENGELEME (TÜM SİTE) */
html,
body {
    overflow-x: hidden;
}

img,
video,
canvas,
iframe,
table {
    max-width: 100%;
}

@media (max-width: 900px) {
    body {
        padding: 0;
    }

    .container {
        margin: 0 6px 14px;
        padding: 12px;
        border-radius: 10px;
    }

    .tabs {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding-bottom: 6px;
        scrollbar-width: thin;
        border-bottom-width: 1px;
    }

    .tab {
        flex: 0 0 auto;
        min-width: 150px;
        white-space: nowrap;
        border-radius: 8px;
        font-size: 12px;
        padding: 9px 10px;
    }

    .panel {
        width: 100%;
        max-width: 100%;
    }

    .panel-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .form-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-section,
    .preview-section,
    .results-section,
    .metraj-panel,
    .sepet-container,
    .auth-box,
    .imalatci-section {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .auth-box {
        margin: 16px auto;
        padding: 16px;
    }

    .ecom-topbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .ecom-topbar-btn {
        width: 100%;
        text-align: center;
    }

    .ecom-urun-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ecom-sepet-aksiyon {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    body > header {
        padding: 14px 10px !important;
        margin-bottom: 12px !important;
    }

    body > header h1 {
        font-size: 26px !important;
        line-height: 1.15 !important;
        word-break: break-word;
    }

    body > header span {
        font-size: 30px !important;
    }

    footer {
        margin-top: 26px !important;
        padding: 20px 10px 12px !important;
    }

    footer h2 {
        font-size: 22px !important;
    }

    footer > div > div[style*="gap: 30px"] {
        gap: 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 640px) {
    .site-marquee {
        margin-top: -12px;
        margin-bottom: 10px;
    }

    .site-marquee-track {
        gap: 24px;
        padding: 8px 0;
        animation-duration: 26s;
    }

    .site-marquee-track span {
        font-size: 11px;
    }

    .container {
        margin: 0 4px 12px;
        padding: 10px;
    }

    .tab {
        min-width: 138px;
        font-size: 11px;
    }

    .ecom-urun-grid {
        grid-template-columns: 1fr;
    }

    .ecom-topbar-actions {
        grid-template-columns: 1fr;
    }

    body > header h1 {
        font-size: 22px !important;
    }

    body > header p {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
}

/* MOBIL SERT UYUMLULUK - TUM SISTEM */
@media (max-width: 900px) {
    html,
    body,
    .container,
    .panel,
    .panel-layout,
    .form-section,
    .preview-section,
    .results-section,
    .imalatci-section {
        overflow-x: hidden !important;
    }

    /* Masaustu icin verilen kaydirma/offsetleri mobilde kapat */
    #laminant-parke-panel .panel-layout,
    #mermer-panel .panel-layout,
    #celik-kapi-panel .panel-layout,
    #imalatci-dashboard-mermer,
    #imalatci-dashboard-insaat,
    #imalatci-dashboard-celik,
    [style*="translateX(-18px)"] {
        transform: none !important;
    }

    /* Mobilde yapiskan sag paneller tasmaya neden olmasin */
    .preview-section,
    .ecom-cart-column,
    #cam-balkon-panel .preview-section,
    [style*="position: sticky"] {
        position: static !important;
        top: auto !important;
    }

    /* Sabit/genis min-width kullanan bloklari serbest birak */
    #cam-balkon-panel .preview-section,
    #cam-balkon-panel #balkon-3d-preview,
    #pvc-musteri-3d-preview,
    #imalatci-dashboard-cambalkon,
    [style*="min-width: 500px"],
    [style*="max-width: calc(100vw - 420px)"] {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Form satirlari mobilde tasmasin */
    .musteri-bilgi .form-row,
    .ecom-satici-nav {
        width: 100% !important;
        min-width: 0 !important;
    }

    .ecom-satici-nav,
    .ecom-topbar-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .ecom-satici-nav-btn,
    .ecom-topbar-btn {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
    }

    /* Tum input butonlarini mobil dokunmatik kullanim icin buyut */
    input,
    select,
    textarea,
    button,
    .btn,
    .btn-primary {
        font-size: 14px !important;
    }

    /* Inline width verilmis elemanlarin tasmasini engelle */
    [style*="width:400"],
    [style*="width: 400"],
    [style*="width:300"],
    [style*="width: 300"] {
        max-width: 100% !important;
    }
}

@media (max-width: 560px) {
    .tab {
        min-width: 124px !important;
        padding: 8px 9px !important;
    }

    .imalatci-nav-btn,
    .ecom-satici-nav-btn,
    .ecom-topbar-btn {
        flex: 1 1 100% !important;
    }

    .auth-box,
    .imalatci-section,
    .musteri-bilgi,
    .cizim-alani {
        padding: 10px !important;
    }

    #pencere-canvas,
    #imalatci-pencere-canvas,
    canvas {
        width: 100% !important;
        height: auto !important;
    }
}

/* MOBIL PANEL REVIZE - MUSTERI + IMALATCI */
@media (max-width: 900px) {
    .container {
        margin: 0 6px 12px;
        padding: 12px;
        border-radius: 12px;
    }

    .tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .tab {
        flex: 0 0 auto;
        min-width: 142px;
        padding: 9px 10px;
        font-size: 12px;
        border-radius: 10px;
        white-space: nowrap;
        scroll-snap-align: center;
    }

    .panel {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 14px 12px;
    }

    .panel-layout,
    #section-cizim .panel-layout,
    #musteri-panel .panel-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-section,
    .preview-section,
    .results-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .preview-section {
        position: static !important;
        top: auto !important;
        padding: 12px;
        border-radius: 10px;
    }

    #musteri-panel .preview-section {
        order: 1;
    }

    #musteri-panel .form-section {
        order: 2;
    }

    #musteri-panel .musteri-bilgi,
    [id^="imalatci-dashboard-"] .musteri-bilgi:not(.badana-panel-card) {
        display: block !important;
    }

    .musteri-bilgi {
        padding: 10px;
        border-radius: 10px;
    }

    .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #musteri-panel #pencere-form-container > .form-row:first-of-type {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    label {
        font-size: 12px;
    }

    input,
    select,
    textarea {
        min-height: 40px;
        padding: 10px;
        font-size: 14px;
    }

    .btn,
    .btn-primary,
    .imalatci-nav-btn {
        min-height: 40px;
    }

    .imalatci-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    .imalatci-nav-btn {
        min-width: 0;
        padding: 10px 8px;
        border-radius: 10px;
        font-size: 12px;
    }

    .nav-text {
        font-size: 11px;
        line-height: 1.2;
    }

    .cizim-alani {
        padding: 10px;
        border-radius: 10px;
    }

    #pencere-canvas,
    #imalatci-pencere-canvas,
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .auth-box {
        margin: 12px auto;
        padding: 16px 12px;
        border-radius: 12px;
    }

    .panel,
    .form-section,
    .preview-section,
    .cizim-alani,
    .kitchen-price-card,
    .musteri-bilgi,
    .pencere-detay-panel,
    .sepet-container {
        border-radius: 12px !important;
    }

    .btn-primary,
    .tab,
    .imalatci-nav-btn,
    .kitchen-gardrop-cam-btn {
        min-height: 40px;
        padding: 10px 12px;
    }
}

@media (max-width: 560px) {
    .imalatci-nav {
        grid-template-columns: 1fr;
    }

    .tab {
        min-width: 130px;
        font-size: 11px;
        padding: 8px 10px;
    }

    .panel {
        padding: 12px 10px;
    }

    .form-group label,
    .canvas-info,
    .pencere-detay-panel h4,
    .kitchen-price-caption {
        letter-spacing: 0.1px;
    }

    .btn-primary,
    .tab,
    .imalatci-nav-btn,
    .kitchen-gardrop-cam-btn {
        width: 100%;
    }

    #mutfak-dolabi-panel .kitchen-gardrop-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    #mutfak-dolabi-panel .kitchen-gardrop-settings-col {
        padding: 7px;
    }

    #mutfak-dolabi-panel .kitchen-gardrop-group-title {
        font-size: 11px;
    }
}

/* E-TICARET MOBIL 3'LU URUN KARTI */
@media (max-width: 900px) {
    #e-ticaret-panel .ecom-urun-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #e-ticaret-panel .ecom-urun-kart {
        min-height: auto;
        padding: 7px;
        border-radius: 10px;
    }

    #e-ticaret-panel .ecom-kategori-etiket {
        font-size: 9px;
        padding: 3px 6px;
        margin-bottom: 5px;
    }

    #e-ticaret-panel .ecom-urun-kart h4 {
        font-size: 11px;
        line-height: 1.25;
        margin-bottom: 3px;
    }

    #e-ticaret-panel .ecom-urun-kart p {
        font-size: 9px;
        line-height: 1.25;
        margin-bottom: 4px;
    }

    #e-ticaret-panel .ecom-kart-alt strong {
        font-size: 12px;
        margin-bottom: 4px;
    }

    #e-ticaret-panel .ecom-kart-alt .btn-primary {
        padding: 6px 6px;
        font-size: 10px;
        min-height: 32px;
    }
}

@media (max-width: 560px) {
    #e-ticaret-panel .ecom-urun-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* MOBILDE RENDER ALANI USTTE KALSIN (SON OVERRIDE) */
@media (max-width: 900px) {
    .panel-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .panel-layout > .preview-section,
    #cambalkon-section-musteri .cambalkon-preview-panel {
        order: 1 !important;
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;
    }

    .panel-layout > .form-section {
        order: 2 !important;
    }

    #celik-kapi-panel .panel-layout > .form-section {
        order: 1 !important;
    }

    #celik-kapi-panel .panel-layout > .results-section {
        order: 2 !important;
    }

    #balkon-3d-preview,
    #imalatci-balkon-3d-preview,
    #pvc-musteri-3d-preview,
    #kitchen-3d-preview,
    #pro-kitchen-3d-preview,
    #kitchen-gardrop-3d-preview,
    #pro-kitchen-gardrop-3d-preview {
        width: 100% !important;
        max-width: 100% !important;
        height: clamp(240px, 56vw, 380px) !important;
        touch-action: none;
        overscroll-behavior: contain;
    }
}

/* MOBILDE SECENEKLER DAHA ANLASILIR OLSUN (IS KOLU + FORM AKISI) */
@media (max-width: 900px) {
    .container {
        padding: 10px;
    }

    .tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 8px;
        scrollbar-width: thin;
    }

    .tabs .tab {
        flex: 0 0 auto;
        min-width: max-content;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    .imalatci-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
        margin-bottom: 12px;
        scrollbar-width: thin;
    }

    .imalatci-nav-btn,
    .cambalkon-firma-nav-btn,
    .mutfak-usta-nav-btn,
    .mutfak-musteri-nav-btn {
        flex: 0 0 auto;
        min-width: 138px;
        max-width: 180px;
        padding: 9px 10px;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }

    #cam-balkon-panel .imalatci-nav,
    #mutfak-dolabi-panel .imalatci-nav {
        position: sticky;
        top: 8px;
        z-index: 7;
        background: rgba(243, 244, 246, 0.98);
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 8px;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }

    .form-section,
    .preview-section {
        border-radius: 12px;
        padding: 12px;
    }

    .musteri-bilgi,
    #cam-balkon-olcu-wrap,
    #cam-balkon-sistem-wrap,
    #kupeste-olcu-wrap,
    #dusakabin-olcu-wrap,
    #imalatci-kupeste-wrap,
    #imalatci-dusakabin-wrap {
        border-radius: 12px !important;
        border: 1px solid #dbe4ee !important;
        box-shadow: 0 6px 12px rgba(15, 23, 42, 0.05);
        margin-bottom: 10px !important;
    }

    .form-group {
        margin-bottom: 10px;
    }

    label {
        font-size: 12px;
        margin-bottom: 5px;
    }

    input,
    select,
    button,
    .btn-primary {
        min-height: 42px;
    }

    .canvas-info {
        font-size: 11px;
        line-height: 1.45;
        opacity: 0.9;
    }
}

/* SON MOBIL UYUMLULUK DOKUNUSLARI */
@media (max-width: 900px) {
    .container {
        margin: 0 8px 12px;
        padding: 10px 10px 14px;
    }

    .tabs {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }

    .tabs .tab {
        scroll-snap-align: start;
        min-width: 146px;
    }

    #imalatci-main-tabs .tab {
        flex: 1 1 0;
        min-width: 0;
        width: calc(50% - 4px);
        height: auto;
        border-radius: 10px !important;
        font-size: 13px;
        padding: 10px 12px;
        white-space: nowrap;
    }

    #imalatci-main-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        padding: 0 !important;
        min-height: auto;
        width: 100%;
    }

    #imalatci-main-logout {
        top: -1px;
        padding: 4px 7px;
        font-size: 9px;
    }

    .site-header-brand {
        gap: 8px;
    }

    .site-header-logo {
        width: 36px;
        height: 36px;
    }

    .site-header-title {
        font-size: clamp(24px, 7vw, 30px);
    }

    .ai-chat-box {
        right: 8px;
        bottom: 86px;
        width: min(420px, calc(100vw - 16px));
        height: min(72vh, 520px);
        border-radius: 14px;
    }

    .ai-messages {
        padding: 10px;
    }

    .ai-message {
        max-width: 88%;
        font-size: 12px;
    }
}

@media (max-width: 560px) {
    .ai-widget-btn {
        width: 78px;
        height: 78px;
        right: 10px;
        bottom: 10px;
    }

    .ai-widget-icon {
        font-size: 22px;
    }

    .ai-widget-text {
        font-size: 10px;
    }

    .ai-chat-box {
        width: calc(100vw - 14px);
        right: 7px;
        bottom: 94px;
        height: min(76vh, 560px);
    }

    .ai-input-area input {
        font-size: 13px;
    }
}

/* Kompakt cerceve ayarlari */
.imalatci-section {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 14px;
}

.panel,
.form-section,
.preview-section,
.results-section {
    border-radius: 10px;
}

.kisisel-ayar-tabs {
    margin: 8px 0 10px;
    gap: 6px;
}

.kisisel-ayar-tab {
    padding: 6px 11px;
    font-size: 11px;
}

.kisisel-ayar-panel {
    padding: 10px;
    border-radius: 10px;
}

.kisisel-ayar-bilgi {
    padding: 9px;
    font-size: 11px;
    margin-bottom: 9px;
}

.kisisel-ayar-profile {
    gap: 8px;
    margin-bottom: 9px;
}

.kisisel-ayar-profile-block {
    padding: 8px;
    border-radius: 8px;
}

.kisisel-ayar-profile-title {
    margin-bottom: 6px;
}

.kisisel-ayar-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.kisisel-ayar-input {
    padding: 7px 8px;
    font-size: 11px;
}

.kisisel-ayar-actions {
    gap: 8px;
}

.kisisel-ayar-actions .btn-primary,
.kisisel-ayar-form-row .btn-primary,
.kisisel-ayar-profile-block .btn-primary {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 11px;
    border-radius: 8px;
}

.kisisel-ayar-muted {
    font-size: 11px;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .imalatci-section {
        padding: 12px;
        border-radius: 9px;
    }

    .kisisel-ayar-panel,
    .kisisel-ayar-bilgi,
    .kisisel-ayar-profile-block {
        border-radius: 8px;
    }

    .kisisel-ayar-form-row {
        flex-direction: column;
    }

    .kisisel-ayar-form-row .btn-primary {
        width: 100%;
    }
}

/* Cam balkon + mutfak musteride sade akis duzeni */
@media (max-width: 900px) {
    #cam-balkon-panel > .imalatci-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
    }

    #cam-balkon-panel > .imalatci-nav .imalatci-nav-btn {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        white-space: normal;
    }

    #cam-balkon-panel .panel-layout {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    #cam-balkon-panel .preview-section {
        order: 1;
        position: static;
        top: auto;
        width: 100%;
        max-width: 100%;
    }

    #cam-balkon-panel .form-section {
        order: 2;
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    #mutfak-dolabi-panel > .imalatci-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
    }

    #mutfak-dolabi-panel > .imalatci-nav .mutfak-musteri-nav-btn {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        white-space: normal;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .preview-section {
        order: 1;
        position: static;
        top: auto;
        width: 100%;
        max-width: 100%;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .form-section {
        order: 2;
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }

    #mutfak-dolabi-panel .kitchen-customer-bottom-offers {
        order: 3;
    }

    #mutfak-dolabi-panel .kitchen-material-accessory-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 12px;
    }

    #mutfak-dolabi-panel .kitchen-settings-card {
        background: #f8fafc;
        border: 1px solid #dbe4ee;
        border-radius: 10px;
        padding: 10px;
    }

    #mutfak-dolabi-panel .kitchen-settings-card h4 {
        margin: 0 0 10px;
        color: #0f172a;
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    #cam-balkon-panel > .imalatci-nav .nav-text,
    #mutfak-dolabi-panel > .imalatci-nav .nav-text {
        font-size: 11px;
    }
}

/* MOBIL IMALATCI NAV + KOMPAKT OZET (MUTFAK/PVC) */
@media (max-width: 900px) {
    #imalatci-dashboard-mutfak .kitchen-note-card {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    #imalatci-dashboard-mutfak .imalatci-nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, max-content)) !important;
        justify-content: start !important;
        gap: 6px !important;
        padding: 4px !important;
        margin-bottom: 8px !important;
        border: 1px solid #d7e0ea;
        border-radius: 10px;
        background: #f8fafc;
    }

    #imalatci-dashboard-mutfak .mutfak-usta-nav-btn {
        width: auto !important;
        min-width: auto !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        min-height: auto !important;
        height: auto !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        font-size: 10px !important;
    }

    #imalatci-dashboard-mutfak .mutfak-usta-nav-btn .nav-text {
        font-size: 10px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    #imalatci-dashboard-mutfak #mutfak-usta-logout {
        flex: 0 0 100% !important;
        margin-top: 6px !important;
    }

    #pro-dim-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start;
        gap: 4px !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #pro-dim-strip > .kitchen-dim-item:not(.kitchen-dim-editable) {
        display: none !important;
    }

    #pro-dim-strip .kitchen-dim-sep {
        display: none !important;
    }

    #pro-dim-strip .kitchen-dim-item {
        flex: 0 0 calc((100% - 12px) / 4);
        min-width: 72px !important;
        padding: 4px !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #pro-dim-strip .kitchen-dim-label {
        font-size: 9px;
        line-height: 1.1;
    }

    #pro-dim-strip .kitchen-dim-item strong {
        font-size: 11px;
        margin-top: 2px;
    }

    #pro-dim-strip .kitchen-dim-item.kitchen-dim-editable {
        min-width: 72px !important;
    }

    #pro-dim-strip .kitchen-dim-input {
        width: 40px;
        padding: 2px 3px;
        font-size: 11px;
    }

    #pro-dim-strip .kitchen-dim-input-row {
        gap: 4px;
    }

    #pro-dim-strip .kitchen-dim-input-row span {
        font-size: 9px;
    }

    #imalatci-dashboard-pimapen #imalatci-adet-gosterge {
        padding: 6px 8px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        margin-top: 8px !important;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-mutfak .mutfak-usta-nav-btn {
        min-width: 126px !important;
        max-width: 172px !important;
        padding: 7px 9px !important;
    }

    #pro-dim-strip {
        gap: 3px !important;
    }
}

/* MOBIL IMALATCI NAV + KOMPAKT OZET (CAM BALKON/BOYA) */
@media (max-width: 900px) {
    #imalatci-dashboard-cambalkon .imalatci-nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        overflow: visible !important;
        gap: 6px !important;
        padding: 4px !important;
        margin-bottom: 8px !important;
        border: 1px solid #d7e0ea;
        border-radius: 10px;
        background: #f8fafc;
    }

    #imalatci-dashboard-badana .imalatci-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding: 4px !important;
        margin-bottom: 8px !important;
        border: 1px solid #d7e0ea;
        border-radius: 10px;
        background: #f8fafc;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #imalatci-dashboard-cambalkon .imalatci-nav-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: 34px !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
        white-space: normal !important;
        font-size: 11px !important;
    }

    #imalatci-dashboard-badana .imalatci-nav-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 112px !important;
        max-width: 156px !important;
        margin: 0 !important;
        min-height: 34px !important;
        padding: 6px 8px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    #imalatci-dashboard-cambalkon .imalatci-nav-btn .nav-text {
        font-size: 10px;
        line-height: 1.15;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }

    #imalatci-dashboard-badana .imalatci-nav-btn .nav-text {
        font-size: 10px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    #imalatci-dashboard-cambalkon .musteri-bilgi,
    #imalatci-dashboard-cambalkon .cizim-alani,
    #imalatci-dashboard-cambalkon #imalatci-kupeste-wrap,
    #imalatci-dashboard-cambalkon #imalatci-dusakabin-wrap,
    #imalatci-dashboard-badana .musteri-bilgi {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    #imalatci-dashboard-cambalkon .form-row,
    #imalatci-dashboard-badana .form-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    #imalatci-dashboard-cambalkon input,
    #imalatci-dashboard-cambalkon select,
    #imalatci-dashboard-badana input,
    #imalatci-dashboard-badana select,
    #imalatci-dashboard-badana textarea {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 13px;
    }

    #imalatci-dashboard-cambalkon #imalatci-balkon-3d-preview {
        height: clamp(240px, 56vw, 360px) !important;
        border-radius: 10px !important;
    }

    #imalatci-dashboard-cambalkon .btn-primary,
    #imalatci-dashboard-badana .btn-primary {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-cambalkon .imalatci-nav-btn {
        min-width: 0 !important;
        max-width: none !important;
        min-height: 32px !important;
        padding: 5px 7px !important;
    }

    #imalatci-dashboard-badana .imalatci-nav-btn {
        min-width: 102px !important;
        max-width: 138px !important;
        min-height: 32px !important;
        padding: 5px 7px !important;
    }

    #imalatci-dashboard-cambalkon .form-row,
    #imalatci-dashboard-badana .form-row {
        grid-template-columns: 1fr;
    }
}

/* FINAL MOBILE CLEANUP: PVC + CAM BALKON + MUTFAK + HEADER */
@media (max-width: 900px) {
    /* PVC customer: city/form should stay above preview on mobile */
    #musteri-panel .form-section {
        order: 1 !important;
    }

    #musteri-panel .preview-section {
        order: 2 !important;
    }

    /* PVC customer wing detail cards: compact and side by side */
    #musteri-panel #pvc-kanat-detay-panel {
        margin-top: 8px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    #musteri-panel #pvc-kanat-detay-panel h4 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    #musteri-panel #bolum-detaylari {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #musteri-panel #bolum-detaylari .bolum-item {
        padding: 6px !important;
        border-radius: 8px !important;
    }

    #musteri-panel #bolum-detaylari .bolum-item label {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }

    #musteri-panel #bolum-detaylari .bolum-item select,
    #musteri-panel #bolum-detaylari .bolum-item input {
        min-height: 34px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    /* PVC manufacturer: avoid single-column collapse in drawing section */
    #imalatci-dashboard-pimapen #section-cizim .form-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #imalatci-dashboard-pimapen #section-cizim #imalatci-bolum-detaylari {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #imalatci-dashboard-pimapen #section-cizim #imalatci-bolum-detaylari .bolum-item {
        padding: 6px !important;
    }

    #imalatci-dashboard-pimapen #section-cizim #imalatci-bolum-detaylari .bolum-item label {
        font-size: 10px !important;
    }

    #imalatci-dashboard-pimapen #section-cizim #imalatci-bolum-detaylari .bolum-item select,
    #imalatci-dashboard-pimapen #section-cizim #imalatci-bolum-detaylari .bolum-item input {
        min-height: 34px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    #imalatci-dashboard-pimapen #section-cizim #imalatci-pvc-kanat-detay-panel {
        margin-top: 8px !important;
        width: calc(100% + 20px) !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    #imalatci-dashboard-pimapen #section-cizim #imalatci-pvc-kanat-detay-panel h4 {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    /* Cam balkon + mutfak: remove empty feel below 3D and keep design block tight */
    #cam-balkon-panel > .imalatci-nav {
        margin-bottom: 10px !important;
    }

    #cam-balkon-panel .panel-layout,
    #mutfak-dolabi-panel .kitchen-panel-layout {
        gap: 10px !important;
    }

    #cam-balkon-panel .preview-section,
    #mutfak-dolabi-panel .kitchen-preview-section {
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
    }

    #cam-balkon-panel .form-section,
    #mutfak-dolabi-panel .kitchen-form-section {
        margin-top: 0 !important;
        min-height: 0 !important;
        flex: 0 1 auto !important;
    }

    #cam-balkon-panel .form-section h3,
    #mutfak-dolabi-panel .kitchen-form-section h3 {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        font-size: 16px !important;
    }

    /* Header: keep top area compact on mobile */
    .site-header {
        padding: 12px 12px 10px !important;
        margin-bottom: 10px !important;
    }

    .site-header-toprow {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
        padding-right: 0 !important;
    }

    .site-header-brand {
        grid-column: 1;
        grid-row: 1;
        gap: 6px !important;
        width: max-content !important;
        transform: none !important;
        margin: 0 !important;
    }

    .site-header-logo {
        width: 30px !important;
        height: 30px !important;
    }

    .site-header-focus-text {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: center;
        white-space: nowrap;
        font-size: clamp(14px, 3.8vw, 18px) !important;
        padding: 4px 0 !important;
        transform: none !important;
        text-decoration: none !important;
        font-style: normal !important;
        letter-spacing: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible;
    }

    .site-header-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto !important;
        align-items: flex-end !important;
        justify-content: center !important;
        margin-left: auto !important;
        align-self: start !important;
    }

    .site-header-role {
        text-align: right !important;
        width: auto !important;
    }

    .site-header-cta {
        grid-column: 2;
        grid-row: 1;
        justify-self: end !important;
        align-self: start !important;
        font-size: 8px !important;
        padding: 3px 5px !important;
        white-space: nowrap;
    }

    .site-header-title {
        font-size: clamp(24px, 6vw, 30px) !important;
        line-height: 1.05;
        white-space: nowrap;
        text-align: center !important;
    }

    .site-header-services {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: calc(100% - 14px) !important;
        margin: 0 auto 10px !important;
    }

    .site-header-service-btn {
        font-size: clamp(9px, 2.35vw, 10.8px) !important;
        padding: 6px 3px !important;
        min-height: 64px;
        border-bottom: none !important;
        line-height: 1.15;
        letter-spacing: -0.05px;
        white-space: normal;
        word-break: keep-all;
    }

    .site-header-service-btn:last-child {
        border-right: none !important;
    }

    .site-brand-tr {
        width: 0.9em;
        height: 0.9em;
        margin-left: 3px;
        margin-right: 3px;
        border-width: 1.5px;
        font-size: 0.30em;
        transform: translateY(-0.06em);
        box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
    }

    .site-header-line {
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.15;
    }

    .site-header-line-soft,
    .site-header-line-muted {
        font-size: 10px !important;
    }

    #imalatci-header-login,
    #imalatci-header-logout {
        position: absolute;
        top: 6px;
        right: 2px;
        margin-left: 0;
        padding: 3px 7px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        min-height: 24px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        grid-column: auto !important;
        justify-self: auto !important;
        align-self: start !important;
    }

    .site-header.imalatci-logged-in #imalatci-header-logout {
        position: static !important;
        top: auto !important;
        right: auto !important;
        margin: 0 auto !important;
    }
}


@media (max-width: 560px) {
    #musteri-panel #bolum-detaylari {
        grid-template-columns: 1fr !important;
    }

    .site-header {
        padding: 8px 10px !important;
    }

    .site-header-services {
        width: calc(100% - 10px) !important;
        margin: 0 auto 10px !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .site-header-service-btn {
        font-size: clamp(8.8px, 2.25vw, 10px) !important;
        padding: 6px 2px !important;
        min-height: 60px !important;
        line-height: 1.12 !important;
    }

    .site-header-service-btn:nth-child(4),
    .site-header-service-btn:nth-child(5) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .site-header-line-soft,
    .site-header-line-muted {
        display: none;
    }
}

/* MOBIL IMALATCI NAV + KOMPAKT OZET (MERMER/PARKE/CELIK) */
@media (max-width: 900px) {
    #imalatci-dashboard-mermer .imalatci-nav,
    #imalatci-dashboard-parke .imalatci-nav,
    #imalatci-dashboard-celik .imalatci-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 6px !important;
        margin-bottom: 10px !important;
        border: 1px solid #d7e0ea;
        border-radius: 12px;
        background: #f8fafc;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #imalatci-dashboard-mermer .imalatci-nav-btn,
    #imalatci-dashboard-parke .imalatci-nav-btn,
    #imalatci-dashboard-celik .imalatci-nav-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 138px !important;
        max-width: 188px !important;
        margin: 0 !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    #imalatci-dashboard-mermer .imalatci-nav-btn .nav-text,
    #imalatci-dashboard-parke .imalatci-nav-btn .nav-text,
    #imalatci-dashboard-celik .imalatci-nav-btn .nav-text {
        font-size: 11px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    #imalatci-dashboard-mermer .musteri-bilgi,
    #imalatci-dashboard-parke .musteri-bilgi,
    #imalatci-dashboard-celik .musteri-bilgi {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    #imalatci-dashboard-mermer .form-row,
    #imalatci-dashboard-parke .form-row,
    #imalatci-dashboard-celik .form-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #imalatci-dashboard-mermer input,
    #imalatci-dashboard-mermer select,
    #imalatci-dashboard-mermer textarea,
    #imalatci-dashboard-parke input,
    #imalatci-dashboard-parke select,
    #imalatci-dashboard-parke textarea,
    #imalatci-dashboard-celik input,
    #imalatci-dashboard-celik select,
    #imalatci-dashboard-celik textarea {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 13px;
    }

    #imalatci-dashboard-mermer .btn-primary,
    #imalatci-dashboard-parke .btn-primary,
    #imalatci-dashboard-celik .btn-primary {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-mermer .imalatci-nav-btn,
    #imalatci-dashboard-parke .imalatci-nav-btn,
    #imalatci-dashboard-celik .imalatci-nav-btn {
        min-width: 126px !important;
        max-width: 172px !important;
        padding: 7px 9px !important;
    }

    #imalatci-dashboard-mermer .form-row,
    #imalatci-dashboard-parke .form-row,
    #imalatci-dashboard-celik .form-row {
        grid-template-columns: 1fr !important;
    }
}

/* MOBILE CAM BALKON: OLCULER + SISTEM OZELLIKLERI YAN YANA */
@media (max-width: 900px) {
    #cam-balkon-panel .panel-layout > .form-section > h3 {
        display: none !important;
    }

    #cam-balkon-panel .panel-layout > .form-section {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    #cam-balkon-panel .panel-layout > .form-section > h3,
    #cam-balkon-panel #balkon-ortak-sehir-wrap,
    #cam-balkon-panel #cam-balkon-islem-wrap,
    #cam-balkon-panel #dusakabin-musteri-islem-wrap,
    #cam-balkon-panel #kupeste-musteri-islem-wrap,
    #cam-balkon-panel #balkon-musteri-sepet,
    #cam-balkon-panel #kupeste-musteri-sepet,
    #cam-balkon-panel #dusakabin-olcu-wrap,
    #cam-balkon-panel #kupeste-olcu-wrap {
        grid-column: 1 / -1 !important;
    }

    #cam-balkon-panel #cam-balkon-birlesik-wrap {
        grid-column: 1 / -1 !important;
        margin-bottom: 10px !important;
        background: #f8fafc !important;
        border: 1px solid #dbe4ee !important;
        border-radius: 12px !important;
        padding: 12px !important;
    }

    #cam-balkon-panel #cam-balkon-birlesik-wrap #cam-balkon-olcu-wrap,
    #cam-balkon-panel #cam-balkon-birlesik-wrap #cam-balkon-sistem-wrap {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    #cam-balkon-panel #cam-balkon-birlesik-wrap #cam-balkon-sistem-wrap {
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid #dbe4ee !important;
    }

    /* Cam balkon (musteri): Genislik + Yukseklik yan yana */
    #cam-balkon-panel #cam-balkon-birlesik-wrap #duz-olculer .form-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #cam-balkon-panel #cam-balkon-birlesik-wrap #duz-olculer .form-row .form-group {
        margin-bottom: 0 !important;
    }

    /* Cam Cesidi + Cam Rengi + Aluminyum Rengi yan yana */
    #cam-balkon-panel #cam-balkon-birlesik-wrap #cam-balkon-sistem-wrap {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    #cam-balkon-panel #cam-balkon-birlesik-wrap #cam-balkon-sistem-wrap .form-group {
        margin-bottom: 0 !important;
        min-width: 0;
    }

    #cam-balkon-panel #cam-balkon-birlesik-wrap #cam-balkon-sistem-wrap .form-group label {
        min-height: 32px;
        line-height: 1.2;
    }

    #cam-balkon-panel #cam-balkon-birlesik-wrap #cam-balkon-sistem-wrap .form-group select {
        width: 100%;
    }
}

/* MOBILE COMPACT OVERRIDE: gereksiz katman ve bosluk temizligi */
@media (max-width: 900px) {
    .site-marquee {
        display: flex !important;
        margin-top: -8px !important;
        margin-bottom: 8px !important;
        border-top-width: 1px;
        border-bottom-width: 1px;
    }

    .site-marquee-track {
        gap: 18px !important;
        padding: 6px 0 !important;
        animation-duration: 24s !important;
    }

    .site-marquee-track span {
        font-size: 10px !important;
        letter-spacing: 0.1px !important;
    }

    .container {
        margin: 0 6px 8px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    .tabs {
        margin-bottom: 10px !important;
        padding-bottom: 4px !important;
        gap: 6px !important;
    }

    .tab {
        min-height: 34px !important;
        padding: 7px 9px !important;
    }

    .panel,
    .panel-layout,
    .kitchen-panel-layout,
    .form-section,
    .preview-section,
    .results-section,
    .kitchen-form-section,
    .kitchen-preview-section {
        margin: 0 !important;
        padding: 8px !important;
        gap: 8px !important;
        border-radius: 10px !important;
    }

    .musteri-bilgi,
    .cizim-alani,
    .sepet-container,
    .pencere-detay-panel,
    .kitchen-price-card,
    .kitchen-settings-card {
        margin: 0 0 8px 0 !important;
        padding: 8px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    .mode-selector {
        margin: 6px 0 8px !important;
        padding: 0 !important;
        gap: 6px !important;
    }

    .mode-selector button,
    .btn-primary,
    .btn,
    .imalatci-nav-btn {
        min-height: 36px !important;
        padding: 8px 10px !important;
    }

    #teklif-sonuc,
    #balkon-teklif-sonuc {
        margin-top: 6px !important;
        min-height: 0 !important;
        padding: 8px !important;
    }

    #teklif-sonuc:empty {
        display: none !important;
        margin-top: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .form-row.pvc-renk-cam-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #musteri-panel.sineklik-active .pvc-renk-cam-row,
    #musteri-panel.sineklik-active #kanat-boyu-container,
    #musteri-panel.sineklik-active #pvc-kanat-detay-panel,
    #musteri-panel.sineklik-active #metraj-panel,
    #imalatci-dashboard-pimapen.sineklik-active #imalatci-renk-cam-row,
    #imalatci-dashboard-pimapen.sineklik-active #imalatci-pvc-kanat-detay-panel,
    #imalatci-dashboard-pimapen.sineklik-active #imalatci-metraj-panel,
    #imalatci-dashboard-pimapen.sineklik-active #imalatci-kayit-info {
        display: none !important;
    }

    .site-footer {
        margin-top: 12px !important;
        padding: 12px 8px 6px !important;
    }
}

@media (max-width: 560px) {
    .site-header-line-soft,
    .site-header-line-muted {
        display: none !important;
    }

    #sineklik-form-container,
    #imalatci-sineklik-form-container {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    #sineklik-form-container .form-row.sin-olcu-row,
    #sineklik-form-container .form-row.sin-model-alan-row,
    #sineklik-form-container .form-row.sin-tul-renk-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #imalatci-sineklik-form-container .form-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .container,
    .panel,
    .form-section,
    .preview-section {
        padding: 7px !important;
    }
}

/* MOBILE FLOW LOCK: Cam Balkon Musteri akisi
   1) 3D On Izleme
   2) Tasarim Detaylari
   3) Fiyat Teklifleri (en altta) */
@media (max-width: 900px) {
    #cam-balkon-panel .panel-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Preview kutusunu akisa ac: cocuklari panel-layout seviyesinde siralansin */
    #cam-balkon-panel .panel-layout > .preview-section {
        display: contents !important;
    }

    /* 1) 3D on izleme blok */
    #cam-balkon-panel .panel-layout > .preview-section > .cizim-alani {
        order: 1 !important;
        margin: 0 !important;
    }

    /* 2) Tasarim detaylari/form */
    #cam-balkon-panel .panel-layout > .form-section {
        order: 2 !important;
        margin: 0 !important;
    }

    /* 3) Fiyat teklifleri her zaman en altta */
    #cam-balkon-panel #cam-balkon-results-section {
        order: 3 !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    /* Imalatci cam balkon: mobilde baslik + gorunum butonu kaldir, render yukari yaslansin */
    #imalatci-cb-preview-baslik,
    #imalatci-cb-view-toggle-wrap {
        display: none !important;
    }

    #cam-balkon-panel .cambalkon-preview-panel {
        margin-top: 0 !important;
    }

    #imalatci-balkon-3d-preview {
        margin-top: 0 !important;
    }

    /* Musteri dusakabin: onizleme yazisini kaldir, render alani yukari yaslansin */
    #cam-balkon-panel.is-dusakabin-active .preview-section .cizim-alani > h3 {
        display: none !important;
    }

    #cam-balkon-panel.is-dusakabin-active #balkon-3d-preview {
        margin-top: 0 !important;
    }

    /* Imalatci dusakabin: ayni sekilde boslugu toparla */
    #imalatci-dashboard-cambalkon.is-dusakabin-active .cambalkon-preview-panel {
        margin-top: 0 !important;
    }
}

/* MOBILE FINAL LOCK: Mutfak/Gardrop akisi ve PVC bolum tipleri */
@media (max-width: 900px) {
    /* Musteri mutfak ve gardrop: 3D on izleme en ustte, tasarim ayarlari hemen altinda */
    #mutfak-dolabi-panel .kitchen-panel-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .preview-section,
    #mutfak-dolabi-panel .kitchen-panel-layout > .kitchen-preview-section {
        order: 1 !important;
        margin: 0 !important;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .form-section,
    #mutfak-dolabi-panel .kitchen-panel-layout > .kitchen-form-section {
        order: 2 !important;
        margin: 0 !important;
    }

    #mutfak-dolabi-panel .kitchen-customer-bottom-offers {
        order: 3 !important;
        margin-top: 6px !important;
    }

    /* PVC musteri: Bolum Tip 1/2/3... kartlari mobilde yan yana ve dumanli gorunum */
    #musteri-panel #bolum-detaylari {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #musteri-panel #bolum-detaylari .bolum-item {
        background: linear-gradient(180deg, rgba(100, 116, 139, 0.16) 0%, rgba(148, 163, 184, 0.1) 100%) !important;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        border: 1px solid rgba(148, 163, 184, 0.35) !important;
        border-radius: 8px !important;
        padding: 6px !important;
    }
}

@media (max-width: 560px) {
    /* Cok kucuk ekranda da bolum tipleri yanyana kalsin */
    #musteri-panel #bolum-detaylari {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* MOBILE FINAL FIX: PVC city header + kitchen/gardrop order */
@media (max-width: 900px) {
    #musteri-panel .musteri-bilgi > h3 {
        display: none !important;
    }

    #musteri-panel .musteri-bilgi {
        padding-top: 8px !important;
    }

    #musteri-panel #pvc-kanat-detay-panel {
        margin-top: 6px !important;
        padding: 6px !important;
    }

    #musteri-panel #pvc-kanat-detay-panel h4 {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    #musteri-panel #bolum-detaylari {
        gap: 4px !important;
    }

    #musteri-panel #bolum-detaylari .bolum-item {
        padding: 4px !important;
        border-radius: 7px !important;
    }

    #musteri-panel #bolum-detaylari .bolum-item label {
        font-size: 9px !important;
        margin-bottom: 1px !important;
    }

    #musteri-panel #bolum-detaylari .bolum-item select,
    #musteri-panel #bolum-detaylari .bolum-item input {
        min-height: 32px !important;
        padding: 5px 7px !important;
        font-size: 11px !important;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .preview-section,
    #mutfak-dolabi-panel .kitchen-panel-layout > .kitchen-preview-section {
        order: 1 !important;
        margin: 0 !important;
        padding-bottom: 6px !important;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .form-section,
    #mutfak-dolabi-panel .kitchen-panel-layout > .kitchen-form-section {
        order: 2 !important;
        margin: 0 !important;
        padding-top: 0 !important;
    }

    #mutfak-dolabi-panel .kitchen-customer-bottom-offers {
        order: 3 !important;
        margin-top: 4px !important;
    }

    #mutfak-dolabi-panel .kitchen-preview-section .cizim-alani,
    #mutfak-dolabi-panel .kitchen-gardrop-render-card {
        margin-bottom: 0 !important;
    }

    #mutfak-dolabi-panel .kitchen-form-section h3 {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
}

/* PVC imalatci ust sekmeler tam gorunur olsun */
@media (max-width: 900px) {
    #imalatci-dashboard-pimapen .imalatci-nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        overflow: visible !important;
        gap: 6px !important;
        padding: 4px !important;
    }

    #imalatci-dashboard-pimapen .imalatci-nav-btn {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 8px 6px !important;
        border-radius: 10px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.15 !important;
        font-size: 11px !important;
    }

    #imalatci-dashboard-pimapen .imalatci-nav-btn .nav-text {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-pimapen .imalatci-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    #imalatci-dashboard-pimapen .imalatci-nav-btn {
        padding: 7px 5px !important;
        font-size: 10px !important;
    }

    #imalatci-dashboard-pimapen .imalatci-nav-btn .nav-text {
        font-size: 9.5px !important;
    }
}

/* PVC MOBILE SMART LOCK: buyuk onizleme + kisa metraj + yan yana bolum tipleri */
@media (max-width: 900px) {
    /* Kanat detaylarinda bolum tipleri yan yana acilsin */
    #musteri-panel #bolum-detaylari,
    #imalatci-dashboard-pimapen #section-cizim #imalatci-bolum-detaylari {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #musteri-panel #bolum-detaylari .bolum-item,
    #imalatci-dashboard-pimapen #section-cizim #imalatci-bolum-detaylari .bolum-item {
        min-width: 0 !important;
        width: 100% !important;
        padding: 6px !important;
    }


    /* Onizleme daha buyuk, metraj daha dar olsun */
    #musteri-panel .cizim-alani > div,
    #imalatci-dashboard-pimapen #section-cizim .preview-section .cizim-alani > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1.85fr) minmax(95px, 0.9fr) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    #pencere-canvas,
    #imalatci-pencere-canvas {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        min-height: 200px !important;
    }

    /* Metraj panel */
    #metraj-panel,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel {
        max-height: 220px !important;
        overflow: auto !important;
        min-width: 0 !important;
        max-width: 125px !important;
        padding: 8px !important;
        margin-top: 30px !important;
    }

    #metraj-panel h4,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel h4 {
        font-size: 10px !important;
        margin-bottom: 5px !important;
    }

    #metraj-panel .metraj-icerik,
    #metraj-panel .metraj-icerik p,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel .metraj-icerik,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel .metraj-icerik p,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel .aksesuar-icerik,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel .aksesuar-icerik p {
        font-size: 9.5px !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 560px) {
    #musteri-panel .cizim-alani > div,
    #imalatci-dashboard-pimapen #section-cizim .preview-section .cizim-alani > div {
        grid-template-columns: minmax(0, 1.75fr) minmax(88px, 0.85fr) !important;
        gap: 6px !important;
    }

    #pencere-canvas,
    #imalatci-pencere-canvas {
        min-height: 170px !important;
    }

    #metraj-panel,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel {
        max-height: 190px !important;
        max-width: 110px !important;
        padding: 6px !important;
        margin-top: 28px !important;
    }
}

/* MUSTERI PVC: onizleme yeri sabit kalsin */
@media (max-width: 900px) {
    #musteri-panel .panel-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    #musteri-panel .panel-layout > .preview-section {
        order: 1 !important;
        margin: 0 !important;
    }

    #musteri-panel .panel-layout > .form-section {
        order: 2 !important;
        margin: 0 !important;
    }
}

/* MOBILE FIX: mutfak/gardrop 3 katman sade + alt secenekler kucuk */
@media (max-width: 900px) {
    #mutfak-dolabi-panel .kitchen-preview-section,
    #mutfak-dolabi-panel .kitchen-cizim-alani,
    #mutfak-dolabi-panel .kitchen-gardrop-render-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    #kitchen-gardrop-3d-preview {
        height: clamp(240px, 56vw, 340px) !important;
    }

    #mutfak-dolabi-panel .kitchen-gardrop-cambar {
        margin-top: 6px !important;
        gap: 6px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: auto;
    }

    #mutfak-dolabi-panel .kitchen-gardrop-cam-btn {
        flex: 0 0 auto !important;
        min-width: 92px !important;
        min-height: 30px !important;
        padding: 5px 7px !important;
        font-size: 10px !important;
        border-radius: 7px !important;
        box-shadow: none !important;
    }

    #mutfak-dolabi-panel .kitchen-mobile-zoom-bar,
    #imalatci-dashboard-mutfak .kitchen-mobile-zoom-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 8px 0 6px 0 !important;
    }

    #mutfak-dolabi-panel .kitchen-mobile-zoom-btn,
    #imalatci-dashboard-mutfak .kitchen-mobile-zoom-btn {
        width: 100% !important;
        min-height: 34px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
    }

    /* Mutfakta onizleme ustte, tasarim ayarlari hemen altinda kalsin */
    #mutfak-dolabi-panel .kitchen-panel-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .preview-section,
    #mutfak-dolabi-panel .kitchen-panel-layout > .kitchen-preview-section {
        order: 1 !important;
        margin: 0 !important;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .form-section,
    #mutfak-dolabi-panel .kitchen-panel-layout > .kitchen-form-section {
        order: 2 !important;
        margin: 0 !important;
    }
}

@media (max-width: 560px) {
    #kitchen-gardrop-3d-preview {
        height: clamp(220px, 54vw, 300px) !important;
    }

    #mutfak-dolabi-panel .kitchen-gardrop-cam-btn {
        flex: 0 0 auto !important;
        min-width: 82px !important;
        font-size: 9.5px !important;
        padding: 5px 6px !important;
    }

    #mutfak-dolabi-panel .kitchen-mobile-zoom-btn,
    #imalatci-dashboard-mutfak .kitchen-mobile-zoom-btn {
        min-height: 32px !important;
        font-size: 10px !important;
        padding: 6px 7px !important;
    }
}

/* MOBILE MUTFAK FIX: preview flex-basis kaynakli boslugu kapat */
@media (max-width: 900px) {
    #mutfak-dolabi-panel .kitchen-panel-layout > .preview-section,
    #mutfak-dolabi-panel .kitchen-panel-layout > .kitchen-preview-section {
        flex: 0 1 auto !important;
        min-height: 0 !important;
    }
}

/* MOBILE PVC SADELESTIRME: sehir + onizleme katmanlarini kaldir */
@media (max-width: 900px) {
    #musteri-panel .form-section > .musteri-bilgi:first-child {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
    }

    #musteri-panel .preview-section,
    #musteri-panel .pvc-preview-card,
    #musteri-panel .cizim-alani {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    #musteri-panel .preview-section {
        padding: 0 !important;
    }

    #musteri-panel .cizim-alani {
        padding: 0 !important;
    }

    #musteri-panel .panel-layout {
        gap: 4px !important;
    }

    #musteri-panel .preview-section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #musteri-panel #teklif-sonuc {
        margin-top: 12px !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    .teklif-iletisim-aksiyonlari {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
        gap: 6px;
    }

    .teklif-iletisim-aksiyonlari .btn {
        width: 100%;
    }

    #musteri-panel #teklif-sonuc .teklif-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #musteri-panel #teklif-sonuc .teklif-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    #musteri-panel #teklif-sonuc .teklif-card h3 {
        font-size: 14px !important;
        margin-bottom: 5px !important;
        line-height: 1.2 !important;
    }

    #musteri-panel #teklif-sonuc .konum-link {
        padding: 4px 7px !important;
        font-size: 10px !important;
        margin-bottom: 6px !important;
        border-width: 1px !important;
    }

    #musteri-panel #teklif-sonuc .teklif-card p,
    #musteri-panel #teklif-sonuc .teklif-telefon-satiri {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    #musteri-panel #teklif-sonuc .fiyat {
        font-size: 16px !important;
        margin-top: 6px !important;
    }

    #musteri-panel #teklif-sonuc .teklif-iletisim-kutusu {
        padding: 6px !important;
        margin-top: 6px !important;
    }

    #musteri-panel #teklif-sonuc .teklif-iletisim-aksiyonlari {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important;
        gap: 6px !important;
    }

    #musteri-panel #teklif-sonuc .teklif-iletisim-aksiyonlari .btn {
        width: 100% !important;
        min-height: 34px;
        padding: 6px 7px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 360px) {
    #musteri-panel #teklif-sonuc .teklif-grid {
        grid-template-columns: 1fr !important;
    }
}

/* FAZ 1: responsive temel hiyerarsi ve spacing normalizasyonu */
@media (max-width: 1200px) {
    .container {
        margin: 0 clamp(12px, 2.2vw, 24px) 18px;
        padding: clamp(16px, 2.4vw, 28px) clamp(14px, 2.6vw, 30px) clamp(18px, 2.4vw, 24px);
    }

    .panel-layout {
        gap: clamp(16px, 2.8vw, 32px);
    }
}

@media (max-width: 900px) {
    .container {
        margin: 0 clamp(8px, 2vw, 14px) 14px;
        padding: clamp(12px, 2.8vw, 18px);
    }

    .panel-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .site-header {
        margin-bottom: clamp(12px, 2.6vw, 18px);
    }

    .site-marquee {
        margin-bottom: 12px;
    }
}

@media (max-width: 768px) {
    body {
        padding: 0;
    }

    .container {
        border-radius: 10px;
        padding: clamp(10px, 3vw, 14px);
    }

    .tabs {
        margin-bottom: 14px;
    }

    .tab {
        padding: 10px 10px;
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .container {
        margin: 0 8px 12px;
        padding: 10px;
    }

    .site-header {
        padding: 12px 10px;
    }


/* Boya badana mobil siralama: form ustte, teklif en altta */
@media (max-width: 900px) {
    #boya-badana-panel #boya-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #boya-badana-panel #badana-form-section {
        order: 1 !important;
    }

    #boya-badana-panel #badana-preview-section {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #boya-badana-panel #badana-teklif-card {
        order: 999 !important;
        margin-top: 12px !important;
    }
}
    .site-header-title {
        font-size: clamp(22px, 7.2vw, 28px);
    }

    .site-marquee-track {
        gap: clamp(12px, 4vw, 20px);
    }
}

/* FAZ 2: layout reflow ve yatay tasma onleme */
@media (max-width: 1000px) {
    .panel-layout > *,
    .cambalkon-musteri-layout > *,
    .kitchen-panel-layout > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .form-section,
    #cam-balkon-panel .form-section,
    #cambalkon-section-musteri .form-section,
    .kitchen-form-section {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .preview-section,
    #cam-balkon-panel .preview-section,
    #cambalkon-section-musteri .cambalkon-preview-panel,
    .kitchen-preview-section,
    .results-section {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #cam-balkon-panel .preview-section {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 900px) {
    #cam-balkon-panel .preview-section {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #cambalkon-section-musteri .cambalkon-musteri-layout,
    #mutfak-dolabi-panel .kitchen-panel-layout,
    #musteri-panel .panel-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    #cambalkon-section-musteri .cambalkon-preview-panel,
    #musteri-panel .preview-section,
    #cam-balkon-panel .preview-section,
    .results-section {
        position: static !important;
        top: auto !important;
        overflow: visible !important;
    }

    #cam-balkon-panel #balkon-3d-preview,
    #imalatci-balkon-3d-preview,
    #pvc-musteri-3d-preview {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Imalatci cam balkon/kupeste/dusakabin: 2. dis katman (ic cizim karti) kaldir */
    #imalatci-dashboard-cambalkon #cambalkon-section-musteri .cambalkon-preview-panel > .cizim-alani {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
}

/* FAZ 3: mobil UX ölçekleme — tipografi, dokunma hedefleri, canvas, marquee */

/* 3.1 Tipografi: clamp tabanlı başlık ve yardımcı metin ölçekleme */
.site-header-title {
    font-size: clamp(22px, 5.5vw, 36px);
}

.site-header-line {
    font-size: clamp(12px, 1.8vw, 14px);
}

.site-header-line-soft,
.site-header-line-muted {
    font-size: clamp(11px, 1.6vw, 13px);
}

/* 3.2 Sekme butonları: clamp padding + garantili minimum dokunma hedefi (44px) */
.tab {
    padding: clamp(10px, 1.8vw, 14px) clamp(8px, 1.2vw, 10px);
    font-size: clamp(12px, 1.4vw, 14px);
    min-height: 44px;
}

/* 3.3 İmalatçı nav butonları: dokunma hedefi */
.imalatci-nav-btn,
.cambalkon-firma-nav-btn,
.mutfak-usta-nav-btn,
.mutfak-musteri-nav-btn {
    min-height: 44px;
}

/* 3.4 Marquee: gap mobilde sıkışma yapmayacak şekilde ölçekli */
.site-marquee-track {
    gap: clamp(16px, 3.5vw, 36px);
}

/* 3.5 Canvas yükseklik: küçük ekranlarda 50vh yerine görüntüleme alanını boğmayacak değerler */
@media (max-width: 900px) {
    #cam-balkon-panel #balkon-3d-preview {
        height: clamp(220px, 50vw, 340px) !important;
    }

    #cambalkon-section-musteri #imalatci-balkon-3d-preview {
        height: clamp(220px, 50vw, 340px) !important;
    }

    #pvc-musteri-3d-preview {
        height: clamp(220px, 50vw, 340px) !important;
    }

    #kitchen-3d-preview,
    #pro-kitchen-3d-preview,
    #kitchen-gardrop-3d-preview,
    #pro-kitchen-gardrop-3d-preview {
        height: clamp(220px, 50vw, 340px) !important;
    }
}

@media (max-width: 600px) {
    #cam-balkon-panel #balkon-3d-preview,
    #cambalkon-section-musteri #imalatci-balkon-3d-preview,
    #pvc-musteri-3d-preview,
    #kitchen-3d-preview,
    #pro-kitchen-3d-preview,
    #kitchen-gardrop-3d-preview,
    #pro-kitchen-gardrop-3d-preview {
        height: clamp(200px, 55vw, 280px) !important;
    }
}

/* FAZ 4: profesyonel son rötuş — sabit boyut denetimi, z-index sertleştirme, global taşma güvencesi */

/* 4.1 Global yatay taşma kökten engelle */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* 4.2 .kitchen-3d-preview sabit 600px → mobilde responsive */
@media (max-width: 900px) {
    .kitchen-3d-preview {
        height: clamp(220px, 50vw, 380px) !important;
    }
}

@media (max-width: 600px) {
    .kitchen-3d-preview {
        height: clamp(200px, 56vw, 280px) !important;
    }
}

/* 4.3 AI widget: küçük ekranlarda küçült, form içeriğiyle çakışmasın */
@media (max-width: 600px) {
    .ai-widget-btn {
        width: 72px !important;
        height: 72px !important;
        bottom: 12px !important;
        right: 10px !important;
        border-radius: 20px !important;
        font-size: 18px !important;
    }

    .ai-widget-icon {
        font-size: 20px !important;
    }

    .ai-widget-text {
        font-size: 9px !important;
    }

    .ai-chat-box {
        bottom: 90px !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
    }
}

/* 4.4 kitchen-mini-palette: preview kapsayıcısından taşmasın */
@media (max-width: 900px) {
    .kitchen-mini-palette {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 6px 0 !important;
        margin-bottom: 6px !important;
    }
}

/* 4.5 z-index sertleştirme: sticky nav > overlay içerikleri > fixed widget sıralaması */
@media (max-width: 900px) {
    /* Mobil sticky sekme/nav çakışma önlemi */
    #cam-balkon-panel .imalatci-nav,
    #mutfak-dolabi-panel .imalatci-nav {
        z-index: 8 !important;
    }

    /* kitchen overlay z-index'i sticky nav'ın altında kalmalı */
    .kitchen-module-plus-layer {
        z-index: 5 !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-btn,
    #mutfak-dolabi-panel .kitchen-module-plus-btn.kitchen-module-plus-btn-door,
    #mutfak-dolabi-panel .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn,
    #imalatci-dashboard-mutfak .kitchen-module-plus-btn,
    #imalatci-dashboard-mutfak .kitchen-module-plus-btn.kitchen-module-plus-btn-door,
    #imalatci-dashboard-mutfak .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        padding: 0 !important;
        font-size: 9px !important;
        line-height: 1 !important;
        border: none !important;
        background: #ffffff !important;
        box-shadow: none !important;
        border-radius: 999px !important;
        overflow: hidden !important;
    }

    #mutfak-dolabi-panel .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn,
    #imalatci-dashboard-mutfak .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        font-size: 12px !important;
        background: #ffffff !important;
        border-radius: 999px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-gardrop .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        font-size: 10px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-gardrop .kitchen-wardrobe-section-control-layer .kitchen-module-plus-slot {
        transform: translate(-50%, -50%) scale(0.86) !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-gardrop .kitchen-wardrobe-section-control-layer .kitchen-module-plus-slot,
    #mutfak-dolabi-panel #mutfak-musteri-section-gardrop .kitchen-wardrobe-plus-layer .kitchen-module-plus-slot {
        margin-top: -28px !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-menu,
    #imalatci-dashboard-mutfak .kitchen-module-plus-menu {
        min-width: 70px !important;
        max-width: 86px !important;
        padding: 3px !important;
        gap: 1px !important;
        border-radius: 7px !important;
        top: 14px !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.12) !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-item,
    #imalatci-dashboard-mutfak .kitchen-module-plus-item {
        padding: 3px 5px !important;
        gap: 3px !important;
        border-radius: 5px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        color: #111827 !important;
        font-weight: 600 !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-item small,
    #imalatci-dashboard-mutfak .kitchen-module-plus-item small {
        font-size: 7px !important;
        line-height: 1.1 !important;
        color: #334155 !important;
        font-weight: 600 !important;
    }

    .kitchen-mini-palette {
        z-index: 4 !important;
    }
}

@media (max-width: 560px) {
    #mutfak-dolabi-panel .kitchen-module-plus-btn,
    #mutfak-dolabi-panel .kitchen-module-plus-btn.kitchen-module-plus-btn-door,
    #mutfak-dolabi-panel .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn,
    #imalatci-dashboard-mutfak .kitchen-module-plus-btn,
    #imalatci-dashboard-mutfak .kitchen-module-plus-btn.kitchen-module-plus-btn-door,
    #imalatci-dashboard-mutfak .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        padding: 0 !important;
        font-size: 8px !important;
        line-height: 1 !important;
        border: none !important;
        background: #ffffff !important;
        box-shadow: none !important;
        border-radius: 999px !important;
        overflow: hidden !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-slot,
    #imalatci-dashboard-mutfak .kitchen-module-plus-slot {
        transform: translate(-50%, -50%) scale(0.95) !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-slot.kitchen-main-plus-slot,
    #imalatci-dashboard-mutfak .kitchen-module-plus-slot.kitchen-main-plus-slot {
        transform: translate(calc(-50% - 7px), -50%) scale(0.95) !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-slot.kitchen-door-model-slot,
    #imalatci-dashboard-mutfak .kitchen-module-plus-slot.kitchen-door-model-slot {
        transform: translate(calc(-50% + 7px), -50%) scale(0.95) !important;
    }

    #mutfak-dolabi-panel .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn,
    #imalatci-dashboard-mutfak .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        font-size: 11px !important;
        background: #ffffff !important;
        border-radius: 999px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-gardrop .kitchen-wardrobe-section-control-layer .kitchen-module-plus-btn {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        font-size: 9px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-gardrop .kitchen-wardrobe-section-control-layer .kitchen-module-plus-slot {
        transform: translate(-50%, -50%) scale(0.8) !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-gardrop .kitchen-wardrobe-section-control-layer .kitchen-module-plus-slot,
    #mutfak-dolabi-panel #mutfak-musteri-section-gardrop .kitchen-wardrobe-plus-layer .kitchen-module-plus-slot {
        margin-top: -36px !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-menu,
    #imalatci-dashboard-mutfak .kitchen-module-plus-menu {
        min-width: 62px !important;
        max-width: 74px !important;
        padding: 2px !important;
        gap: 1px !important;
        border-radius: 6px !important;
        top: 10px !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-item,
    #imalatci-dashboard-mutfak .kitchen-module-plus-item {
        padding: 3px 4px !important;
        gap: 2px !important;
        border-radius: 4px !important;
        font-size: 7px !important;
        line-height: 1.1 !important;
        color: #111827 !important;
        font-weight: 600 !important;
    }

    #mutfak-dolabi-panel .kitchen-module-plus-item small,
    #imalatci-dashboard-mutfak .kitchen-module-plus-item small {
        font-size: 6px !important;
        line-height: 1.05 !important;
        color: #334155 !important;
        font-weight: 600 !important;
    }

    .kitchen-mini-palette {
        z-index: 4 !important;
    }

}

/* 4.6 .auth-box: 360px altında kenar dolgusu ekle */
@media (max-width: 400px) {
    .auth-box {
        margin: 8px !important;
        padding: 14px 10px !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* 4.7 Genel kapsayıcı güvencesi: tüm panel/section/kart boyutları sınır aşmasın */
@media (max-width: 900px) {
    .panel,
    .form-section,
    .preview-section,
    .results-section,
    .imalatci-section,
    .kitchen-price-card,
    .pencere-detay-panel,
    .musteri-bilgi,
    .sepet-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #imalatci-dashboard-cambalkon .cambalkon-is-kolu-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        gap: 6px;
        padding: 4px;
        margin-bottom: 8px;
    }

    #imalatci-dashboard-cambalkon .cambalkon-is-kolu-mobile .imalatci-nav-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 108px !important;
        max-width: 146px !important;
        min-height: 32px !important;
        padding: 5px 7px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        font-size: 10px !important;
    }

    #imalatci-dashboard-cambalkon .cambalkon-is-kolu-mobile .imalatci-nav-btn .nav-text {
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    #cambalkon-section-musteri #imalatci-cb-is-form {
        display: none !important;
    }

    /* PVC imalatci: ust alan kompakt */
    #imalatci-dashboard-pimapen > .form-section > div:first-child {
        margin-bottom: 8px !important;
    }

    #imalatci-dashboard-pimapen > .form-section > div:first-child h2 {
        font-size: 1.05rem !important;
        line-height: 1.2;
    }

    #imalatci-dashboard-pimapen > .form-section > div:first-child button {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 34px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    #imalatci-dashboard-pimapen > .form-section > .imalatci-nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        overflow: visible !important;
        gap: 6px !important;
        padding: 6px !important;
        margin-bottom: 10px !important;
        border: 1px solid #d7e0ea;
        border-radius: 12px;
        background: #f8fafc;
    }

    #imalatci-dashboard-pimapen > .form-section > .imalatci-nav .imalatci-nav-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 38px !important;
        padding: 7px 10px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        gap: 3px !important;
    }

    #imalatci-dashboard-pimapen > .form-section > .imalatci-nav .imalatci-nav-btn .nav-text {
        font-size: 10.5px;
        line-height: 1.2;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }

    #imalatci-pvc-mode-mobile {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    #imalatci-pvc-mode-mobile .btn-mode {
        min-height: 34px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-pimapen > .form-section > .imalatci-nav .imalatci-nav-btn {
        min-width: 0 !important;
        max-width: none !important;
        min-height: 35px !important;
        padding: 6px 8px !important;
    }

    #imalatci-dashboard-pimapen > .form-section > div:first-child h2 {
        font-size: 0.98rem !important;
    }
}

@media (max-width: 768px) {
    /* Cam Balkon Sistemleri > Cam Balkon (imalatci) */
    #cambalkon-section-musteri #imalatci-cb-duz-olculer .form-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #cambalkon-section-musteri #imalatci-cb-duz-olculer .form-group {
        margin-bottom: 0 !important;
    }

    #cambalkon-section-musteri #imalatci-cb-cam-wrap[style*="display: block"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #cambalkon-section-musteri #imalatci-cb-cam-wrap > .form-group:has(#imalatci-cb-sekil),
    #cambalkon-section-musteri #imalatci-cb-cam-wrap > #imalatci-cb-duz-olculer,
    #cambalkon-section-musteri #imalatci-cb-cam-wrap > #imalatci-cb-L-olculer,
    #cambalkon-section-musteri #imalatci-cb-cam-wrap > #imalatci-cb-U-olculer,
    #cambalkon-section-musteri #imalatci-cb-cam-wrap > .form-group:has(#imalatci-cb-cam-cesidi),
    #cambalkon-section-musteri #imalatci-cb-cam-wrap > div:has(button.btn-primary),
    #cambalkon-section-musteri #imalatci-cb-cam-wrap > #cambalkon-sepet-container {
        grid-column: 1 / -1 !important;
    }

    #cambalkon-section-musteri #imalatci-cb-cam-wrap > .form-row {
        display: contents !important;
    }

    #cambalkon-section-musteri #imalatci-cb-cam-wrap .form-group:has(#imalatci-cb-kanat-sayisi) {
        grid-column: 1 / -1 !important;
    }

    #cambalkon-section-musteri #imalatci-cb-cam-wrap .form-group:has(#imalatci-cb-cam-rengi) {
        grid-column: 1 / 2 !important;
    }

    #cambalkon-section-musteri #imalatci-cb-cam-wrap > .form-group:has(#imalatci-cb-alu-rengi) {
        grid-column: 2 / 3 !important;
        margin-bottom: 0 !important;
    }

    /* Cam Balkon Sistemleri > Aluminyum Kupeste (imalatci) */
    #cambalkon-section-musteri #imalatci-kupeste-wrap[style*="display: block"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #cambalkon-section-musteri #imalatci-kupeste-wrap > h4,
    #cambalkon-section-musteri #imalatci-kupeste-wrap > div:has(button.btn-primary),
    #cambalkon-section-musteri #imalatci-kupeste-wrap > #kupeste-sepet-container {
        grid-column: 1 / -1 !important;
    }

    #cambalkon-section-musteri #imalatci-kupeste-wrap > .form-row {
        display: contents !important;
    }

    /* Genislik + Yukseklik */
    #cambalkon-section-musteri #imalatci-kupeste-wrap .form-group:has(#imalatci-kupeste-genislik) {
        grid-column: 1 / 2 !important;
    }

    #cambalkon-section-musteri #imalatci-kupeste-wrap .form-group:has(#imalatci-kupeste-yukseklik) {
        grid-column: 2 / 3 !important;
    }

    /* Yatay Cubuk + Ara Dikey */
    #cambalkon-section-musteri #imalatci-kupeste-wrap .form-group:has(#imalatci-kupeste-dikme-aralik) {
        grid-column: 1 / -1 !important;
    }

    #cambalkon-section-musteri #imalatci-kupeste-wrap .form-group:has(#imalatci-kupeste-cubuk-sayisi) {
        grid-column: 1 / 2 !important;
    }

    #cambalkon-section-musteri #imalatci-kupeste-wrap > .form-group:has(#imalatci-kupeste-ara-dikey-adet) {
        grid-column: 2 / 3 !important;
    }

    /* Profil Tipi + Aluminyum Rengi */
    #cambalkon-section-musteri #imalatci-kupeste-wrap .form-group:has(#imalatci-kupeste-profil-tipi) {
        grid-column: 1 / 2 !important;
    }

    #cambalkon-section-musteri #imalatci-kupeste-wrap .form-group:has(#imalatci-kupeste-renk) {
        grid-column: 2 / 3 !important;
    }

    /* Cam Balkon Sistemleri > Dusakabin (imalatci): 2'ser alan alta alta */
    #cambalkon-section-musteri #imalatci-dk-duz-olculer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #cambalkon-section-musteri #imalatci-dk-duz-olculer .form-row {
        display: contents !important;
    }

    /* 1. satir: On Genislik + Yukseklik */
    #cambalkon-section-musteri #imalatci-dk-duz-olculer .form-group:has(#imalatci-dk-duz-genislik) {
        grid-column: 1 / 2 !important;
    }

    #cambalkon-section-musteri #imalatci-dk-duz-olculer .form-group:has(#imalatci-dk-duz-yukseklik) {
        grid-column: 2 / 3 !important;
    }

    /* Derinlik bir alt satirda tam genislikte */
    #cambalkon-section-musteri #imalatci-dk-duz-olculer .form-group:has(#imalatci-dk-duz-derinlik) {
        grid-column: 1 / -1 !important;
    }

    /* 2. satir: Cam Rengi + Cam Cesidi, 3. satir: Aluminyum Rengi + Surgu Kapi Yonu */
    #cambalkon-section-musteri #imalatci-dusakabin-wrap > .form-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #cambalkon-section-musteri #imalatci-dusakabin-wrap > .form-row .form-group {
        margin-bottom: 0 !important;
    }

    /* Cam Balkon Sistemleri > Aluminyum Kupeste (musteri) */
    #cam-balkon-panel #kupeste-olcu-wrap[style*="display: block"] {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    #cam-balkon-panel #kupeste-olcu-wrap > h4,
    #cam-balkon-panel #kupeste-olcu-wrap > #kupeste-musteri-olcu-bilgi {
        grid-column: 1 / -1 !important;
    }

    #cam-balkon-panel #kupeste-olcu-wrap > .form-row {
        display: contents !important;
    }

    #cam-balkon-panel #kupeste-olcu-wrap .form-group {
        margin-bottom: 0 !important;
        min-width: 0;
    }

    #cam-balkon-panel #kupeste-olcu-wrap .form-group label {
        display: block;
        min-height: 32px;
        line-height: 1.25;
        margin-bottom: 4px;
    }

    #cam-balkon-panel #kupeste-olcu-wrap .form-group input,
    #cam-balkon-panel #kupeste-olcu-wrap .form-group select {
        width: 100%;
        min-height: 40px;
        font-size: 13px;
    }

    /* 1. satir: Genislik + Yukseklik */
    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-genislik) {
        grid-column: 1 / 4 !important;
    }

    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-yukseklik) {
        grid-column: 4 / 7 !important;
    }

    /* 2. satir: Dikme Araligi + Yatay Cubuk Sayisi + Ara Cubuk Adedi */
    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-dikme-aralik) {
        grid-column: 1 / 3 !important;
    }

    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-cubuk-sayisi) {
        grid-column: 3 / 5 !important;
    }

    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-ara-dikey-adet) {
        grid-column: 5 / 7 !important;
    }

    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-dikme-aralik) label,
    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-cubuk-sayisi) label,
    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-ara-dikey-adet) label {
        min-height: 28px;
        font-size: 11px;
        line-height: 1.2;
        margin-bottom: 3px;
    }

    /* 3. satir: Profil Tipi + Aluminyum Rengi */
    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-profil-tipi) {
        grid-column: 1 / 4 !important;
    }

    #cam-balkon-panel #kupeste-olcu-wrap .form-group:has(#kupeste-renk) {
        grid-column: 4 / 7 !important;
    }

    /* Cam Balkon Sistemleri > Dusakabin (musteri): ikili satirlar */
    #cam-balkon-panel #dusakabin-olcu-wrap[style*="display: block"] #dusakabin-duz-olculer .form-row,
    #cam-balkon-panel #dusakabin-olcu-wrap[style*="display: block"] > .form-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #cam-balkon-panel #dusakabin-olcu-wrap[style*="display: block"] #dusakabin-duz-olculer .form-group,
    #cam-balkon-panel #dusakabin-olcu-wrap[style*="display: block"] > .form-row .form-group {
        margin-bottom: 0 !important;
    }
}

/* NIMO PREMIUM QUICK FORM OVERRIDE */
body > .ai-widget-btn {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 30%, #fde68a 0%, #fbbf24 45%, #d97706 100%) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.34) !important;
    box-shadow: 0 14px 30px rgba(217, 119, 6, 0.24) !important;
    gap: 3px !important;
    padding: 10px 8px !important;
    touch-action: none !important;
    user-select: none !important;
    cursor: grab !important;
    overflow: hidden !important;
    isolation: isolate !important;
    text-align: center !important;
}

body > .ai-widget-btn.ai-widget-dragging {
    cursor: grabbing !important;
    transition: none !important;
}

body > .ai-widget-btn::before {
    content: '🔨';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
    opacity: 0.10;
    transform: rotate(-16deg) translateY(2px);
    filter: saturate(0) sepia(0.2) brightness(1.45);
    pointer-events: none;
    z-index: 0;
}

body > .ai-widget-btn::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.14) 0%, rgba(255,248,220,0.06) 42%, rgba(124,45,18,0.08) 100%) !important;
    z-index: 0;
}

body > .ai-widget-btn .ai-widget-top-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    color: #111827;
    font-size: 9.8px;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-shadow: none;
}

body > .ai-widget-btn .ai-widget-icon {
    display: none !important;
}

body > .ai-widget-btn .ai-widget-text {
    position: relative;
    z-index: 1;
    font-size: 13.6px !important;
    font-weight: 900 !important;
    color: #111827;
    line-height: 1.08;
    letter-spacing: 0.15px;
    max-width: 76px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    text-shadow: none;
}

@keyframes nimoGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes nimoSelectedBounce {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translateY(-90%); }
}

#ai-chat-box {
    width: 320px !important;
    height: min(70vh, 460px) !important;
    max-height: 460px !important;
    border-radius: 18px !important;
    border: 1px solid #fdba74 !important;
    background: linear-gradient(135deg, #fff7ed, #fffbeb, #fff7ed, #fef3c7) !important;
    background-size: 250% 250% !important;
    animation: nimoGradientShift 8s ease infinite;
    box-shadow: 0 18px 38px rgba(194, 65, 12, 0.18) !important;
    overflow: hidden !important;
}

#ai-chat-box .ai-header {
    background: linear-gradient(135deg, #b45309, #d97706, #fbbf24) !important;
    background-size: 220% 220% !important;
    animation: nimoGradientShift 7s ease infinite;
    border-bottom: 1px solid rgba(251, 191, 36, 0.45);
    padding: 11px 13px !important;
    font-size: 13px !important;
}

#ai-chat-box .ai-quick-form {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 9px;
    background: linear-gradient(135deg, rgba(255,247,237,0.98), rgba(255,251,235,0.99), rgba(254,243,199,0.96));
    background-size: 220% 220%;
    animation: nimoGradientShift 10s ease infinite;
    border-bottom: 1px solid #fed7aa;
    scrollbar-width: thin;
    scrollbar-color: #c2410c #ffedd5;
}

#ai-chat-box .ai-form-note {
    font-size: 11px;
    line-height: 1.4;
    color: #92400e;
    background: linear-gradient(135deg, #fff7ed, #fef3c7, #fef9c3);
    background-size: 220% 220%;
    animation: nimoGradientShift 9s ease infinite;
    border: 1px solid #fbbf24;
    border-radius: 12px;
    padding: 9px 10px;
    margin-bottom: 8px;
}

#ai-chat-box .ai-form-section {
    margin-bottom: 8px;
}

#ai-chat-box .ai-form-label {
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

#ai-chat-box .ai-service-grid,
#ai-chat-box .ai-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

#ai-chat-box .ai-service-btn,
#ai-chat-box .ai-preset-btn,
#ai-chat-box .ai-extra-chip {
    border: 1px solid #fed7aa;
    background: rgba(255, 255, 255, 0.96);
    color: #7c2d12;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
    overflow: visible;
}

#ai-chat-box .ai-service-btn:hover,
#ai-chat-box .ai-preset-btn:hover,
#ai-chat-box .ai-extra-chip:hover {
    transform: translateY(-1px);
    border-color: #fb923c;
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.18);
}

#ai-chat-box .ai-service-btn.active,
#ai-chat-box .ai-preset-btn.active,
#ai-chat-box .ai-extra-chip.active {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important;
    border-color: #fbbf24 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(217, 119, 6, 0.24) !important;
    padding-right: 20px;
}

#ai-chat-box .ai-service-btn.active::after,
#ai-chat-box .ai-preset-btn.active::after,
#ai-chat-box .ai-extra-chip.active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
    animation: nimoSelectedBounce 0.9s ease-in-out infinite;
}

#ai-chat-box .ai-service-btn.active:hover,
#ai-chat-box .ai-preset-btn.active:hover,
#ai-chat-box .ai-extra-chip.active:hover {
    background: linear-gradient(135deg, #7c2d12 0%, #c2410c 100%) !important;
    border-color: #fb923c !important;
    color: #ffffff !important;
}

#ai-chat-box .ai-quick-select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #fdba74;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #7c2d12;
    background: #ffffff;
}

#ai-chat-box .ai-custom-toggle {
    width: 100%;
    border: 1px dashed #c2410c;
    background: #fff7ed;
    color: #9a3412;
    border-radius: 12px;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#ai-chat-box .ai-custom-size-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

#ai-chat-box .ai-custom-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#ai-chat-box .ai-custom-field label,
#ai-chat-box .ai-extra-label {
    font-size: 11px;
    font-weight: 700;
    color: #7c2d12;
}

#ai-chat-box .ai-custom-field input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #fdba74;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
}

#ai-chat-box .ai-extra-options {
    display: grid;
    gap: 8px;
}

#ai-chat-box .ai-extra-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

#ai-chat-box .ai-quick-summary {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5, #fef3c7);
    background-size: 220% 220%;
    animation: nimoGradientShift 6s ease infinite;
    border: 1px solid #fdba74;
    color: #7c2d12;
    font-size: 11px;
    line-height: 1.45;
}

#ai-chat-box .ai-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

#ai-chat-box .ai-start-btn,
#ai-chat-box .ai-reset-btn {
    flex: 1;
    min-height: 42px;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#ai-chat-box .ai-start-btn {
    background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
    color: #ffffff;
}

#ai-chat-box .ai-reset-btn {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

#ai-chat-box .ai-messages {
    flex: 0 0 auto;
    max-height: 70px;
    min-height: 54px;
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
    padding: 7px 9px !important;
}

#ai-chat-box .ai-message {
    max-width: 92% !important;
    font-size: 12px !important;
}

#ai-chat-box .ai-message.bot {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fbbf24 !important;
}

#ai-chat-box .ai-message.user {
    background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%) !important;
}

#ai-chat-box .ai-option-row {
    max-width: 100% !important;
}

#ai-chat-box .ai-option-btn {
    background: #ffffff !important;
    color: #9a3412 !important;
    border: 1px solid #fdba74 !important;
    border-radius: 12px !important;
    font-size: 11px !important;
}

@media (max-width: 640px) {
    #ai-chat-box {
        width: min(88vw, 300px) !important;
        height: min(62vh, 390px) !important;
        max-height: 390px !important;
        right: 10px !important;
        bottom: 72px !important;
    }

    #ai-chat-box .ai-service-grid,
    #ai-chat-box .ai-preset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#ai-chat-box .ai-input-area-optional {
    border-top: 1px dashed #fdba74 !important;
    background: #fffaf0 !important;
    padding: 8px 10px !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#ai-chat-box .ai-write-toggle {
    width: 100%;
    border: 1px solid #fdba74;
    background: #ffffff;
    color: #7c2d12;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

#ai-chat-box #ai-manual-input-wrap {
    display: none;
    align-items: center;
    gap: 8px;
}

#ai-chat-box .ai-input-area input {
    border-radius: 12px !important;
    border: 1px solid #fdba74 !important;
    min-height: 40px;
}

#ai-chat-box .ai-input-area button {
    background: linear-gradient(135deg, #c2410c 0%, #f59e0b 100%) !important;
    color: #fff !important;
    border-radius: 12px !important;
    width: 42px !important;
    height: 40px !important;
}

@media (max-width: 900px) {
    body > .ai-widget-btn {
        width: 74px !important;
        height: 74px !important;
        border-radius: 50% !important;
        bottom: 10px !important;
        right: 12px !important;
        gap: 2px !important;
        padding: 8px 6px !important;
        z-index: 10001 !important;
    }

    body > .ai-widget-btn::before {
        font-size: 42px;
    }

    body > .ai-widget-btn .ai-widget-top-label {
        font-size: 6.5px;
        padding: 0;
    }

    body > .ai-widget-btn .ai-widget-text {
        font-size: 8.8px !important;
        max-width: 54px;
    }

    #ai-chat-box {
        right: 10px !important;
        bottom: 70px !important;
        width: min(calc(100% - 20px), 310px) !important;
        max-width: 310px !important;
        height: min(64vh, 400px) !important;
        max-height: 400px !important;
    }

    #ai-chat-box .ai-service-grid,
    #ai-chat-box .ai-preset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #ai-chat-box .ai-custom-size-fields {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    body > .ai-widget-btn {
        width: 66px !important;
        height: 66px !important;
        border-radius: 50% !important;
        bottom: 8px !important;
        z-index: 10001 !important;
    }

    body > .ai-widget-btn::before {
        font-size: 38px;
    }

    body > .ai-widget-btn .ai-widget-top-label {
        font-size: 6px !important;
    }

    body > .ai-widget-btn .ai-widget-text {
        font-size: 7.6px !important;
        max-width: 48px;
    }

    #ai-chat-box .ai-service-grid,
    #ai-chat-box .ai-preset-grid,
    #ai-chat-box .ai-custom-size-fields {
        grid-template-columns: 1fr 1fr;
    }

    #ai-chat-box {
        width: min(86vw, 290px) !important;
        height: min(58vh, 360px) !important;
        max-height: 360px !important;
    }

    #ai-chat-box .ai-form-actions {
        flex-direction: column;
    }
}
/* ABSOLUTE LAST OVERRIDE: remove mobile container shell */
@media (max-width: 900px) {
    .container {
        background: transparent !important;
        border: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 8px 10px !important;
    }

    .container > .tabs {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 560px) {
    .container {
        padding: 0 6px 10px !important;
    }
}

/* Mobilde mutfak musteri formunu daha kompakt ve profesyonel goste */
@media (max-width: 900px) {
    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 8px !important;
        margin: 0 0 8px 0 !important;
    }

    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-sep {
        display: none !important;
    }

    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item {
        min-width: 0 !important;
        padding: 6px 7px !important;
        border-radius: 9px !important;
    }

    /* 1. satir: Duvar Uzunlugu + Modul Sayisi + Tip */
    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item:has(#pro-dim-genislik),
    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item:has(#pro-dim-modul),
    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item:has(#pro-dim-tip) {
        grid-column: span 4;
    }

    /* L/U kol görünür olduğunda altta tek kartta dursun */
    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item:has(#pro-dim-kol) {
        grid-column: 1 / -1;
    }

    /* 2. satir: Alt/ust yukseklik + Alt/ust derinlik */
    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item:has(#pro-kitchen-base-height),
    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item:has(#pro-kitchen-upper-height),
    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item:has(#pro-kitchen-base-depth),
    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item:has(#pro-kitchen-upper-depth) {
        grid-column: span 3;
    }

    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-label {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
        white-space: normal !important;
    }

    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-item strong {
        font-size: 13px !important;
        margin-top: 1px !important;
        line-height: 1.15 !important;
    }

    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-input-row {
        gap: 4px !important;
        margin-top: 2px !important;
    }

    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-input {
        width: 50px !important;
        min-height: 30px !important;
        padding: 3px 4px !important;
        font-size: 11px !important;
    }

    #mutfak-dolabi-panel #mutfak-usta-section-cizim #pro-dim-strip .kitchen-dim-input-row span {
        font-size: 11px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim #customer-form-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
        row-gap: 8px;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim #customer-form-body > .form-group:nth-of-type(n+3),
    #mutfak-dolabi-panel #mutfak-musteri-section-cizim #customer-form-body > .kitchen-material-accessory-row {
        grid-column: 1 / -1;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim .kitchen-form-section {
        padding: 8px !important;
        border-radius: 10px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim .kitchen-form-section > h3 {
        font-size: 19px !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.2;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim #customer-form-body .form-group {
        margin-bottom: 8px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim #customer-form-body .form-group label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
        line-height: 1.25;
    }

    #mutfak-dolabi-panel .kitchen-inline-select-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim #customer-form-body input,
    #mutfak-dolabi-panel #mutfak-musteri-section-cizim #customer-form-body select {
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim .kitchen-layout-switch {
        gap: 6px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim .kitchen-layout-btn {
        min-height: 36px !important;
        padding: 7px 4px !important;
        font-size: 12px !important;
        border-radius: 12px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim .kitchen-range-row {
        margin-top: 4px !important;
        font-size: 11px !important;
        gap: 8px !important;
        line-height: 1.2;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim .kitchen-range-row span:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.85;
    }
}

/* Ust servis sekmeleri ile alt mod secici arasindaki boslugu sikistir */
.site-header-services {
    margin-bottom: 6px !important;
}

.container.no-top-tabs {
    padding-top: 6px !important;
}

/* Alt mod seciciyi ust katmandaki amber palete yaklastir */
.btn-mode.active {
    border-color: #d99a14 !important;
    background: linear-gradient(180deg, #fff5d6 0%, #ffe9ad 100%) !important;
    color: #8a5a00 !important;
    box-shadow: 0 2px 8px rgba(217, 154, 20, 0.24) !important;
}

#musteri-panel > .pvc-top-mode-selector {
    border-color: #f1cb77 !important;
    background: linear-gradient(180deg, #fffdf7 0%, #fff6df 100%) !important;
}

/* Alt sekmelerde amber tema: PVC + Cam Balkon + Mutfak/Gardrop */
#musteri-panel > .pvc-top-mode-selector,
#cam-balkon-panel > .imalatci-nav,
#cambalkon-section-musteri #imalatci-cb-is-form,
#imalatci-cb-is-mobile,
#mutfak-dolabi-panel > .imalatci-nav {
    background: linear-gradient(180deg, #fffdf7 0%, #fff6df 100%) !important;
    border: 1px solid #f1cb77 !important;
    border-radius: 11px !important;
    padding: 4px !important;
    gap: 6px !important;
}

#musteri-panel > .pvc-top-mode-selector .btn-mode,
#cam-balkon-panel > .imalatci-nav .imalatci-nav-btn,
#cambalkon-section-musteri #imalatci-cb-is-form .imalatci-nav-btn,
#imalatci-cb-is-mobile .imalatci-nav-btn,
#mutfak-dolabi-panel > .imalatci-nav .mutfak-musteri-nav-btn {
    background: linear-gradient(180deg, #fff8e3 0%, #ffefc8 100%) !important;
    border: 1px solid #e7b43b !important;
    color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible;
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
}

#musteri-panel > .pvc-top-mode-selector .btn-mode.active,
#cam-balkon-panel > .imalatci-nav .imalatci-nav-btn.active,
#cambalkon-section-musteri #imalatci-cb-is-form .imalatci-nav-btn.active,
#imalatci-cb-is-mobile .imalatci-nav-btn.active,
#mutfak-dolabi-panel > .imalatci-nav .mutfak-musteri-nav-btn.active,
#imalatci-dashboard-badana .imalatci-nav-btn.active,
#boya-badana-panel .boya-subtab-btn.active {
    background: #111827 !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(2, 6, 23, 0.35) !important;
    padding-right: 20px !important;
}

#musteri-panel > .pvc-top-mode-selector .btn-mode.active::after,
#cam-balkon-panel > .imalatci-nav .imalatci-nav-btn.active::after,
#cambalkon-section-musteri #imalatci-cb-is-form .imalatci-nav-btn.active::after,
#imalatci-cb-is-mobile .imalatci-nav-btn.active::after,
#mutfak-dolabi-panel > .imalatci-nav .mutfak-musteri-nav-btn.active::after,
#imalatci-dashboard-badana .imalatci-nav-btn.active::after,
#boya-badana-panel .boya-subtab-btn.active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #facc15 100%);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.16);
    animation: nimoSelectedBounce 0.9s ease-in-out infinite;
}

#musteri-panel > .pvc-top-mode-selector .btn-mode:hover,
#cam-balkon-panel > .imalatci-nav .imalatci-nav-btn:hover,
#cambalkon-section-musteri #imalatci-cb-is-form .imalatci-nav-btn:hover,
#imalatci-cb-is-mobile .imalatci-nav-btn:hover,
#mutfak-dolabi-panel > .imalatci-nav .mutfak-musteri-nav-btn:hover,
#imalatci-dashboard-badana .imalatci-nav-btn:hover,
#boya-badana-panel .boya-subtab-btn:hover {
    background: linear-gradient(180deg, #ffe9b0 0%, #ffd97f 100%) !important;
    border-color: #d19b20 !important;
    color: #000000 !important;
}

#musteri-panel > .pvc-top-mode-selector .btn-mode.active:hover,
#cam-balkon-panel > .imalatci-nav .imalatci-nav-btn.active:hover,
#cambalkon-section-musteri #imalatci-cb-is-form .imalatci-nav-btn.active:hover,
#imalatci-cb-is-mobile .imalatci-nav-btn.active:hover,
#mutfak-dolabi-panel > .imalatci-nav .mutfak-musteri-nav-btn.active:hover,
#imalatci-dashboard-badana .imalatci-nav-btn.active:hover,
#boya-badana-panel .boya-subtab-btn.active:hover {
    background: #111827 !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
}

/* Imalatci paneli pencere / sineklik mod butonlari */
#imalatci-mode-secim-desktop .btn-mode,
#imalatci-pvc-mode-mobile .btn-mode {
    background: #111827 !important;
    border: 1px solid #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22) !important;
    position: relative;
    overflow: visible;
}

#imalatci-mode-secim-desktop .btn-mode:hover,
#imalatci-pvc-mode-mobile .btn-mode:hover,
#imalatci-mode-secim-desktop .btn-mode.active,
#imalatci-pvc-mode-mobile .btn-mode.active {
    background: #111827 !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    padding-right: 20px !important;
    box-shadow: 0 3px 10px rgba(2, 6, 23, 0.35) !important;
}

#imalatci-mode-secim-desktop .btn-mode.active::after,
#imalatci-pvc-mode-mobile .btn-mode.active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #facc15 100%);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.16);
    animation: nimoSelectedBounce 0.9s ease-in-out infinite;
    transform: translateY(-50%);
}

#imalatci-dashboard-mutfak [data-mutfak-work-mode],
#imalatci-dashboard-celik [data-mutfak-work-mode] {
    background: #111827 !important;
    border: 1px solid #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22) !important;
    position: relative;
    overflow: visible;
    font-weight: 700;
}

#imalatci-dashboard-mutfak [data-mutfak-work-mode]:hover,
#imalatci-dashboard-celik [data-mutfak-work-mode]:hover,
#imalatci-dashboard-mutfak [data-mutfak-work-mode].active,
#imalatci-dashboard-celik [data-mutfak-work-mode].active {
    background: #111827 !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    padding-right: 20px !important;
    box-shadow: 0 3px 10px rgba(2, 6, 23, 0.35) !important;
}

#imalatci-dashboard-mutfak [data-mutfak-work-mode].active::after,
#imalatci-dashboard-celik [data-mutfak-work-mode].active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #facc15 100%);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.16);
    animation: nimoSelectedBounce 0.9s ease-in-out infinite;
    transform: translateY(-50%);
}

/* Boya Badana mini tablari da ayni profesyonel siyah secim stilinde */
.boya-tab-switcher {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center !important;
    gap: 6px;
    max-width: 980px;
    margin: 0 auto 20px auto;
    padding: 3px !important;
    border: 1px solid #111111 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #fffdf7 0%, #fff6df 100%) !important;
    box-sizing: border-box !important;
}

#boya-badana-panel .boya-subtab-btn {
    flex: 1 1 320px;
    width: auto !important;
    min-width: 220px !important;
    max-width: 460px !important;
    min-height: 44px;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #fff8e3 0%, #ffefc8 100%) !important;
    border: 1px solid #e7b43b !important;
    color: #000000 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.12 !important;
    padding: 9px 6px !important;
}

/* Amber sekmelerin dis dikdortgen katman cizgileri siyah */
#musteri-panel > .pvc-top-mode-selector,
#cam-balkon-panel > .imalatci-nav,
#cambalkon-section-musteri #imalatci-cb-is-form,
#imalatci-cb-is-mobile,
#mutfak-dolabi-panel > .imalatci-nav,
#boya-badana-panel > div[style*="justify-content:center"] {
    border-color: #111111 !important;
}

@media (max-width: 900px) {
    #musteri-panel > .pvc-top-mode-selector,
    #cam-balkon-panel > .imalatci-nav,
    #mutfak-dolabi-panel > .imalatci-nav {
        padding: 4px !important;
        gap: 5px !important;
    }

    #musteri-panel > .pvc-top-mode-selector .btn-mode,
    #cam-balkon-panel > .imalatci-nav .imalatci-nav-btn,
    #mutfak-dolabi-panel > .imalatci-nav .mutfak-musteri-nav-btn {
        min-height: 34px !important;
        padding: 6px 7px !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    #boya-badana-panel .boya-tab-switcher {
        gap: 6px !important;
        max-width: 100% !important;
        padding: 3px !important;
        border-radius: 12px !important;
    }

    #boya-badana-panel .boya-subtab-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 10px !important;
        padding: 8px 4px !important;
    }
}

/* Ortak profesyonel aksiyon butonlari */
.action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: stretch;
}

.action-row.action-row-inline-mobile {
    flex-wrap: nowrap !important;
    align-items: stretch;
}

.action-row.action-row-inline-mobile .btn-primary {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.action-row .btn-primary,
button.btn-add,
button.btn-calc {
    width: auto !important;
    margin-top: 0 !important;
    min-height: 50px;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    padding: 12px 16px !important;
    letter-spacing: 0.1px;
}

.btn-primary.btn-add,
button[onclick*="listeyeEkle"],
button[onclick*="ListeyeEkle"] {
    background: linear-gradient(135deg, #fff7ed 0%, #fdba74 100%) !important;
    color: #111827 !important;
    border: 1px solid #f59e0b !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.22) !important;
}

.btn-primary.btn-calc,
button[onclick*="teklifAl"],
button[onclick*="TeklifHesapla"],
button[onclick*="Fiyatlandir"],
button[onclick*="FiyatHesapla"] {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0f172a !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.26) !important;
}

.btn-primary.btn-add:hover,
button[onclick*="listeyeEkle"]:hover,
button[onclick*="ListeyeEkle"]:hover {
    background: linear-gradient(135deg, #ffedd5 0%, #fb923c 100%) !important;
    transform: translateY(-2px);
}

.btn-primary.btn-calc:hover,
button[onclick*="teklifAl"]:hover,
button[onclick*="TeklifHesapla"]:hover,
button[onclick*="Fiyatlandir"]:hover,
button[onclick*="FiyatHesapla"]:hover {
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%) !important;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .action-row {
        flex-direction: column !important;
    }

    #musteri-panel .action-row.action-row-inline-mobile,
    #cam-balkon-panel #cam-balkon-islem-wrap,
    #cam-balkon-panel #kupeste-musteri-islem-wrap .action-row,
    #cam-balkon-panel #dusakabin-musteri-islem-wrap .action-row,
    #imalatci-dashboard-pimapen .action-row.imalatci-action-row,
    #cambalkon-section-musteri #imalatci-kupeste-wrap .action-row,
    #cambalkon-section-musteri #imalatci-dusakabin-wrap .action-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .action-row .btn-primary,
    button.btn-add,
    button.btn-calc {
        width: 100% !important;
    }

    #musteri-panel .action-row.action-row-inline-mobile .btn-primary,
    #cam-balkon-panel #cam-balkon-islem-wrap .btn-primary,
    #cam-balkon-panel #kupeste-musteri-islem-wrap .btn-primary,
    #cam-balkon-panel #dusakabin-musteri-islem-wrap .btn-primary,
    #imalatci-dashboard-pimapen .action-row.imalatci-action-row .btn-primary,
    #cambalkon-section-musteri #imalatci-kupeste-wrap .btn-primary,
    #cambalkon-section-musteri #imalatci-dusakabin-wrap .btn-primary {
        width: 100% !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        margin-bottom: 0 !important;
    }
}

/* Boya badana dis genisligini ust servis sekmeleriyle orantili tut */
#boya-badana-panel,
#fayans-seramik-panel {
    width: calc(100% - 24px);
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
}

#boya-badana-panel .boya-tab-switcher,
#boya-badana-panel #boya-content,
#boya-badana-panel #fayans-content,
#fayans-seramik-panel .panel-layout {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

/* Cam balkon ve mutfakta da ayni premium genislik dengesi */
#cam-balkon-panel,
#mutfak-dolabi-panel {
    width: calc(100% - 24px);
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
}

#cam-balkon-panel > .imalatci-nav,
#cam-balkon-panel .panel-layout,
#mutfak-dolabi-panel > .imalatci-nav,
#mutfak-dolabi-panel .kitchen-panel-layout {
    width: 100%;
    max-width: 1080px;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 901px) {
    #cam-balkon-panel > .imalatci-nav,
    #mutfak-dolabi-panel > .imalatci-nav {
        margin-bottom: 18px !important;
    }

    #cam-balkon-panel .panel-layout,
    #mutfak-dolabi-panel .kitchen-panel-layout {
        justify-content: center;
        gap: 28px !important;
    }

    #cam-balkon-panel .panel-layout > .form-section {
        flex: 0 0 320px !important;
        min-width: 300px;
    }

    #cam-balkon-panel .panel-layout > .preview-section {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 732px;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .form-section,
    #mutfak-dolabi-panel .kitchen-panel-layout > .kitchen-form-section {
        flex: 0 0 330px !important;
        min-width: 300px;
    }

    #mutfak-dolabi-panel .kitchen-panel-layout > .preview-section,
    #mutfak-dolabi-panel .kitchen-panel-layout > .kitchen-preview-section {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 722px;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim .kitchen-panel-layout {
        gap: 22px !important;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim .kitchen-panel-layout > .kitchen-form-section {
        flex: 0 0 300px !important;
        min-width: 285px;
    }

    #mutfak-dolabi-panel #mutfak-musteri-section-cizim .kitchen-panel-layout > .kitchen-preview-section {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 758px;
    }
}

@media (max-width: 900px) {
    .container {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 auto 12px auto !important;
        padding: 0 0 10px 0 !important;
    }

    #boya-badana-panel,
    #cam-balkon-panel,
    #mutfak-dolabi-panel,
    #fayans-seramik-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }

    #boya-badana-panel .boya-tab-switcher,
    #boya-badana-panel #boya-content,
    #boya-badana-panel #fayans-content,
    #cam-balkon-panel > .imalatci-nav,
    #cam-balkon-panel .panel-layout,
    #mutfak-dolabi-panel > .imalatci-nav,
    #mutfak-dolabi-panel .kitchen-panel-layout,
    #fayans-seramik-panel .panel-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        transform: none !important;
    }

    #boya-badana-panel .form-section,
    #boya-badana-panel .preview-section,
    #cam-balkon-panel .form-section,
    #cam-balkon-panel .preview-section,
    #mutfak-dolabi-panel .form-section,
    #mutfak-dolabi-panel .preview-section,
    #mutfak-dolabi-panel .kitchen-form-section,
    #mutfak-dolabi-panel .kitchen-preview-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 560px) {
    .container {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }
}

/* Footer temasi daha dolu gri ton ile guclendirildi */
.site-footer {
    background: linear-gradient(180deg, #e5e7eb 0%, #d6dde6 100%) !important;
    color: #0f172a !important;
    border-top: 2px solid #f59e0b !important;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.10) !important;
}

.site-footer h2,
.site-footer p,
.site-footer div {
    color: #0f172a !important;
}

.site-footer .site-footer-bottom {
    border-top: 1px solid rgba(100, 116, 139, 0.35) !important;
}

.site-footer .site-brand-dot {
    color: #f59e0b !important;
}

/* 3D render birinci katman cizgileri siyah */
#balkon-3d-preview,
#imalatci-balkon-3d-preview,
#kitchen-3d-preview,
#pro-kitchen-3d-preview,
#kitchen-gardrop-3d-preview,
#pro-kitchen-gardrop-3d-preview,
#mermer-3d-preview,
#mermer-imalatci-3d-preview,
#pvc-musteri-3d-preview {
    border: 1px solid #000000 !important;
}

#cam-balkon-panel .preview-section,
#cambalkon-section-musteri .preview-section,
#mutfak-dolabi-panel .kitchen-preview-section,
#imalatci-dashboard-mutfak .kitchen-preview-section,
#mermer-panel .preview-section,
#imalatci-dashboard-mermer .preview-section {
    border-color: #000000 !important;
}

/* FINAL MOBILE LOCK: PVC musteri ve imalatci onizleme ayni olculerde kalsin */
@media (max-width: 900px) {
    #musteri-panel .cizim-alani > div,
    #imalatci-dashboard-pimapen #section-cizim .preview-section .cizim-alani > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1.85fr) minmax(95px, 0.9fr) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    #pencere-canvas,
    #imalatci-pencere-canvas {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        min-height: 200px !important;
    }

    #metraj-panel,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel {
        max-height: 220px !important;
        max-width: 125px !important;
        min-width: 0 !important;
        overflow: auto !important;
        padding: 8px !important;
        margin-top: 30px !important;
    }

    #metraj-panel h4,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel h4 {
        font-size: 9px !important;
        margin-bottom: 4px !important;
        line-height: 1.1 !important;
    }

    #metraj-panel .metraj-icerik,
    #metraj-panel .metraj-icerik p,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel .metraj-icerik,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel .metraj-icerik p,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel .aksesuar-icerik,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel .aksesuar-icerik p {
        font-size: 8px !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    /* Imalatci PVC: çizim kartı ve dış katman yeniden görünsün */
    #imalatci-dashboard-pimapen #section-cizim .preview-section .cizim-alani {
        padding: 8px !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 1px solid #dbeafe !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
        border-radius: 12px !important;
    }

    #imalatci-dashboard-pimapen #imalatci-kayit-info,
    #imalatci-dashboard-pimapen #imalatci-adet-gosterge,
    #imalatci-dashboard-pimapen #imalatci-aksesuar-panel {
        display: none !important;
    }

    #imalatci-dashboard-pimapen #imalatci-metraj-panel {
        margin-top: 0 !important;
    }
}

@media (max-width: 560px) {
    #musteri-panel .cizim-alani > div,
    #imalatci-dashboard-pimapen #section-cizim .preview-section .cizim-alani > div {
        grid-template-columns: minmax(0, 2.1fr) minmax(68px, 0.62fr) !important;
        gap: 6px !important;
    }

    #pencere-canvas,
    #imalatci-pencere-canvas {
        min-height: 270px !important;
    }

    #metraj-panel,
    #imalatci-dashboard-pimapen #imalatci-metraj-panel {
        max-height: 155px !important;
        max-width: 86px !important;
        padding: 3px !important;
    }
}

/* ABSOLUTE LAST LOCK: imalatci PVC metraj renderin hemen yaninda kalsin */
@media (max-width: 900px) {
    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section .cizim-alani {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 1px solid #dbeafe !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
        padding: 6px !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 12px !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section .cizim-alani > div,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section .cizim-alani > div[style*="display: flex"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section .cizim-alani > div > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel {
        position: static !important;
        z-index: auto !important;
        flex: 0 0 78px !important;
        width: 78px !important;
        max-width: 78px !important;
        min-width: 78px !important;
        margin-top: 0 !important;
        max-height: 120px !important;
        overflow: auto !important;
        align-self: flex-start !important;
        padding: 3px !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-aksesuar-panel {
        display: block !important;
        margin-top: 3px !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel h4 {
        font-size: 6px !important;
        line-height: 1.15 !important;
        margin-bottom: 2px !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .metraj-icerik,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .metraj-icerik *,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .aksesuar-icerik,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .aksesuar-icerik * {
        font-size: 5.2px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-pencere-canvas {
        width: 100% !important;
        max-width: none !important;
        min-height: 180px !important;
        aspect-ratio: 16 / 9 !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section .cizim-alani {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel {
        position: static !important;
        right: auto !important;
        width: 70px !important;
        max-width: 70px !important;
        min-width: 70px !important;
        margin-top: 0 !important;
        max-height: 110px !important;
        overflow: auto !important;
        align-self: flex-start !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-pencere-canvas {
        min-height: 160px !important;
    }
}

@media (max-width: 900px) {
    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .mutfak-gardrop-olcu-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .mutfak-gardrop-olcu-uc-row,
    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .mutfak-gardrop-malzeme-uc-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .mutfak-gardrop-olcu-row label,
    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .mutfak-gardrop-olcu-uc-row label,
    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .mutfak-gardrop-malzeme-uc-row label {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .mutfak-gardrop-olcu-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .mutfak-gardrop-olcu-uc-row,
    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .mutfak-gardrop-malzeme-uc-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .kitchen-gardrop-cambar {
        margin-top: 4px !important;
        gap: 3px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .kitchen-gardrop-cam-btn {
        min-height: 22px !important;
        padding: 2px 3px !important;
        font-size: 7.6px !important;
        line-height: 1.05 !important;
        border-radius: 5px !important;
        box-shadow: none !important;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .kitchen-gardrop-cambar {
        gap: 2px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    #imalatci-dashboard-mutfak #mutfak-usta-section-gardrop .kitchen-gardrop-cam-btn {
        min-height: 20px !important;
        padding: 2px 2px !important;
        font-size: 7px !important;
        border-radius: 4px !important;
    }
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

.site-header-focus-text,
.site-header-service-btn,
.site-marquee-track span {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.site-marquee-track span {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    .site-header-focus-text {
        font-size: clamp(12.5px, 3.45vw, 17px) !important;
        line-height: 1.14 !important;
        padding: 3px 12px !important;
        min-width: min(92vw, 360px) !important;
        border-radius: 12px !important;
    }

    .site-header-service-btn {
        font-size: clamp(9px, 2.35vw, 10.8px) !important;
        line-height: 1.15 !important;
        min-height: 64px !important;
        padding: 6px 3px !important;
        letter-spacing: -0.05px !important;
    }

    .site-marquee-track span {
        font-size: 12.5px !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 560px) {
    .site-header-focus-text {
        font-size: clamp(11.5px, 2.35vw, 13.5px) !important;
        line-height: 1.16 !important;
        padding: 4px 12px !important;
        min-width: min(94vw, 340px) !important;
    }

    .site-header-service-btn {
        font-size: clamp(8.8px, 2.25vw, 10px) !important;
        min-height: 60px !important;
        padding: 6px 2px !important;
        line-height: 1.12 !important;
    }

    .site-marquee-track span {
        font-size: 12px !important;
    }
}

@media (max-width: 900px) {
    #imalatci-dashboard-pimapen.sineklik-active #section-cizim .preview-section,
    #imalatci-dashboard-pimapen.sineklik-active #section-cizim .preview-section .cizim-alani {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px !important;
        background: white !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }

    #imalatci-dashboard-pimapen.sineklik-active #section-cizim .preview-section .cizim-alani > div,
    #imalatci-dashboard-pimapen.sineklik-active #section-cizim .preview-section .cizim-alani > div[style*="display: flex"] {
        display: block !important;
    }

    #imalatci-dashboard-pimapen.sineklik-active #imalatci-pencere-canvas {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 300px !important;
        transform: none !important;
        margin: 0 auto !important;
        border: 2px solid #d1d5db !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        background: #ffffff !important;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-pimapen.sineklik-active #section-cizim .preview-section,
    #imalatci-dashboard-pimapen.sineklik-active #section-cizim .preview-section .cizim-alani {
        padding: 6px !important;
    }

    #imalatci-dashboard-pimapen.sineklik-active #imalatci-pencere-canvas {
        min-height: 280px !important;
    }
}

/* MOBILE PVC IMALATCI: metraj paneli onizlemenin yanina gelsin ve daha kompakt olsun */
@media (max-width: 900px) {
    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section .cizim-alani {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section .cizim-alani > div,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section .cizim-alani > div[style*="display: flex"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #section-cizim .preview-section .cizim-alani > div > div:first-child {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 100px) !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-pencere-canvas {
        width: calc(100% + 24px) !important;
        max-width: none !important;
        min-height: 324px !important;
        aspect-ratio: 4 / 3 !important;
        display: block !important;
        margin: 0 auto !important;
        position: relative !important;
        transform: translateX(-10px) translateY(-4px) !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel {
        position: static !important;
        flex: 0 0 106px !important;
        width: 106px !important;
        max-width: 106px !important;
        min-width: 106px !important;
        max-height: 176px !important;
        overflow: auto !important;
        margin: 16px 0 0 0 !important;
        padding: 8px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        align-self: flex-start !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel h4 {
        font-size: 10.6px !important;
        line-height: 1.25 !important;
        margin-bottom: 5px !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .metraj-icerik,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .metraj-icerik *,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .aksesuar-icerik,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .aksesuar-icerik * {
        font-size: 8.6px !important;
        line-height: 1.3 !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-aksesuar-panel,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-kayit-info,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-adet-gosterge {
        display: none !important;
    }
}

@media (max-width: 560px) {
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-pencere-canvas {
        min-height: 300px !important;
        transform: translateX(-10px) translateY(-8px) !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel {
        flex-basis: 92px !important;
        width: 92px !important;
        max-width: 92px !important;
        min-width: 92px !important;
        max-height: 152px !important;
        margin-top: 12px !important;
        padding: 6px !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel h4 {
        font-size: 9.2px !important;
    }

    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .metraj-icerik,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .metraj-icerik *,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .aksesuar-icerik,
    #imalatci-dashboard-pimapen:not(.sineklik-active) #imalatci-metraj-panel .aksesuar-icerik * {
        font-size: 7.6px !important;
    }
}

.trial-welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.trial-welcome-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(3px);
}

.trial-welcome-card {
    position: relative;
    width: min(100%, 520px);
    padding: 28px 22px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #fffdf5 0%, #fff7db 100%);
    border: 2px solid #fbbf24;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    text-align: center;
    overflow: hidden;
}

.trial-welcome-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.trial-welcome-logo {
    margin: 0 0 10px;
    color: #f59e0b;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    position: relative;
    z-index: 1;
}

.trial-welcome-card h3 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 28px;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.trial-welcome-card p {
    margin: 0 0 10px;
    color: #334155;
    font-size: 15px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
}

.trial-no-card-note {
    color: #dc2626 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-top: 12px !important;
}

.trial-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

.trial-start-btn,
.trial-later-btn {
    border: none;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.trial-start-btn {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(21, 128, 61, 0.22);
}

.trial-later-btn {
    background: #e2e8f0;
    color: #1e293b;
}

@media (max-width: 640px) {
    .trial-welcome-card {
        padding: 22px 14px 18px;
        border-radius: 18px;
    }

    .trial-welcome-logo {
        font-size: 24px;
    }

    .trial-welcome-card h3 {
        font-size: 22px;
    }

    .trial-welcome-card p {
        font-size: 14px;
    }

    .trial-start-btn,
    .trial-later-btn {
        width: 100%;
    }
}