/* ═══════════════════════════════════════════════
   STLYES.CSS — E-Katalog
   Sayfa: viewport'a tam oturur, kendi içinde scroll
   ═══════════════════════════════════════════════ */

:root {
    --brand: #164283;
    --brand2: #0c326d;
    --grad: linear-gradient(135deg,#164283,#0c326d);
    --glass: rgba(8,18,44,.88);
    --glass-deep: rgba(5,12,30,.95);
    --border: rgba(100,160,230,.13);
    --text: #e8f0ff;
    --muted: rgba(160,195,240,.58);
    --accent: #5aaff0;
    --glow: rgba(90,175,240,.13);
    --r: 14px;
    --r-sm: 9px;
}

/* ── Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    background: #000814;
}

body {
    font-family: 'Montserrat',sans-serif;
    background: transparent;
    display: flex;
    flex-direction: column;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

    body > form#form1 {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font-family: inherit;
    cursor: pointer;
}

    button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* ═══════════════════════════
   HEADER
   ═══════════════════════════ */
.header {
    flex-shrink: 0;
    text-align: center;
    padding: 16px 16px 12px;
    position: relative;
    z-index: 10;
}

    .header h1 {
        font-weight: 700;
        font-size: clamp(.82rem,2.4vw,1.38rem);
        color: var(--text);
        letter-spacing: clamp(.15rem,1vw,.48rem);
        text-shadow: 0 0 20px rgba(90,175,240,.30);
    }

/* ═══════════════════════════════════════════
   CONTAINER
   ═══════════════════════════════════════════ */
.container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(90,175,240,.20) transparent;
    display: flex;
    align-items: flex-start;
    gap: clamp(.8rem,2vw,1.8rem);
    padding: clamp(10px,2vw,28px) clamp(10px,3vw,36px);
    width: 100%;
    align-self: stretch;
}

    .container::-webkit-scrollbar {
        width: 4px;
    }

    .container::-webkit-scrollbar-thumb {
        background: rgba(90,175,240,.20);
        border-radius: 10px;
    }

/* ═══════════════════════════
   SOL PANEL — carousel
   ═══════════════════════════ */
.projects-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    border-radius: var(--r);
    border: 1px solid rgba(100,160,230,.10);
    padding: .8rem;
}

.stack-carousel {
    width: 100%;
    position: relative;
}

.stack-stage {
    position: relative;
    width: 100%;
    height: 440px;
}

/* ── Kart ── */
.sc-card {
    position: absolute;
    inset: 0;
    border-radius: var(--r);
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    background: var(--glass);
    border: 1px solid var(--border);
    transform-origin: bottom center;
    transition: transform .46s cubic-bezier(.4,0,.2,1), opacity .46s cubic-bezier(.4,0,.2,1);
    will-change: transform,opacity;
    contain: layout style;
}

    .sc-card[data-pos="0"] {
        transform: translateY(0) scale(1);
        opacity: 1;
        z-index: 10;
        box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(90,175,240,.08);
    }

    .sc-card[data-pos="1"] {
        transform: translateY(14px) scale(.954);
        opacity: .68;
        z-index: 9;
    }

    .sc-card[data-pos="2"] {
        transform: translateY(26px) scale(.908);
        opacity: .36;
        z-index: 8;
    }

    .sc-card[data-pos="3"], .sc-card[data-pos="4"], .sc-card[data-pos="5"], .sc-card[data-pos="past"] {
        transform: translateY(38px) scale(.86);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }

    .sc-card.swipe-out-left {
        transform: translateX(-115%) rotate(-13deg) !important;
        opacity: 0 !important;
        z-index: 20 !important;
        transition: transform .38s cubic-bezier(.4,0,1,1),opacity .38s ease !important;
    }

    .sc-card.come-from-back {
        transform: translateY(50px) scale(.85) !important;
        opacity: 0 !important;
        transition: none !important;
    }

    .sc-card.dragging {
        transition: none !important;
        cursor: grabbing;
    }

