/* Ürün sayfası: 3D görünüm + kişiselleştirme */
.p3d { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; padding-top: 18px; align-items: stretch; }
.p3d-stage { position: relative; height: 640px; border-radius: 16px; overflow: hidden; background: #f6f4f0; }
.p3d-stage:fullscreen { border-radius: 0; height: 100vh; }
.p3d-stage:-webkit-full-screen { border-radius: 0; height: 100vh; }
/* iPhone Safari: öğe tam ekranı yok, sabit katmanla kaplanır */
.p3d-stage.p3d-max { position: fixed; inset: 0; z-index: 1090; height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; }
html.p3d-noscroll, html.p3d-noscroll body { overflow: hidden; }
.p3d-canvas { position: absolute; inset: 0; }
.p3d-canvas .studio-labels { position: absolute; inset: 0; }
.studio-dim { font: 600 11px/1 system-ui, sans-serif; color: #6b5a45; background: rgba(255, 255, 255, .92); padding: 4px 7px; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.p3d-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #6b5a45; font-size: 14px; background: #f6f4f0; z-index: 3; }
.p3d-spinner { width: 34px; height: 34px; border: 3px solid #e3d9cc; border-top-color: #A27B5C; border-radius: 50%; animation: p3dspin .8s linear infinite; }
@keyframes p3dspin { to { transform: rotate(360deg); } }
.p3d-hint { position: absolute; left: 16px; bottom: 14px; font-size: 12px; color: #8a7a68; background: rgba(255, 255, 255, .85); padding: 6px 11px; border-radius: 20px; pointer-events: none; }
.p3d-tools { position: absolute; right: 14px; top: 14px; display: flex; gap: 6px; z-index: 2; }
.p3d-tools button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #2c3639; box-shadow: 0 1px 6px rgba(0, 0, 0, .07); cursor: pointer; font-size: 14px; transition: background .15s, color .15s; }
.p3d-tools button:hover { background: #fff; }
.p3d-tools button.on { background: #2c3639; color: #fff; }

/* Fotoğraf kalitesi ilerlemesi */
.p3d-photo { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b5a45; background: rgba(255, 255, 255, .88); padding: 6px 12px; border-radius: 20px; pointer-events: none; }
.p3d-photo[hidden] { display: none; }
.p3d-photo-bar { width: 60px; height: 3px; border-radius: 2px; background: #e8e0d4; overflow: hidden; }
.p3d-photo-bar i { display: block; height: 100%; width: 0; background: #A27B5C; transition: width .2s; }

/* Panel */
.p3d-panel { display: flex; flex-direction: column; position: relative; }
.p3d-head { padding-bottom: 16px; border-bottom: 1px solid #ece6dd; }
.p3d-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #A27B5C; font-weight: 600; margin-bottom: 6px; }
.p3d-title { font-size: 26px; font-weight: 500; color: #2c3639; margin: 0; line-height: 1.2; }
.p3d-dims { font-size: 13px; color: #6b5a45; margin-top: 8px; }
.p3d-dims span { color: #a99a88; margin-left: 4px; font-size: 11px; letter-spacing: .06em; }
.p3d-sec { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #2c3639; font-weight: 600; margin: 22px 0 12px; }

/* Parça satırı: açılır menü tetikleyicisi */
.p3d-rows { display: flex; flex-direction: column; gap: 10px; }
.p3d-combo { width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 12px 14px; border: 1px dashed #cdbfae; border-radius: 12px; background: #faf7f2; color: #2c3639; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.p3d-combo[hidden] { display: none; }
.p3d-combo:hover { border-color: #A27B5C; background: #f5efe6; }
.p3d-combo > i:first-child { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #2c3639; color: #e8d3b9; font-size: 15px; }
.p3d-combo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.p3d-combo-text b { font-size: 15px; font-weight: 600; }
.p3d-combo-text small { font-size: 12px; color: #8a7a68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3d-combo-next { color: #A27B5C; }
.p3d-combo.spin .p3d-combo-next { animation: p3d-spin .45s ease; }
@keyframes p3d-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.p3d-combo:focus-visible { outline: 2px solid #A27B5C; outline-offset: 2px; }
.p3d-row { position: relative; }
.p3d-row-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #e7e0d6; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.p3d-row-head:hover { border-color: #cdbfae; }
.p3d-row.open .p3d-row-head { border-color: #A27B5C; box-shadow: 0 0 0 3px rgba(162, 123, 92, .12); }
.p3d-row-sw { width: 40px; height: 40px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); background-size: cover; }
.p3d-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.p3d-row-text small { font-size: 10.5px; color: #8a7a68; letter-spacing: .1em; text-transform: uppercase; }
.p3d-row-text b { font-size: 15.5px; font-weight: 500; color: #2c3639; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3d-row-text b.preview { font-style: italic; color: #A27B5C; }
.p3d-chev { font-size: 11px; color: #8a7a68; transition: transform .2s; }
.p3d-row.open .p3d-chev { transform: rotate(180deg); }

/* Açılır menü */
.p3d-row-body { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid #ece6dd; border-radius: 14px; box-shadow: 0 22px 48px -16px rgba(44, 54, 57, .32), 0 2px 6px rgba(44, 54, 57, .06); overflow: hidden; }
.p3d-row.open .p3d-row-body { display: block; animation: p3ddd .16s ease-out; }
@keyframes p3ddd { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.p3d-gtabs { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid #f1ece5; overflow-x: auto; scrollbar-width: none; }
.p3d-gtabs::-webkit-scrollbar { display: none; }
.p3d-gtab { flex: none; border: 0; border-bottom: 2px solid transparent; background: none; color: #8a7a68; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 13px 0 10px; cursor: pointer; }
.p3d-gtab:hover { color: #2c3639; }
.p3d-gtab.on { color: #2c3639; border-bottom-color: #A27B5C; }
.p3d-list { max-height: 340px; overflow-y: auto; padding: 6px; overscroll-behavior: contain; scrollbar-width: thin; }
.p3d-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
.p3d-item:hover { background: #faf7f3; }
.p3d-item-sw { width: 42px; height: 42px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); background-size: cover; }
.p3d-item-name { flex: 1; min-width: 0; font-size: 14px; color: #2c3639; }
.p3d-item-name small { display: block; font-size: 11px; color: #a99a88; margin-top: 2px; }
.p3d-item i { font-size: 11px; color: #A27B5C; visibility: hidden; }
.p3d-item.on { background: #fbf7f2; }
.p3d-item.on .p3d-item-name { color: #A27B5C; font-weight: 500; }
.p3d-item.on i { visibility: visible; }
.p3d-row-head:focus-visible, .p3d-item:focus-visible, .p3d-gtab:focus-visible { outline: 2px solid #A27B5C; outline-offset: 2px; }
.p3d-row-head:focus:not(:focus-visible), .p3d-item:focus:not(:focus-visible) { outline: none; }

.p3d-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 22px; }
.p3d-cta { border: 0; border-radius: 12px; background: #2c3639; color: #fff; font-weight: 600; font-size: 15px; padding: 15px 16px; cursor: pointer; transition: background .15s; }
.p3d-cta:hover { background: #3f4a4e; }
.p3d-cta i { color: #25D366; margin-right: 6px; }
.p3d-share { border: 1px solid #e3d9cc; border-radius: 12px; background: #fff; color: #2c3639; font-size: 13px; padding: 0 16px; cursor: pointer; white-space: nowrap; }
.p3d-share i { color: #A27B5C; margin-right: 4px; }
.p3d-note { font-size: 11px; color: #9a8b7a; margin: 10px 0 0; }

@media (max-width: 991px) {
  .p3d { grid-template-columns: 1fr; gap: 18px; }
  .p3d-list { max-height: 50vh; }
  .p3d-stage { height: 58vh; min-height: 360px; border-radius: 12px; }
  .p3d-hint { display: none; }
  .p3d-tools button { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .p3d-share span { display: none; }
}

/* AR+ (odanda gör) */
.p3d-ar { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border: 0; border-radius: 30px; background: #2c3639; color: #fff; box-shadow: 0 6px 18px rgba(44, 54, 57, .28); cursor: pointer; text-align: left; transition: transform .15s, background .15s; }
.p3d-ar:hover { background: #3f4a4e; transform: translateY(-1px); }
.p3d-ar[hidden] { display: none; }
.p3d-ar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 30px; padding: 0 8px; border-radius: 20px; background: #A27B5C; color: #fff; font: 700 13px/1 system-ui, sans-serif; letter-spacing: .3px; }
.p3d-ar-text b { display: block; font-size: 14px; }
.p3d-ar-text small { display: block; font-size: 11px; color: #c9c2b8; }
.p3d-ar-sheet { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(32, 36, 38, .45); backdrop-filter: blur(3px); }
.p3d-ar-sheet[hidden] { display: none; }
.p3d-ar-card { position: relative; display: flex; gap: 28px; align-items: center; width: min(640px, 100%); max-height: 100%; overflow: auto; padding: 28px; border-radius: 16px; background: #fff; color: #2c3639; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); }
.p3d-ar-card.phone { flex-direction: column; align-items: stretch; width: min(420px, 100%); padding: 22px; }
.p3d-ar-x { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f3efe9; color: #2c3639; cursor: pointer; }
.p3d-ar-qr { flex: 0 0 210px; height: 210px; display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 12px; background: #f6f4f0; text-align: center; font-size: 12px; color: #8a7a68; }
.p3d-ar-qr svg { width: 100%; height: 100%; }
.p3d-ar-body { flex: 1; min-width: 0; }
.p3d-ar-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8a7a68; text-transform: uppercase; letter-spacing: .6px; }
.p3d-ar-kicker .p3d-ar-badge { min-width: 0; height: 22px; font-size: 11px; }
.p3d-ar-body h4 { margin: 10px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.3; padding-right: 24px; }
.p3d-ar-body p { font-size: 14px; color: #5b5048; margin: 0 0 12px; }
.p3d-ar-note { background: #fbf3ea; border-radius: 8px; padding: 8px 10px; }
.p3d-ar-steps { margin: 0 0 16px; padding-left: 20px; font-size: 13px; color: #5b5048; }
.p3d-ar-steps li { margin-bottom: 4px; }
.p3d-ar-card .p3d-share { height: 40px; }
.p3d-ar-foot { display: block; margin-top: 12px; font-size: 11px; color: #9a8b7a; }
.p3d-ar-go { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.p3d-ar-go:disabled { opacity: .85; cursor: progress; }
.p3d-ar-go .p3d-spinner { width: 18px; height: 18px; border-width: 2px; }
@media (max-width: 991px) {
  .p3d-ar { right: 10px; bottom: 10px; }
  .p3d-ar-sheet { position: fixed; z-index: 1100; align-items: flex-end; padding: 0; }
  .p3d-ar-card.phone { width: 100%; border-radius: 18px 18px 0 0; }
}
@media (max-width: 600px) {
  .p3d-ar-card:not(.phone) { flex-direction: column; }
}

/* Desen yönü: açılan menünün başında, malzemenin kendi dokusuyla iki seçenek (olduğu gibi / 90° dönük) */
.p3d-dir { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f0ebe3; background: #fcfaf7; }
.p3d-dir[hidden] { display: none; }
.p3d-dir-label { flex: 1; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8a7a68; }
.p3d-dir-opt { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border: 1px solid #e7e0d6; border-radius: 9px; background: #fff; color: #2c3639; font-size: 12.5px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.p3d-dir-opt:hover { border-color: #cdbfae; }
.p3d-dir-opt.on { border-color: #A27B5C; box-shadow: 0 0 0 2px rgba(162, 123, 92, .15); font-weight: 600; }
.p3d-dir-opt:focus-visible { outline: 2px solid #A27B5C; outline-offset: 2px; }
.p3d-dir-sw { width: 26px; height: 26px; border-radius: 6px; overflow: hidden; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); display: block; }
.p3d-dir-sw i { display: block; width: 100%; height: 100%; background-size: cover; }
.p3d-dir-sw.r90 i { transform: rotate(90deg); }
.p3d-row-sw.rot { transform: rotate(90deg); }

/* Tam ekran: malzeme seçici sahnedeki panelde (masaüstünde sağda, telefonda alttan) */
.p3d-fs-toggle { position: absolute; left: 16px; top: 14px; z-index: 3; height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #2c3639; box-shadow: 0 1px 6px rgba(0, 0, 0, .07); font-size: 13px; font-weight: 600; cursor: pointer; }
.p3d-fs-toggle[hidden] { display: none; }
.p3d-fs-toggle.on { background: #2c3639; color: #fff; }
.p3d-fs-panel { position: absolute; top: 64px; right: 16px; bottom: 88px; z-index: 4; width: 360px; max-width: calc(100% - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(44, 54, 57, .35), 0 2px 8px rgba(44, 54, 57, .08); overflow: hidden; }
.p3d-fs-panel[hidden] { display: none; }
.p3d-fs-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid #eee7dd; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #2c3639; }
.p3d-fs-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #8a7a68; cursor: pointer; }
.p3d-fs-close:hover { background: #f5efe6; color: #2c3639; }
.p3d-fs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 18px; overscroll-behavior: contain; scrollbar-width: thin; }
.p3d-fs-panel .p3d-row-body { position: static; margin-top: 6px; box-shadow: 0 6px 18px -10px rgba(44, 54, 57, .25); }
@media (max-width: 991px) {
  .p3d-fs-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 62%; border-radius: 16px 16px 0 0; }
}