/* oz-model3d — ürün 3D (GLB) görüntüleyici.
   Üç durum tek kap içinde: poster (idle) → yükleniyor (is-loading) → sahne (is-live).
   Kullanıcı düğmeye basana kadar ne three.js ne de .glb indirilir; poster zaten
   sayfada olan ürün görselidir. */

.oz-model3d {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid var(--oz-border, #d8e0d2);
    border-radius: var(--oz-radius, 6px);
    overflow: hidden;
    background: var(--oz-card-bg, #fff);
}

.oz-model3d__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    /* Işık havuzu — ürün fotoğrafı zemini hissi. Model üzerine CSS ile oturur. */
    background:
        radial-gradient(120% 90% at 50% 42%, #ffffff 0%, #f2f5ef 46%, #dfe6da 100%);
    overflow: hidden;
}

@media (max-width: 640px) {
    .oz-model3d__stage { aspect-ratio: 4 / 5; }
}

/* --- Katman 1: poster (idle) --------------------------------------------- */
.oz-model3d__poster {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    text-align: center;
    z-index: 2;
    transition: opacity .4s ease;
}

.oz-model3d__poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6%;
    /* poster arka planda kalsın, CTA öne çıksın */
    filter: saturate(.9);
    opacity: .68;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Davet kutusu posterin üstünde durur; makine görseli arkada desen gibi kalır.
   Yarı saydam panel olmadan başlık ve not fotoğrafın içinde kayboluyordu. */
.oz-model3d__invite {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--oz-radius, 6px);
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--oz-border, #d8e0d2);
    box-shadow: var(--oz-shadow-md, 0 2px 8px rgba(29, 36, 33, .08));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    max-width: 22rem;
}

.oz-model3d__invite-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--oz-heading, #1d2421);
}

.oz-model3d__invite-note {
    margin: 0;
    font-size: .82rem;
    color: var(--oz-text-muted, #6c7872);
}

.oz-model3d__start {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.oz-model3d__start svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* --- Katman 2: yükleme ---------------------------------------------------- */
.oz-model3d__boot {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.oz-model3d.is-loading .oz-model3d__boot { display: flex; }
.oz-model3d.is-loading .oz-model3d__poster,
.oz-model3d.is-live    .oz-model3d__poster { opacity: 0; pointer-events: none; }

.oz-model3d__boot-bar {
    width: 180px;
    height: 6px;
    border-radius: 999px;
    background: var(--oz-border, #d8e0d2);
    overflow: hidden;
}

.oz-model3d__boot-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--oz-secondary, #EE7D00);
    transition: width .2s ease;
}

.oz-model3d__boot-text {
    font-size: .82rem;
    color: var(--oz-text-muted, #6c7872);
    text-align: center;
    padding: 0 1rem;
}

.oz-model3d__boot-text.is-error { color: #c92a2a; }

/* --- Katman 3: canvas ---------------------------------------------------- */
.oz-model3d__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity .5s ease;
    /* Mobilde dikey kaydırma sayfaya, yatay sürükleme modele gider. touch-action:none
       olsaydı bölümün üzerine denk gelen parmak sayfayı kilitlerdi — kullanıcı
       viewer'ı geçemezdi. 360° dönüş zaten yatay eksende. */
    touch-action: pan-y;
    cursor: grab;
    outline: none;
}

/* Tam ekranda kaydırılacak sayfa yok; iki eksen de modele ait. */
.oz-model3d:fullscreen .oz-model3d__canvas,
.oz-model3d:-webkit-full-screen .oz-model3d__canvas { touch-action: none; }

.oz-model3d.is-live .oz-model3d__canvas { opacity: 1; }
.oz-model3d__canvas.is-grabbing { cursor: grabbing; }
.oz-model3d__canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--oz-primary-soft, rgba(83,170,40,.35)); }

/* --- Kumanda çubuğu ------------------------------------------------------- */
.oz-model3d__bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 4;
    display: none;
    align-items: center;
    gap: .35rem;
    padding: .3rem;
    border-radius: 999px;
    background: rgba(29, 36, 33, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: var(--oz-shadow-md, 0 2px 8px rgba(29,36,33,.08));
}

.oz-model3d.is-live .oz-model3d__bar { display: flex; }

.oz-model3d__btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .78rem;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease;
}

.oz-model3d__btn:hover { background: rgba(255, 255, 255, .16); }
.oz-model3d__btn:focus-visible { outline: 2px solid var(--oz-secondary, #EE7D00); outline-offset: 1px; }
.oz-model3d__btn svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; }

.oz-model3d__btn--icon { padding: .42rem .55rem; }
.oz-model3d__btn--icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* --- Sürükle ipucu -------------------------------------------------------- */
.oz-model3d__hint {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .8rem;
    font-size: .78rem;
    line-height: 1;
    color: #fff;
    background: rgba(20, 20, 20, .62);
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}

.oz-model3d__hint.is-on { opacity: 1; }
.oz-model3d__hint svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Tam ekranda kap tüm ekranı doldurur; aspect-ratio devre dışı kalmalı. */
.oz-model3d:fullscreen,
.oz-model3d:-webkit-full-screen {
    max-width: none;
    border: 0;
    border-radius: 0;
    display: flex;
}

.oz-model3d:fullscreen .oz-model3d__stage,
.oz-model3d:-webkit-full-screen .oz-model3d__stage {
    aspect-ratio: auto;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .oz-model3d__poster,
    .oz-model3d__canvas,
    .oz-model3d__boot-fill,
    .oz-model3d__hint { transition: none; }
}