/* ── Kart medya ── */
.sc-media {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg,#070e1f,#0c1a34,#060d1c);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .sc-media::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(90,175,240,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(90,175,240,.04) 1px,transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
    }

/* ── Logo görseli ── */
.sc-media-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 22px 32px;
    z-index: 1;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,.55));
    /* Tarayıcı önbelleğe alma için */
    will-change: auto;
}

/* ── Baş harf placeholder (logo yoksa) ── */
.sc-media-placeholder {
    font-size: clamp(2rem,8vw,3.4rem);
    font-weight: 800;
    color: rgba(90,175,240,.08);
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    z-index: 1;
}

.sc-media .badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(22,66,131,.80);
    color: var(--accent);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 20px;
    border: 1px solid rgba(90,175,240,.18);
    z-index: 2;
}

.sc-media .card-num {
    position: absolute;
    bottom: 6px;
    right: 8px;
    color: rgba(90,175,240,.26);
    font-size: .6rem;
    font-weight: 600;
    z-index: 2;
}

/* ── Kart body ── */
.sc-body {
    padding: .9rem 1.1rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

    .sc-body h3 {
        font-size: .92rem;
        font-weight: 700;
        color: var(--text);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .sc-body p {
        font-size: .74rem;
        color: var(--muted);
        line-height: 1.62;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.sc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .2rem;
}

.sc-link {
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    background: var(--grad);
    color: #fff;
    border: none;
    font-size: .74rem;
    font-weight: 600;
    padding: .44rem .9rem;
    border-radius: 50px;
    transition: transform .15s;
    -webkit-tap-highlight-color: transparent;
}

    .sc-link:active {
        transform: scale(.93);
    }

    .sc-link i {
        font-size: .66rem;
    }

.sc-swipe-hint {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: rgba(90,175,240,.24);
    font-size: .64rem;
}

/* ── Kontroller ── */
.stack-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-top: 1rem;
}

.sc-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(90,175,240,.24);
    background: rgba(8,18,44,.82);
    color: var(--accent);
    font-size: .88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .16s,transform .13s;
    -webkit-tap-highlight-color: transparent;
}

    .sc-btn:active:not(:disabled) {
        transform: scale(.87);
        background: rgba(22,66,131,.55);
    }

    .sc-btn:disabled {
        opacity: .2;
        cursor: not-allowed;
    }

.sc-counter {
    font-size: .76rem;
    font-weight: 700;
    color: var(--muted);
    min-width: 36px;
    text-align: center;
}

    .sc-counter span {
        color: var(--accent);
    }

.stack-progress {
    width: 100%;
    height: 2px;
    background: rgba(90,175,240,.07);
    border-radius: 10px;
    margin-top: .8rem;
    overflow: hidden;
}

.stack-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,var(--brand),var(--accent));
    border-radius: 10px;
    transition: width .38s cubic-bezier(.4,0,.2,1);
    will-change: width;
}

/* ═══════════════════════════
   SAĞ PANEL — proje detayı
   ═══════════════════════════ */
.content-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.world-map-container {
    display: none !important;
}

.project-details-container {
    display: none;
    width: 100%;
    background: var(--glass-deep);
    border-radius: var(--r);
    padding: clamp(.85rem,2.5vw,2rem);
    border: 1px solid var(--border);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .35s ease,transform .35s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(90,175,240,.20) transparent;
}

    .project-details-container.active {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

/* Projelere dön */
.back-to-projects-btn {
    display: none;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--grad);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    padding: 8px 16px;
    font-size: .80rem;
    font-weight: 600;
    gap: 6px;
    align-items: center;
    margin-bottom: 1rem;
    transition: transform .16s;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
}

    .back-to-projects-btn:active {
        transform: scale(.98);
    }

/* Loading */
.loading {
    text-align: center;
    padding: 2.5rem 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.spinner {
    width: 36px;
    height: 36px;
    border: 2.5px solid rgba(90,175,240,.10);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin .75s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading p {
    color: var(--muted);
    margin-top: .6rem;
    font-size: .80rem;
}

/* Error */
.error-message {
    background: rgba(140,20,20,.10);
    color: #ff9090;
    padding: 1rem;
    border-radius: var(--r-sm);
    border: 1px solid rgba(140,20,20,.22);
    line-height: 1.65;
    font-size: .83rem;
}

.retry-btn {
    display: inline-block;
    margin-top: .6rem;
    padding: 6px 14px;
    background: var(--grad);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: .78rem;
    font-weight: 600;
}

/* ═══════════════════════════
   PROJE DETAY
   ═══════════════════════════ */
.project-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.project-title {
    font-size: clamp(1.2rem,3.5vw,1.9rem);
    font-weight: 700;
    color: var(--text);
    margin-bottom: .3rem;
}

.project-description {
    font-size: .86rem;
    color: var(--muted);
    line-height: 1.7;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(148px,1fr));
    gap: .75rem;
    margin: 1.1rem 0;
}

.info-card {
    background: rgba(10,22,52,.60);
    padding: .88rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

.info-label {
    font-size: .68rem;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: .28rem;
}

.info-value {
    font-size: .88rem;
    font-weight: 600;
    color: var(--accent);
}

.section {
    margin: 1.6rem 0;
}

.section-title {
    font-size: clamp(.95rem,2.8vw,1.25rem);
    font-weight: 600;
    color: var(--text);
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}

    .section-title i {
        color: var(--accent);
    }

/* ═══════════════════════════
   GALERİ
   ═══════════════════════════ */
.gallery-description {
    background: rgba(22,66,131,.09);
    border-left: 3px solid var(--accent);
    padding: .8rem .95rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: .83rem;
    color: var(--muted);
    line-height: 1.65;
}

.gallery-container {
    margin: .8rem 0;
}

.flipbook-wrapper {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 6px;
    margin-bottom: .8rem;
}

.flipbook {
    min-height: 160px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 36px rgba(0,0,0,.46);
    will-change: transform;
}

    .flipbook > div {
        background: #fff;
        overflow: hidden;
    }

    .flipbook img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        cursor: pointer;
        display: block;
    }

.sg-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 10px 36px rgba(0,0,0,.44);
}

    .sg-wrap img {
        width: 100%;
        display: block;
        object-fit: cover;
        cursor: pointer;
    }

.sg-counter {
    position: absolute;
    bottom: 7px;
    right: 9px;
    background: rgba(0,0,0,.50);
    color: #fff;
    font-size: .66rem;
    padding: 3px 8px;
    border-radius: 10px;
    pointer-events: none;
}

.flipbook-nav-btn {
    width: 38px;
    height: 38px;
    background: rgba(8,18,44,.84);
    border: 1.5px solid rgba(90,175,240,.22);
    border-radius: 50%;
    color: var(--accent);
    font-size: .86rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .16s,transform .13s;
    -webkit-tap-highlight-color: transparent;
}

    .flipbook-nav-btn:active:not(:disabled) {
        transform: scale(.87);
        background: rgba(22,66,131,.55);
    }

    .flipbook-nav-btn:disabled {
        opacity: .2;
        cursor: not-allowed;
    }

.thumbnail-wrapper {
    position: relative;
    padding: 0 42px;
    margin-top: .5rem;
}

.thumbnail-gallery {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 5px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(90,175,240,.20) transparent;
}

    .thumbnail-gallery::-webkit-scrollbar {
        height: 3px;
    }

    .thumbnail-gallery::-webkit-scrollbar-thumb {
        background: rgba(90,175,240,.20);
        border-radius: 10px;
    }

.thumbnail-item {
    flex: 0 0 auto;
    width: 124px;
    height: 78px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .16s,transform .16s;
    background: rgba(10,22,52,.55);
    -webkit-tap-highlight-color: transparent;
}

    .thumbnail-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .thumbnail-item:active {
        transform: scale(.93);
    }

    .thumbnail-item.active {
        border-color: var(--accent);
        transform: scale(1.05);
        box-shadow: 0 3px 12px rgba(90,175,240,.26);
    }

.thumbnail-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(8,18,44,.84);
    border: 1.5px solid rgba(90,175,240,.20);
    border-radius: 50%;
    color: var(--accent);
    font-size: .84rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
}

    .thumbnail-nav-button:active {
        transform: translateY(-50%) scale(.87);
    }

    .thumbnail-nav-button.prev {
        left: 2px;
    }

    .thumbnail-nav-button.next {
        right: 2px;
    }

/* Tam ekran */
.fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    transition: opacity .20s;
    pointer-events: none;
}

    .fullscreen-modal.active {
        opacity: 1;
        pointer-events: all;
    }

.fullscreen-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.97);
    cursor: pointer;
}

.fullscreen-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-image {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 3px;
}

.fullscreen-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 36px;
    color: #fff;
    background: none;
    border: none;
    line-height: 1;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
}

.fullscreen-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.10);
    border: 1.5px solid rgba(255,255,255,.17);
    color: #fff;
    font-size: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.fullscreen-prev {
    left: 12px;
}

.fullscreen-next {
    right: 12px;
}

.fullscreen-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.58);
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    z-index: 1;
}

/* ═══════════════════════════
   KAT PLANLARI
   ═══════════════════════════ */
.floorplan-tabs {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.floorplan-tab {
    padding: .58rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    position: relative;
    top: 1px;
    transition: color .16s,background .16s;
    -webkit-tap-highlight-color: transparent;
}

    .floorplan-tab:active, .floorplan-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        background: var(--glow);
    }

.floorplan-content {
    display: none;
}

    .floorplan-content.active {
        display: block;
        animation: fadeIn .26s ease;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px)
    }

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

.floorplan-main-wrapper {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 6px;
    margin-bottom: .8rem;
}

.floorplan-main-image {
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .floorplan-main-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.floorplan-nav-btn {
    width: 38px;
    height: 38px;
    background: rgba(8,18,44,.84);
    border: 1.5px solid rgba(90,175,240,.22);
    border-radius: 50%;
    color: var(--accent);
    font-size: .86rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .16s,transform .13s;
    -webkit-tap-highlight-color: transparent;
}

    .floorplan-nav-btn:active:not(:disabled) {
        transform: scale(.87);
    }

    .floorplan-nav-btn:disabled {
        opacity: .2;
        cursor: not-allowed;
    }

/* ═══════════════════════════
   TİPLER / TİCARİ / KONUM
   ═══════════════════════════ */
.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.advantages-list {
    list-style: none;
}

.advantage-item {
    padding: .48rem .4rem;
    margin-bottom: .22rem;
    display: flex;
    align-items: flex-start;
    gap: .58rem;
    font-size: .81rem;
    color: var(--muted);
    line-height: 1.55;
}

    .advantage-item i {
        color: var(--accent);
        font-size: .88rem;
        margin-top: .1rem;
        flex-shrink: 0;
    }

.map-container {
    border-radius: var(--r-sm);
    overflow: hidden;
    height: 290px;
    border: 1px solid var(--border);
}

    .map-container iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(8,18,44,.60);
    color: var(--muted);
    font-size: .81rem;
    gap: .68rem;
}

    .map-placeholder i {
        font-size: 1.8rem;
        color: var(--accent);
    }

.types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(138px,1fr));
    gap: .8rem;
}

.type-card {
    background: rgba(10,22,52,.60);
    padding: 1.15rem 1rem;
    border-radius: var(--r-sm);
    text-align: center;
    border: 1px solid var(--border);
    transition: transform .16s;
}

    .type-card:active {
        transform: scale(.97);
    }

    .type-card.shop-card {
        background: var(--grad);
        border-color: rgba(90,175,240,.20);
    }

        .type-card.shop-card .type-number, .type-card.shop-card .type-label {
            color: #fff;
        }

.type-number {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: .46rem;
}

.type-label {
    font-size: .78rem;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.5;
}

.type-extra {
    font-size: .73em;
    opacity: .70;
    margin-top: .2rem;
}

.commercial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(138px,1fr));
    gap: .8rem;
}

.commercial-card {
    background: rgba(10,22,52,.60);
    padding: 1.15rem 1rem;
    border-radius: var(--r-sm);
    text-align: center;
    border: 1px solid var(--border);
    transition: transform .16s;
}

    .commercial-card:active {
        transform: scale(.97);
    }

.commercial-icon {
    font-size: 1.9rem;
    color: var(--accent);
    margin-bottom: .6rem;
}

.commercial-name {
    font-weight: 600;
    color: var(--text);
    font-size: .80rem;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: #000;
}

    .video-container iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

.loading-placeholder, .error-placeholder {
    color: var(--muted);
    font-size: .76rem;
    text-align: center;
    padding: 1.2rem;
}

    .loading-placeholder i, .error-placeholder i {
        font-size: 1.35rem;
        display: block;
        margin-bottom: .5rem;
        color: var(--accent);
    }

/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet ≤ 1100px
   ═══════════════════════════════════════════════ */
@media (max-width:1100px) {
    .container {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 10px 12px;
    }

    .projects-sidebar {
        width: 100%;
        position: static;
        align-self: auto;
    }

    .stack-stage {
        height: 410px;
    }

    .content-area {
        width: 100%;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }

    .back-to-projects-btn {
        display: flex;
    }

    .floorplan-main-image {
        height: 320px;
    }

    .project-details-container {
        overflow: visible;
    }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Mobil ≤ 768px
   ═══════════════════════════════════════════════ */
@media (max-width:768px) {
    .header {
        padding: 12px 12px 10px;
    }

    .sc-media {
        height: 158px;
    }

    .stack-stage {
        height: 385px;
    }

    .sc-media-logo {
        padding: 18px 24px;
    }

    .flipbook-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .flipbook-wrapper .flipbook,
        .flipbook-wrapper .sg-wrap {
            order: 1;
            width: 100%;
        }

        .flipbook-wrapper .flipbook-nav-btn:first-child {
            order: 2;
            align-self: flex-start;
        }

        .flipbook-wrapper .flipbook-nav-btn:last-child {
            order: 2;
            align-self: flex-end;
            margin-top: -38px;
        }

    .floorplan-main-wrapper {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .floorplan-main-image {
        height: 240px;
        width: 100%;
    }

    .floorplan-main-wrapper > .floorplan-nav-btn {
        display: none;
    }

    .floorplan-tabs {
        flex-direction: column;
        border-bottom: none;
        gap: 0;
    }

    .floorplan-tab {
        border-bottom: 1px solid var(--border);
        border-left: 2px solid transparent;
        top: 0;
        width: 100%;
        padding: .72rem 1rem;
    }

        .floorplan-tab.active {
            border-bottom-color: var(--border);
            border-left-color: var(--accent);
        }

    .project-details-container {
        padding: .8rem;
        border-radius: var(--r-sm);
    }

    .info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .map-container {
        height: 230px;
    }

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

    .thumbnail-item {
        width: 106px;
        height: 66px;
    }

    .thumbnail-wrapper {
        padding: 0 38px;
    }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Küçük mobil ≤ 480px
   ═══════════════════════════════════════════════ */
@media (max-width:480px) {
    .sc-media {
        height: 142px;
    }

    .stack-stage {
        height: 368px;
    }

    .sc-media-logo {
        padding: 14px 20px;
    }

    .sc-body h3 {
        font-size: .86rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .types-grid {
        grid-template-columns: 1fr;
    }

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

    .thumbnail-item {
        width: 88px;
        height: 56px;
    }

    .thumbnail-wrapper {
        padding: 0 36px;
    }

    .thumbnail-nav-button {
        width: 32px;
        height: 32px;
        font-size: .78rem;
    }

    .floorplan-main-image {
        height: 200px;
    }

    .fullscreen-nav {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .fullscreen-prev {
        left: 7px;
    }

    .fullscreen-next {
        right: 7px;
    }

    .fullscreen-close {
        top: 9px;
        right: 11px;
        font-size: 30px;
    }
}

/* ═══════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
    .sc-card, .stack-progress-fill, .project-details-container, .floorplan-content {
        transition: none !important;
        animation: none !important;
    }
}