:root {
  --vurgu: #1f6feb;
  --zemin: #f3f4f6;
  --yuzey: #ffffff;
  --cizgi: #e7e9ee;
  --yazi: #1d232b;
  --soluk: #6b7480;
  --tehlike: #c93c37;
  --yaricap: 12px;
  --vurgu-acik: color-mix(in srgb, var(--vurgu) 11%, #fff);
  --golge-buyuk: 0 6px 24px rgba(16, 24, 40, 0.13);
  --golge: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--yazi);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--zemin); display: flex; flex-direction: column; }
button, input, select { font: inherit; color: inherit; }
h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--yazi); }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.kucuk-i { width: 14px; height: 14px; }
[hidden] { display: none !important; }

/* Üst çubuk */
.ust {
  display: flex; align-items: center; gap: 16px; padding: 0 16px; min-height: 60px;
  background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
}
.marka { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.marka img { height: 34px; max-width: 120px; object-fit: contain; }
.marka strong { display: block; font-size: 15px; }
.marka small { color: var(--soluk); font-size: 12px; }
.marka .uleso-imza { display: block; height: 15px; width: auto; max-width: none; margin-top: 2px; opacity: .85; }
.ust-butonlar { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex: 1; }
.musteri-dugme {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--cizgi); background: var(--yuzey);
  border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; max-width: 280px; margin-right: 4px;
}
.musteri-dugme:hover { border-color: var(--vurgu); }
.musteri-dugme > span:not(.avatar) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.musteri-dugme .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--vurgu-acik); color: var(--vurgu); display: grid; place-items: center; flex: none; }
.musteri-dugme .avatar svg { width: 15px; height: 15px; }
#aktif-musteri { color: var(--vurgu); font-weight: 600; }
#aktif-musteri.bos { color: var(--soluk); font-weight: 400; }
.ikon-dugme {
  width: 38px; height: 38px; border: 0; background: none; border-radius: 10px; display: grid; place-items: center;
  cursor: pointer; color: #3b4450; padding: 0;
}
.ikon-dugme:hover:not(:disabled) { background: var(--zemin); color: var(--yazi); }
.ikon-dugme:disabled { opacity: 0.35; cursor: default; }
.ayrac { width: 1px; height: 24px; background: var(--cizgi); margin: 0 6px; }
.menu-kap { position: relative; }
.acilir-menu {
  position: absolute; right: 0; top: 44px; z-index: 40; background: var(--yuzey); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16); border: 1px solid var(--cizgi); padding: 6px; min-width: 190px; display: grid;
}
.acilir-menu button {
  border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  display: flex; gap: 10px; align-items: center; white-space: nowrap;
}
.acilir-menu button:hover { background: var(--zemin); }
.acilir-menu button.aktif { color: var(--vurgu); font-weight: 600; }
.acilir-menu button.tehlike { color: var(--tehlike); }
.acilir-menu hr { border: 0; border-top: 1px solid var(--cizgi); margin: 4px 0; }
#secenek-listesi { left: 0; right: auto; }
/* "Paylaş ve kaydet": yalnız simge iken ne işe yaradığı anlaşılmıyordu; yazılı, çerçeveli ve açılır oklu */
.paylas-dugme {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; margin: 0 2px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--yazi);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.paylas-dugme:hover { border-color: var(--vurgu); color: var(--vurgu); }
.paylas-dugme svg.i { width: 17px; height: 17px; }
.paylas-dugme svg.kucuk-i { width: 14px; height: 14px; color: var(--soluk); }
.secenek-dugme { display: flex; gap: 4px; min-height: 36px; align-items: center; border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 999px; padding: 6px 10px; cursor: pointer; font-size: 13px; white-space: nowrap; margin-right: 4px; }
.secenek-dugme:hover { border-color: var(--vurgu); }
.durum-sec { font-size: 12px; padding: 4px 6px; border-radius: 999px; }
.durum-sec.durum-gonderildi { background: #eef4ff; border-color: #b9cdf5; }
.durum-sec.durum-onaylandi { background: #fff6dd; border-color: #ecd38a; }
.durum-sec.durum-satildi { background: #e6f6ec; border-color: #9fd5b2; }
.durum-sec.durum-iptal { background: #f4f4f5; color: var(--soluk); }

.buton {
  border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 9px;
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.buton.ekle { border-style: dashed; border-color: #c9ced6; color: #3b4450; font-size: 13px; }
.buton.ekle:hover:not(:disabled) { border-color: var(--vurgu); color: var(--vurgu); }
.buton:hover:not(:disabled) { border-color: var(--vurgu); }
.buton.ana { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.buton.ana:hover { filter: brightness(1.08); }
.buton.tehlike { color: var(--tehlike); }
.buton:disabled { opacity: 0.6; cursor: not-allowed; }
.buton.tam { width: 100%; margin-top: 4px; }
.ikon-buton { border: 0; background: none; cursor: pointer; color: var(--soluk); padding: 4px 6px; border-radius: 6px; }
.ikon-buton:hover { background: var(--zemin); color: var(--yazi); }

.gorunum-sec { display: inline-flex; background: var(--zemin); border-radius: 10px; padding: 3px; }
.gorunum-sec button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; cursor: pointer; color: var(--soluk); font-weight: 500; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.gorunum-sec button svg.i { width: 16px; height: 16px; }
/* Sağ üstteki menü: gözden kaçmasın diye çerçeveli ve yazılı */
.menu-dugme { border: 1px solid var(--cizgi); background: var(--yuzey); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); }
.gercekci-dugme {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; margin: 0 4px; border: 0; border-radius: 999px; cursor: pointer;
  background: #0F6E56; color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap;
}
.gercekci-dugme:hover { background: #0B5A46; }
/* Simge düğmelerin adı: fareyle üstüne gelince çıkan küçük kutu (ana.js) */
.ust-ipucu {
  position: fixed; z-index: 100; pointer-events: none; background: #1d232b; color: #fff; font-size: 12px; padding: 5px 9px;
  border-radius: 7px; white-space: nowrap; box-shadow: var(--golge);
}
.menu-dugme svg.i { width: 20px; height: 20px; }
.menu-dugme:hover { border-color: var(--vurgu); color: var(--vurgu); }
.gorunum-sec button.aktif { background: var(--yuzey); color: var(--yazi); box-shadow: var(--golge); font-weight: 600; }
.gorunum-sec.tam { display: flex; }
.gorunum-sec.tam button { flex: 1; }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.cipler button {
  border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 99px; padding: 4px 11px;
  font-size: 12px; cursor: pointer; color: var(--soluk);
}
.cipler button.aktif { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }

.rozet {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px;
  background: #fff4d6; color: #8a5a00;
}

/* Düzen */
.duzen { flex: 1; display: flex; min-height: 0; position: relative; }
.acilis-hatasi { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: var(--zemin); }
.acilis-hatasi > div { width: min(420px, 100%); display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; }
.acilis-hatasi h2, .acilis-hatasi p { margin: 0; }
.musteri-perdesi {position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--zemin) 70%, transparent); backdrop-filter: blur(4px); }
.musteri-perdesi[hidden] { display: none; }
.devam-dugmesi { margin-bottom: 12px; }
.musteri-perdesi-kart { width: min(380px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 24px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; box-shadow: 0 12px 40px rgb(0 0 0 / .12); }
.musteri-perdesi-kart h3 { margin: 4px 0 0; }
.musteri-perdesi-kart p { margin: 0 0 6px; }
.musteri-perdesi-kart .i.buyuk { width: 36px; height: 36px; color: var(--vurgu); }
.panel { background: var(--yuzey); overflow-y: auto; overflow-x: hidden; padding: 14px 14px 20px; }
.sol { width: 300px; flex: none; border-right: 1px solid var(--cizgi); transition: margin-left 0.2s; }
body.sol-kapali .sol { margin-left: -300px; }
.sol-baslik { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 10px; }
.sol-baslik h2 { font-size: 15px; margin: 0; }
.sahne-alani { position: relative; flex: 1; min-width: 0; min-height: 0; }
/* Alttaki kategori çubuğu 52 px; sahne onun üstünde kalır */
/* Alttaki kısa çubuk sahnenin üstünde yüzer; sahne en alta kadar uzanır */
#sahne { position: absolute; inset: 0; }
/* Masa ve kâğıt: açık gri-yeşil zemin üstünde sol panel ve çizim alanı ayrı beyaz kartlar. */
@media (min-width: 721px) {
  .duzen { background: #eef2f0; padding: 10px; gap: 10px; }
  .sol { border: 1px solid #dfe5e2; border-radius: 12px; }
  body.sol-kapali .sol { margin-left: -310px; }
  .sahne-alani { border: 1px solid #dfe5e2; border-radius: 12px; overflow: hidden; background: var(--yuzey); }
  body.tam-ekran .duzen { padding: 0; }
  body.tam-ekran .sahne-alani { border: 0; border-radius: 0; }
}
.sol-ac {
  position: absolute; left: 12px; top: 12px; z-index: 6; display: flex; gap: 6px; align-items: center; cursor: pointer;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px; padding: 7px 11px; box-shadow: var(--golge-buyuk); font-size: 13px;
}
body.sol-kapali .plan-araclari { left: 170px; }

/* Sağ kartlar: sahnenin üstünde yüzer. Seçili ürün kartı üstte (sadece seçim varken), fiyat kartı altta hep durur. */
.panel.sag {
  position: absolute; right: 14px; top: 14px; bottom: 66px; width: 300px; z-index: 15; padding: 0; background: none;
  display: flex; flex-direction: column; gap: 12px; pointer-events: none;
}
body.musteri-modu .panel.sag { bottom: 14px; }
.panel.sag > * { pointer-events: auto; flex: none; }
.panel.sag > .kart { background: var(--yuzey); border: 0; border-radius: 14px; box-shadow: var(--golge-buyuk); }
.fiyat-karti { margin-top: auto; }
.kart-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kart-baslik h3 { margin: 0 !important; }
.kart-kapat { border: 0; background: var(--zemin); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; color: var(--soluk); font-size: 15px; line-height: 1; padding: 0; }
.kart-kapat:hover { color: var(--yazi); }
.secili-karti { max-height: calc(100% - 200px); overflow-y: auto; animation: kart-gir 0.18s ease; }
@keyframes kart-gir { from { opacity: 0; transform: translateY(-6px); } }
.fiyat-ust { display: flex; width: 100%; justify-content: space-between; align-items: center; border: 0; background: none; padding: 0; cursor: pointer; }
.fiyat-ust > span { display: flex; gap: 4px; align-items: center; color: var(--soluk); font-size: 13px; font-weight: 600; }
.fiyat-ust strong { font-size: 19px; }
.toplam-kutu { display: grid; justify-items: end; line-height: 1.15; }
.toplam-kutu small { color: var(--soluk); font-size: 11px; font-weight: 400; }
.teklif li.ek-kalem { cursor: pointer; }
.teklif li.ek-kalem:hover > span:first-child { color: var(--vurgu); }
#kalem-ekle { margin: 8px 0 2px; }
.fiyat-karti .teklif-ozeti { margin-top: 8px; border-top: 1px solid var(--cizgi); }
.sahne-acilmadi { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center; color: var(--soluk); }
.sahne-acilmadi b { font-size: 16px; color: #333; }
#sahne canvas { display: block; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.olcu-etiketleri { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.olcu-etiketleri span {
  position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid #c9ced6;
  font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 5px; white-space: nowrap; color: #1d232b;
}
.olcu-etiketleri span.urun-olcusu { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.video-durumu {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 25, 32, 0.35);
  color: #fff; font-weight: 600; font-size: 15px; z-index: 5;
}
.video-durumu div { background: rgba(20, 25, 32, 0.8); padding: 14px 20px; border-radius: 12px; text-align: center; min-width: 220px; }
.video-durumu progress { width: 100%; margin-top: 8px; accent-color: var(--vurgu); }
.sahne-ipucu {
  position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); margin: 0; display: flex; align-items: center; gap: 10px; z-index: 5;
  background: rgba(29, 35, 43, 0.75); color: #fff; font-size: 12.5px; padding: 6px 7px 6px 14px; border-radius: 99px;
  white-space: nowrap; max-width: calc(100% - 140px);
}
.sahne-ipucu span { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sahne-ipucu button { border: 0; background: rgba(255, 255, 255, 0.18); color: #fff; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; flex: none; padding: 0; line-height: 1; }
.sahne-ipucu button:hover { background: rgba(255, 255, 255, 0.32); }
.seramik-bildirimi {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 30;
  background: #1d232b; color: #fff; font-size: 13px; padding: 6px 6px 6px 16px; border-radius: 99px; white-space: nowrap;
  max-width: calc(100% - 140px); box-shadow: 0 4px 14px rgba(16, 24, 40, 0.25);
}
.seramik-bildirimi[hidden] { display: none; }
.seramik-bildirimi span { overflow: hidden; text-overflow: ellipsis; }
.seramik-bildirimi button { border: 0; background: var(--vurgu); color: #fff; border-radius: 99px; padding: 5px 12px; font: inherit; font-weight: 600; cursor: pointer; flex: none; }

.sekmeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--zemin); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.sekme {
  border: 0; background: none; border-radius: 9px; padding: 8px 4px; cursor: pointer; color: var(--soluk);
  display: grid; justify-items: center; gap: 3px; font-size: 12.5px; font-weight: 500;
}
.sekme:hover { color: var(--yazi); }
.sekme.aktif { background: var(--yuzey); color: var(--vurgu); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08); }

/* Sol panel: açılıp kapanan bölümler */
.bolum { border: 1px solid var(--cizgi); border-radius: var(--yaricap); margin-bottom: 8px; }
.bolum > summary {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px; cursor: pointer; list-style: none; user-select: none;
}
.bolum > summary::-webkit-details-marker { display: none; }
.bolum > summary strong { font-weight: 600; flex: 1; min-width: 0; }
.bolum > summary:hover strong { color: var(--vurgu); }
.bolum .ok { color: var(--soluk); transition: transform 0.15s; width: 16px; height: 16px; }
.bolum[open] .ok { transform: rotate(90deg); }
.ozet { color: var(--soluk); font-size: 12.5px; white-space: nowrap; }
.bolum[open] > summary .ozet { display: none; }
.bolum-ic { padding: 0 12px 12px; }
.bolum-ic > .buton-satiri:last-child, .bolum-ic > .buton:last-child { margin-top: 4px; }

/* "?" ile açılan açıklamalar */
.yardim {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--soluk);
  font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; cursor: pointer; padding: 0; flex: none;
}
.yardim:hover, .ipucu-acik .yardim { border-color: var(--vurgu); color: var(--vurgu); }
.yardim-link { border: 0; background: none; padding: 2px 0; cursor: pointer; color: var(--soluk); display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.yardim-link:hover { color: var(--vurgu); }
.ipucu-kap { margin: 6px 0; }
.ipucu-metni { display: none; margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: #4a525d; background: var(--zemin); border-radius: 8px; padding: 8px 10px; }
.ipucu-kap .ipucu-metni { margin: 6px 0 0; }
.ipucu-acik .ipucu-metni { display: block; }

.soluk { color: var(--soluk); }
.kucuk { font-size: 12px; line-height: 1.45; }

/* Kartlar */
.kart-listesi { display: grid; gap: 8px; margin: 10px 0; }
.kart {
  position: relative; display: flex; gap: 10px; align-items: center; padding: 6px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap); cursor: pointer; background: var(--yuzey);
}
.kart:hover { border-color: var(--vurgu); }
.kart.secili { border-color: var(--vurgu); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vurgu) 25%, transparent); }
.kart img { width: 64px; height: 52px; object-fit: cover; border-radius: 7px; background: var(--zemin); flex: none; }
.kart-yazi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 18px; }
.kart-yazi strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kart-yazi span { font-size: 12px; color: var(--soluk); }
.kart-yazi .fiyat { color: var(--yazi); font-weight: 600; }
.kart-sil { position: absolute; top: 2px; right: 2px; }
.kart-duzenle { position: absolute; bottom: 2px; right: 2px; }

/* Formlar */
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--soluk); margin-bottom: 10px; }
input, select { border: 1px solid var(--cizgi); border-radius: 7px; padding: 7px 9px; background: var(--yuzey); min-width: 0; }
input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--vurgu) 40%, transparent); border-color: var(--vurgu); }
input[type="color"] { padding: 2px; height: 36px; }
.alan-satiri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.alan-satiri.uc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.alan-satiri > *, label > input, label > select { min-width: 0; width: 100%; }
.onay-kutusu > input { width: auto; }
label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buton-satiri { display: flex; gap: 8px; flex-wrap: wrap; }
.onay-kutusu { flex-direction: row; align-items: center; gap: 8px; color: var(--yazi); }

.aciklik { border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 10px; margin-bottom: 10px; }
.aciklik-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

/* Sağ panel */
.panel.sag > .kart { display: block; cursor: default; padding: 14px; }
.panel.sag > .kart:hover { border-color: var(--cizgi); }
.panel.sag h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--soluk); }
.secili-kutu { display: flex; flex-direction: column; gap: 8px; }
.secili-kutu label { margin: 4px 0 0; }
.secili-kutu .alan-satiri label { margin: 0; }
.urun-bas { display: flex; gap: 12px; align-items: center; }
.urun-bas > div { display: grid; gap: 2px; min-width: 0; }
.urun-bas strong { overflow: hidden; text-overflow: ellipsis; }
.urun-bas .soluk { font-size: 12.5px; }
.urun-resim { width: 52px; height: 52px; border-radius: 10px; background: var(--zemin); object-fit: cover; flex: none; }
.eylemler { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.eylemler button {
  border: 0; background: var(--zemin); border-radius: 10px; padding: 9px 2px 7px; display: grid; justify-items: center; gap: 4px;
  font-size: 11.5px; cursor: pointer; color: #3b4450; white-space: nowrap;
}
.eylemler button:hover { background: var(--vurgu-acik); color: var(--vurgu); }
.eylemler button.sil:hover { background: #fdecec; color: var(--tehlike); }
.secili-kutu a.kucuk { color: var(--vurgu); }
.teklif-dugmeleri { display: grid; gap: 8px; }
.ana-dugme {
  width: 100%; border: 0; background: var(--vurgu); color: #fff; border-radius: 11px; padding: 12px; font-weight: 600;
  cursor: pointer; display: flex; justify-content: center; gap: 8px; align-items: center;
}
.ana-dugme:hover { filter: brightness(1.07); }
.dugme-izgarasi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dugme-izgarasi button {
  border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 11px; padding: 10px; cursor: pointer;
  display: flex; gap: 8px; align-items: center; font-size: 13px; text-align: left; line-height: 1.2;
}
.dugme-izgarasi button:hover { border-color: var(--vurgu); color: var(--vurgu); }
.teklif ul { list-style: none; margin: 0; padding: 0; }
.teklif ul { max-height: 34vh; overflow-y: auto; }
.teklif li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--cizgi); font-size: 13px; }
.teklif li:last-child { border-bottom: 0; }
.teklif li small { display: block; color: var(--soluk); font-size: 11px; margin-top: 2px; }
.teklif li > span:last-child { white-space: nowrap; font-weight: 600; }
.toplam { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 0; margin-top: 4px; border-top: 1px solid var(--cizgi); color: var(--soluk); }
.toplam strong { font-size: 20px; color: var(--yazi); }
.yakinda-butonlar { display: grid; gap: 6px; }
.yakinda-butonlar .buton { display: flex; justify-content: space-between; align-items: center; }

.yakinda-butonlar .buton.ana { justify-content: center; }
textarea { border: 1px solid var(--cizgi); border-radius: 7px; padding: 7px 9px; font: inherit; color: inherit; resize: vertical; }
a.buton { text-decoration: none; text-align: center; display: inline-block; }
.uyari { background: #fff4d6; color: #6b4700; border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.45; }
#iletisim-icerik a:not(.buton) { color: var(--vurgu); text-decoration: none; }

dialog.genis { width: min(1100px, calc(100vw - 32px)); }
.teklif-onizleme { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; }
.teklif-onizleme iframe { width: 100%; height: min(70vh, 900px); border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; }
@media (max-width: 760px) { .teklif-onizleme { grid-template-columns: 1fr; } }

/* Plan araç çubuğu ve teknik çizim antedi */
.plan-araclari {
  position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2;
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--cizgi); border-radius: 10px; padding: 6px; box-shadow: var(--golge);
}
.plan-araclari .buton { padding: 5px 9px; font-size: 12px; }
/* Araç çubuğu tek satır kalsın (dar ekranda kaydırılır), duvarın üstünü kapatmasın */
.plan-araclari { flex-wrap: nowrap; overflow-x: auto; right: auto; max-width: calc(100% - 340px); }
.plan-araclari .buton { flex: none; }
.plan-araclari .secmeli.aktif { background: color-mix(in srgb, var(--vurgu) 12%, #fff); border-color: var(--vurgu); color: var(--vurgu); }
.plan-araclari .ayirac { width: 1px; background: var(--cizgi); margin: 0 2px; }
.plan-antet {
  pointer-events: none; position: absolute; left: 14px; bottom: 112px; z-index: 2; display: flex; gap: 8px; align-items: center;
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--cizgi); border-radius: 99px; padding: 4px 12px; font-size: 12px; color: var(--yazi); white-space: nowrap;
}
.plan-antet span:first-child { font-weight: 600; }
.bos-plan-ipucu {
  pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0;
  max-width: min(340px, 70%); text-align: center; font-size: 14px; line-height: 1.5; color: var(--soluk);
  background: rgba(255, 255, 255, 0.88); border-radius: 12px; padding: 10px 14px;
}
.bos-plan-ipucu[hidden] { display: none; }
@media (max-width: 900px) { .plan-antet { display: none; } }
.olcu-etiketleri span.duzenlenebilir { pointer-events: auto; cursor: pointer; border-color: var(--vurgu); }
.olcu-etiketleri span.duzenlenebilir:hover { background: var(--vurgu); color: #fff; }
.olcu-etiketleri span.kucuk { font-size: 10px; padding: 0 3px; font-weight: 500; }
.secili-duvar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: color-mix(in srgb, var(--vurgu) 10%, #fff); border: 1px solid var(--vurgu); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin: 8px 0; }

/* Döşeme şekli seçimi */
.doseme-sec { display: grid; gap: 6px; margin: 12px 0 4px; }
.doseme-desenleri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.doseme-desenleri button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 1px solid var(--cizgi);
  border-radius: 8px; background: var(--yuzey); cursor: pointer; font-size: 10.5px; color: var(--soluk); line-height: 1.15;
}
.doseme-desenleri button svg { width: 30px; height: 22px; fill: #e4e7eb; stroke: #6b7480; stroke-width: 0.8; overflow: hidden; }
.doseme-desenleri button.aktif { border-color: var(--vurgu); color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 8%, #fff); }
.doseme-desenleri button.aktif svg { fill: color-mix(in srgb, var(--vurgu) 25%, #fff); stroke: var(--vurgu); }

/* Boya paleti ve "seramik yok" kartı */
.boya-alani { display: grid; gap: 6px; margin-bottom: 10px; }
/* padding: seçili rengin halkası (outline) kenardaki renklerde kutudan taşıp kesilmesin */
.renk-paleti { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px; }
.renk-paleti .renk { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #c9ced6; cursor: pointer; padding: 0; display: inline-block; }
.renk-paleti .renk.aktif { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.renk-ornek { width: 64px; height: 52px; border-radius: 7px; border: 1px solid var(--cizgi); flex: none; }

/* Giriş sayfası */
/* Giriş ekranı her zaman uleso renkleriyle açılır; firma rengi girişten sonra gelir. */
body.giris-sayfasi {
  --vurgu: #0F6E56; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100%;
  background: #f4f8f6;
}
.giris-tanitim {
  position: relative; overflow: hidden; color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  /* Arkadaki ince çizgiler seramik derzi gibi görünür. */
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(150deg, #0B3B30 0%, #0F6E56 45%, #1D9E75 100%);
}
.giris-tanitim-logo { height: 46px; width: 138px; flex: none; align-self: flex-start; position: relative; }
.giris-kutu {
  align-self: center; justify-self: center; margin: 24px 16px; background: var(--yuzey); border-radius: 16px; box-shadow: var(--golge-buyuk);
  padding: 28px; width: min(400px, calc(100% - 32px)); display: grid; gap: 14px;
}
.giris-baslik img { height: 40px; width: auto; display: block; }
.giris-baslik p { margin: 6px 0 0; }
/* Sol taraftaki banyo çizimi kendiliğinden döşenip dolar, sonra baştan başlar. */
.giris-sahne { position: relative; align-self: center; margin: auto 0; width: min(460px, 100%); }
.giris-cizim { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0,0,0,.18)); }
.giris-cizim .p { animation: giris-dosen 9s ease-out infinite both; animation-delay: calc(var(--g) * 30ms); transform-box: fill-box; }
.giris-cizim .esya { animation-name: giris-esya; }
@keyframes giris-dosen {
  0% { opacity: 0; transform: translateY(-10px); }
  5%, 85% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: none; }
}
@keyframes giris-esya {
  0% { opacity: 0; transform: translateY(-24px) scale(.92); }
  6%, 85% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: none; }
}
.giris-rozet {
  position: absolute; top: 4%; right: 2%; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
  background: #fff; color: #0B3B30; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18); animation: 9s infinite both;
}
.giris-rozet b { color: #1D9E75; }
.giris-rozet.calisiyor { animation-name: giris-rozet1; }
.giris-rozet.hazir { animation-name: giris-rozet2; }
@keyframes giris-rozet1 { 0%, 34% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes giris-rozet2 { 0%, 37% { opacity: 0; transform: translateY(6px); } 40%, 84% { opacity: 1; transform: none; } 87%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .giris-cizim .p, .giris-rozet { animation: none; }
  .giris-rozet.calisiyor { display: none; }
}
@media (max-width: 820px) {
  body.giris-sayfasi { grid-template-columns: 1fr; align-content: start; }
  .giris-tanitim { padding: 22px 20px 26px; gap: 10px; }
  .giris-tanitim-logo { height: 34px; width: 102px; }
  .giris-sahne, .giris-baslik img { display: none; }
  .giris-kutu { margin-top: -10px; }
}
.giris-kutu form { display: grid; }
.hata-metni { color: var(--tehlike); font-size: 13px; margin: 0 0 10px; }
.basari-metni { color: #1d7a46; background: #e6f6ec; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 0 0 10px; }
.giris-kutu h3 { margin: 0 0 6px; }
.ortala { text-align: center; margin: 10px 0 0; font-size: 13px; }
.ortala a, .onay-kutusu a { color: var(--vurgu); }
.kullanici-satiri { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.link-kutusu { display: grid; gap: 6px; margin: 8px 0; }
.hesap-bolum { border-top: 1px solid var(--cizgi); margin-top: 14px; padding-top: 4px; }
.hesap-bolum form, .hesap-bolum .form { display: grid; }

.liste-ara { width: 100%; margin: 10px 0 6px; box-sizing: border-box; }
iframe.eski-teklif { width: 100%; height: 65vh; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; }

/* Gerçekçi görüntü ve video */
.gercekci-tuval { margin: 10px 0; background: #111; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
.gercekci-tuval canvas { width: 100% !important; height: 100% !important; display: block; }
.video-ayarlari { display: grid; gap: 10px; }
.video-ayarlari fieldset { border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 12px; display: grid; gap: 4px; margin: 0; }
.video-ayarlari legend { font-weight: 600; font-size: 13px; padding: 0 4px; }

/* Görselleri toplu yükleme */
.secenek-ana { width: 100%; margin-bottom: 10px; border-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 6%, var(--yuzey)); }
.birak-alani { border: 2px dashed var(--cizgi); border-radius: 12px; padding: 18px; display: grid; gap: 8px; justify-items: center; text-align: center; transition: border-color .15s, background .15s; }
.birak-alani.uzerinde { border-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 8%, transparent); }
.toplu-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.toplu-kart { border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px; display: grid; gap: 5px; align-content: start; font-size: 12px; }
.toplu-kart img { width: 100%; height: 110px; object-fit: contain; background: #f6f7f9; border-radius: 6px; }
.toplu-kart input, .toplu-kart select { font-size: 12px; padding: 4px 6px; width: 100%; box-sizing: border-box; }
.toplu-kart.emin-degil { border-color: #e0a100; box-shadow: 0 0 0 2px #fff4d6; }
.toplu-kart.atlanan { opacity: .45; }
.toplu-kart .kucuk-alanlar label { font-size: 11px; }
.uyari-rozet { background: #fff4d6; color: #6b4700; }
.ucd-bant { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.ucd-listesi { max-height: 40vh; overflow-y: auto; display: grid; gap: 4px; margin: 8px 0; }
.ucd-satiri img { width: 44px; height: 44px; object-fit: contain; background: #f6f7f9; border-radius: 6px; }

/* Ürüne sağ tıklayınca açılan menü */
.sag-menu { position: fixed; z-index: 60; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge); padding: 6px; min-width: 190px; display: grid; }
.sag-menu[hidden] { display: none; }
.sag-menu strong { font-size: 12px; color: var(--soluk); padding: 4px 8px 6px; border-bottom: 1px solid var(--cizgi); margin-bottom: 4px; }
.sag-menu button { background: none; border: 0; text-align: left; padding: 7px 8px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--yazi); }
.sag-menu button:hover { background: color-mix(in srgb, var(--vurgu) 10%, transparent); }
.sag-menu button.tehlike { color: var(--tehlike); }
@media (pointer: coarse) { .sag-menu button { padding: 11px 10px; } }

/* Excel ile toplu yükleme */
.excel-adimlar { padding-left: 20px; display: grid; gap: 10px; margin: 8px 0; }
.excel-adimlar input[type=file] { display: block; margin-top: 6px; }
.excel-ozet { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.excel-ozet p { margin: 0 0 8px; }
.excel-hatalar { max-height: 160px; overflow-y: auto; font-size: 12px; margin: 6px 0 0; padding-left: 18px; }

/* Geri al / ileri al */
.geri-al-araclari {
  position: absolute; left: 14px; bottom: 66px; display: flex; gap: 2px; z-index: 5;
  background: var(--yuzey); border-radius: 12px; padding: 3px; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
}
.geri-al-araclari .ikon-dugme { width: 34px; height: 34px; }

/* Hazır banyo şablonları */
.sablonlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.sablon { border: 1px solid var(--cizgi); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--yuzey); cursor: pointer; font: inherit; color: var(--yazi); }
.sablon:hover { border-color: var(--vurgu); }
.sablon svg { width: 100%; height: 90px; background: #f6f7f9; border-radius: 8px; }

/* Hesap ve paketler */
.paketler { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.paket { border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.paket.aktif { border-color: var(--vurgu); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vurgu) 25%, transparent); }
.paket ul { flex: 1; margin: 0; padding-left: 16px; font-size: 12px; color: var(--soluk); }
.paket .fiyat { font-weight: 700; }
.paket .fiyat b { font-size: 20px; }
.paket .fiyat small { display: block; font-size: 11px; font-weight: 400; color: var(--soluk); }
.kilit { position: fixed; inset: 0; background: rgba(20, 25, 32, 0.6); display: grid; place-items: center; z-index: 50; padding: 16px; }
.kilit > div { background: var(--yuzey); border-radius: 14px; padding: 20px; width: min(720px, 100%); max-height: 90vh; overflow: auto; }
.musteri-satiri { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.musteri-satiri.aktif strong { color: var(--vurgu); }
.musteri-listesi { max-height: 50vh; overflow-y: auto; margin: 8px 0; }
#aktif-musteri { color: var(--vurgu); font-weight: 600; }

body.musteri-modu .sahne-ipucu, body.musteri-modu .geri-al-araclari { bottom: 14px; }
/* Müşteri görünümü: sadece izleme, düzenleme araçları gizli */
body.musteri-modu .sol,
body.musteri-modu .duzenleme,
body.musteri-modu #ornek-tasarim,
body.musteri-modu #yeni-tasarim,
body.musteri-modu #firma-ayarlari,
body.musteri-modu #musteriler,
body.musteri-modu #hesabim,
body.musteri-modu #aktif-musteri,
body.musteri-modu #ayar-menusu,
body.musteri-modu .ayrac { display: none !important; }

/* Alttaki kategori çubuğu */
.alt-cubuk {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); z-index: 21;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.12);
  display: flex; align-items: center; gap: 2px; padding: 4px 6px; overflow-x: auto; overflow-y: hidden;
}
.alt-cubuk button {
  border: 0; background: none; padding: 4px 8px; border-radius: 9px; cursor: pointer; display: flex; flex-direction: column; gap: 1px;
  align-items: center; white-space: nowrap; color: #3b4450; flex: none; font-size: 11px; min-width: 52px;
}
.alt-cubuk button:hover { background: var(--zemin); }
.alt-cubuk button.aktif { background: var(--vurgu-acik); color: var(--vurgu); font-weight: 600; }
/* Seramik düğmeleri ürünlerden ayrı görünsün: yeşilimsi zemin, minik karo, adı ve ölçüsü */
.alt-cubuk .alt-seramik {
  flex-direction: row; gap: 8px; padding: 4px 10px 4px 4px; margin-right: 4px; background: #eef7f3; border: 1px solid #cfe7dc;
  font-size: 12px; text-align: left; min-width: 0;
}
.alt-cubuk .alt-seramik:hover { background: #e2f1ea; }
.alt-cubuk .alt-seramik.aktif { border-color: var(--vurgu); }
.alt-karo { position: relative; width: 34px; height: 34px; border-radius: 7px; flex: none; background: #fff center / cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.alt-karo[data-fazla]::after {
  content: attr(data-fazla); position: absolute; right: -5px; top: -5px; background: var(--yazi); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 999px;
}
.alt-karo.bos { background: repeating-linear-gradient(45deg, #fff 0 4px, #eceeef 4px 8px); }
.alt-yazi { display: grid; line-height: 1.25; }
.alt-yazi b { font-weight: 600; }
.alt-yazi small { color: var(--soluk); font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.alt-kategoriler { display: contents; }
.seri { width: 1px; height: 30px; background: var(--cizgi); margin: 0 4px; flex: none; }
/* Dar ekranda seramiğin adı gizlenir (karo ve Duvar/Zemin kalır), ürünler sıkışır: çubuk daha az kayar */
@media (max-width: 1000px) {
  .alt-yazi small { display: none; }
  .alt-cubuk button { min-width: 44px; padding: 4px 5px; font-size: 10px; }
  .alt-cubuk .alt-seramik { padding-right: 8px; }
}

/* Alttan açılan şerit: solda arama ve ayarlar, sağda yana kayan kartlar */
.urun-seridi {
  position: absolute; left: 0; right: 0; bottom: 80px; z-index: 20; background: var(--yuzey); border-top: 1px solid var(--cizgi);
  box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.1); padding: 12px 14px; animation: serit-gir 0.18s ease;
}
@keyframes serit-gir { from { transform: translateY(16px); opacity: 0; } }
.urun-seridi .sekme-icerik:not([hidden]) { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.serit-ayarlar { max-height: min(44vh, 360px); overflow-y: auto; padding-right: 4px; }
.serit-ayarlar .liste-ara { margin-top: 0; }
.serit-ayarlar .cipler { margin: 6px 0; }
.serit-kapat { position: absolute; right: 10px; top: 8px; z-index: 2; border: 0; background: var(--zemin); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--soluk); }
.serit-kapat:hover { color: var(--yazi); }
.urun-seridi .kart-listesi { display: flex; gap: 10px; overflow-x: auto; margin: 0; padding: 2px 40px 8px 2px; }
.urun-seridi .kart { flex: none; width: 150px; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; }
.urun-seridi .kart img, .urun-seridi .kart .renk-ornek { width: 100%; height: 92px; }
.urun-seridi .kart-yazi { padding-right: 0; }
.urun-seridi .kart-duzenle { bottom: auto; top: 2px; right: 26px; background: var(--yuzey); }
.urun-seridi .kart-sil { background: var(--yuzey); }
.urun-seridi .kart-listesi > p { white-space: normal; max-width: 420px; }

/* Tam ekran: sadece oda ve çıkış düğmesi */
.tam-cik { display: none; }
body.tam-ekran .ust, body.tam-ekran .sol, body.tam-ekran .panel.sag, body.tam-ekran .alt-cubuk, body.tam-ekran .urun-seridi,
body.tam-ekran .sol-ac, body.tam-ekran .ipucu-karti, body.tam-ekran .plan-araclari, body.tam-ekran .geri-al-araclari { display: none !important; }
body.tam-ekran .tam-cik {
  display: flex; position: absolute; right: 14px; top: 14px; z-index: 30; gap: 6px; align-items: center; cursor: pointer;
  background: rgba(29, 35, 43, 0.78); color: #fff; border: 0; border-radius: 10px; padding: 8px 12px;
}
body.tam-ekran .sahne-ipucu { bottom: 14px; }

/* Açılış penceresi */
/* Yeni banyo penceresinin en üstündeki "Krokiden otomatik oluştur" kartı: uleso yeşili, göze çarpar */
.kroki-karti {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin: 4px 0 10px; padding: 16px 18px;
  border: 0; border-radius: 14px; cursor: pointer; color: #fff; font: inherit;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(135deg, #0B3B30, #0F6E56 55%, #1D9E75);
}
.kroki-karti:hover { filter: brightness(1.08); }
.kroki-karti > svg.i { width: 30px; height: 30px; flex: none; color: #5DCAA5; }
.kroki-karti > span:not(.rozet) { display: grid; gap: 3px; flex: 1; }
.kroki-karti strong { font-size: 16px; }
.kroki-karti small { color: #E1F5EE; font-size: 13px; line-height: 1.4; }
.kroki-karti .rozet { background: #fff; color: #0F6E56; flex: none; }
/* Krokiden banyo penceresi: solda kroki fotoğrafı, sağda okunan ölçüler (dar ekranda alt alta) */
.kroki-alan { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; margin-top: 8px; }
.kroki-alan > img { width: 100%; max-height: 64vh; object-fit: contain; border-radius: 10px; background: #f3f3f0; border: 1px solid var(--cizgi, #ddd); }
.kroki-bekle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 200px; font-weight: 600; }
.kroki-bekle .render-donen { border-color: rgb(15 110 86 / 0.25); border-top-color: #0F6E56; }
.kroki-alt-baslik { margin: 12px 0 4px; font-size: 14px; }
.kroki-aciklik { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr 1fr 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.kroki-aciklik-baslik { margin-bottom: 2px; }
.kroki-dikkatli { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #f3f7f5; }
.kroki-kose { display: grid; grid-template-columns: 1.4fr 1fr 1fr 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.kroki-kose input, .kroki-kose select { min-width: 0; width: 100%; }
.kroki-pencere-ek { grid-column: 1 / -1; display: flex; gap: 8px; margin-bottom: 4px; }
.kroki-pencere-ek[hidden] { display: none; }
.kroki-pencere-ek label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gri, #667); }
.kroki-pencere-ek input { width: 80px; }
.kroki-aciklik input, .kroki-aciklik select { min-width: 0; width: 100%; }
[data-kroki-icerik] .alan-satiri { margin-bottom: 8px; }
[data-kroki-icerik] label[hidden] { display: none; }
@media (max-width: 720px) { .kroki-alan { grid-template-columns: 1fr; } .kroki-alan > img { max-height: 30vh; } }
.acilis-secimleri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.acilis-secim {
  border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 12px 6px 10px; background: var(--yuzey); cursor: pointer;
  display: grid; justify-items: center; gap: 8px; font-size: 13px; color: var(--yazi);
}
.acilis-secim:hover { border-color: var(--vurgu); }
.acilis-secim.aktif { border-color: var(--vurgu); background: var(--vurgu-acik); color: var(--vurgu); font-weight: 600; }
.acilis-secim svg { width: 64px; height: 50px; fill: #fff; stroke: currentColor; stroke-width: 3; }
.acilis-secim svg .dolu { fill: #d5ab70; stroke: none; }
@media (max-width: 560px) { .acilis-secimleri { grid-template-columns: 1fr 1fr; } }

/* Müşterinin seramik denemesi: alttaki çubukta sadece Duvar / Zemin, şeritte sadece seramik listesi */
body.musteri-modu.musteri-deneme #alt-cubuk { display: flex !important; }
body.musteri-modu.musteri-deneme #urun-seridi:not([hidden]) { display: block !important; }
body.musteri-modu #alt-cubuk > :not([data-alt-hedef]) { display: none !important; }
body.musteri-modu #duvar-ayarlari, body.musteri-modu #doseme-sec, body.musteri-modu #sekme-seramik .ipucu-kap,
body.musteri-modu .kart-duzenle, body.musteri-modu .kart-sil { display: none !important; }
#iletisim-icerik .buton-satiri .buton { flex: 1; }
.gercekci-kalite { flex-direction: row; align-items: center; gap: 6px; margin: 0 0 0 auto; }

/* Raporlar */
.rapor-donem { flex-direction: row; align-items: center; gap: 8px; max-width: 320px; }
.rapor-kartlari { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.rapor-kartlari > div { background: var(--zemin); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.rapor-kartlari span { color: var(--soluk); font-size: 12px; }
.rapor-kartlari strong { font-size: 17px; }
.rapor-durum { display: flex; flex-wrap: wrap; gap: 6px; }
.rapor-durum .durum-sec { border: 1px solid var(--cizgi); }
.rapor-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.rapor-tablo th { text-align: right; color: var(--soluk); font-weight: 600; font-size: 12px; padding: 6px; border-bottom: 1px solid var(--cizgi); }
.rapor-tablo td { text-align: right; padding: 6px; border-bottom: 1px solid var(--cizgi); }
.rapor-tablo td:first-child, .rapor-tablo th:first-child { text-align: left; }

/* Dekor şeridi ve duvar açılımı */
.serit-ayari { display: grid; gap: 6px; margin: 4px 0 10px; }
/* Tavan ve kapı rengi: sabit renk düğmeleri */
.tavan-renk, .kapi-renk { display: grid; gap: 6px; margin-bottom: 8px; }
.tavan-renk > span, .kapi-renk > span { font-size: 12px; color: var(--soluk); }
.kapi-renk .renk-paleti .renk { width: 22px; height: 22px; }
.serit-ayari .alan-satiri label { margin: 0; }
.acilim-cizim { margin: 12px 0 8px; background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; padding: 6px; }
.acilim-cizim svg { width: 100%; height: auto; max-height: 56vh; display: block; }
.acilim-ozet { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
.acilim-ozet .rozet { font-weight: 600; }
.acilim-tam { background: #f4efe4; color: #5b4a2a; }
.acilim-kesik { background: #ffd59e; color: #7a4a00; }

/* Hareketli ipuçları */
.ipucu-karti {
  position: absolute; left: 14px; bottom: 112px; width: 280px; z-index: 16; background: var(--yuzey); border-radius: 14px;
  box-shadow: var(--golge-buyuk); overflow: hidden; animation: kart-gir 0.2s ease;
}
.ipucu-ic { padding: 12px 14px; }
.ipucu-ic strong { display: block; margin-bottom: 4px; }
.ipucu-ic p { margin: 0; font-size: 12.5px; color: #4a525d; line-height: 1.45; }
.ipucu-alt { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.ipucu-alt .onay-kutusu { margin: 0; font-size: 12px; color: var(--soluk); }
.ipucu-alt .buton { padding: 5px 12px; }
.noktalar { display: flex; gap: 4px; }
.noktalar i { width: 6px; height: 6px; border-radius: 50%; background: var(--cizgi); }
.noktalar i.aktif { background: var(--vurgu); }
/* Küçük canlandırma: oda, alttaki çubuk, ürün kartı, fiyat kutusu ve imleç */
.ipucu-anim { height: 112px; background: #f6f7f9; position: relative; overflow: hidden; }
.ipucu-anim > * { position: absolute; display: block; }
.a-oda { left: 70px; top: 12px; width: 140px; height: 70px; border: 3px solid #2f3742; background: #fff; }
.a-oda i { position: absolute; left: 0; right: 0; top: 0; height: 22px; background: #eceae5; }
.a-cubuk { left: 0; right: 0; bottom: 0; height: 18px; background: #e3e6eb; }
.a-kart { width: 30px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, #e9d3b0, #c99a5b); left: 24px; top: 88px; opacity: 0; }
.a-fiyat { right: 10px; bottom: 26px; width: 46px; height: 26px; border-radius: 6px; background: var(--vurgu); opacity: 0; }
.a-imlec { width: 16px; height: 16px; left: 36px; top: 98px; }
.anim-urun .a-kart { opacity: 1; animation: a-tasi 3s ease-in-out infinite; }
.anim-urun .a-imlec { animation: a-tasi 3s ease-in-out infinite; }
@keyframes a-tasi { 0%, 15% { transform: none; } 60%, 90% { transform: translate(118px, -54px); } 100% { transform: translate(118px, -54px); opacity: 0; } }
.anim-seramik .a-imlec { animation: a-seramik-imlec 3s ease-in-out infinite; }
.anim-seramik .a-oda i { animation: a-seramik-duvar 3s ease-in-out infinite; }
@keyframes a-seramik-imlec { 0%, 20% { transform: none; } 45%, 100% { transform: translate(80px, -64px); } }
@keyframes a-seramik-duvar { 0%, 50% { background: #eceae5; } 60%, 100% { background: repeating-linear-gradient(90deg, #d8cbb3 0 13px, #c3b498 13px 14px); } }
.anim-ayar .a-kart { opacity: 1; left: 120px; top: 38px; animation: a-sec 3s ease-in-out infinite; }
.anim-ayar .a-imlec { animation: a-ayar-imlec 3s ease-in-out infinite; }
.anim-ayar .a-fiyat { right: 8px; top: 8px; bottom: auto; width: 56px; height: 40px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); animation: a-belir 3s ease-in-out infinite; }
@keyframes a-ayar-imlec { 0%, 15% { transform: none; } 45%, 100% { transform: translate(98px, -52px); } }
@keyframes a-sec { 0%, 50% { box-shadow: none; } 55%, 100% { box-shadow: 0 0 0 2px var(--vurgu); } }
@keyframes a-belir { 0%, 55% { opacity: 0; } 65%, 100% { opacity: 1; } }
.anim-teklif .a-fiyat { animation: a-nabiz 1.5s ease-in-out infinite; opacity: 1; }
.anim-teklif .a-imlec { animation: a-teklif-imlec 3s ease-in-out infinite; }
@keyframes a-nabiz { 50% { transform: scale(1.12); } }
@keyframes a-teklif-imlec { 0%, 15% { transform: none; } 50%, 100% { transform: translate(196px, -54px); } }
@media (prefers-reduced-motion: reduce) { .ipucu-anim * { animation: none !important; } }

/* Pencere: yuvarlak köşe, sabit başlık ve alt düğmeler, uzun içerik kendi içinde kayar */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28); color: var(--yazi); }
dialog::backdrop { background: rgba(20, 25, 32, 0.45); backdrop-filter: blur(2px); }
.pencere-ic { padding: 0 22px 18px; max-height: calc(100vh - 32px); overflow-y: auto; }
.pencere-baslik { position: sticky; top: 0; z-index: 2; background: var(--yuzey); display: flex; justify-content: space-between; align-items: center; margin: 0 -22px 12px; padding: 16px 22px 12px; border-bottom: 1px solid var(--cizgi); }
.pencere-baslik h3 { margin: 0; font-size: 17px; font-weight: 600; }
.pencere-baslik .ikon-buton { width: 30px; height: 30px; border-radius: 50%; background: var(--zemin); display: grid; place-items: center; padding: 0; }
.pencere-alt { position: sticky; bottom: -18px; z-index: 2; background: var(--yuzey); display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 14px -22px -18px; padding: 12px 22px; border-top: 1px solid var(--cizgi); }
.pencere-ic h4 { margin: 16px 0 8px; }
.pencere-ic textarea { width: 100%; box-sizing: border-box; }
.pencere-ic input:not([type=checkbox]):not([type=radio]):not([type=color]), .pencere-ic select, .pencere-ic textarea { border-radius: 9px; padding: 8px 10px; }

/* İnternet bağlantısı şeridi */
.baglanti-seridi { text-align: center; font-size: 13px; padding: 7px 12px; }
.baglanti-seridi.yok { background: #fff4d6; color: #6b4700; }
.baglanti-seridi.geldi { background: #e6f6ec; color: #1d7a46; }
#yedek-seridi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
#yedek-seridi[hidden] { display: none; }
#yedek-seridi .buton { padding: 4px 12px; font-size: 13px; }

/* Yönetim: sorun bildirimleri */
.sorun-kutusu { max-width: 1200px; margin: 16px auto; background: var(--yuzey); border-radius: 12px; padding: 12px 16px; }
.sorun-kutusu summary { cursor: pointer; font-weight: 600; }
.sorun { border-top: 1px solid var(--cizgi); padding: 8px 0; }
.sorun p { margin: 4px 0; white-space: pre-wrap; }
.secenekler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.hizmetler { border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 8px; }
.hizmetler legend { font-size: 13px; color: var(--soluk); padding: 0 4px; }
.hizmet-satiri { display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: center; }
.hizmet-satiri input[type=number]:disabled { opacity: .45; cursor: not-allowed; }
.yukle-grup { margin: 16px 0 -4px; font-size: 13px; font-weight: 600; color: var(--soluk, #667); }
.secenek {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey); cursor: pointer;
}
.secenek:hover:not(:disabled) { border-color: var(--vurgu); box-shadow: var(--golge); }
.secenek:disabled { cursor: not-allowed; background: #fafbfc; }
.secenek strong { font-size: 14px; }
.secenek span { font-size: 12px; color: var(--soluk); }
.secenek-ikon { font-size: 22px !important; color: var(--vurgu) !important; }
.secenek .rozet { position: absolute; top: 10px; right: 10px; }

/* Tablet ve telefon */
@media (max-width: 1100px) {
  .sol { width: 270px; }
  body.sol-kapali .sol { margin-left: -270px; }
  .panel.sag { width: 270px; }
  /* Dar ekranda yardım kartı ve ipucu yazısı üste alınır (alttaki fiyat kartıyla çakışmasın) */
  .ipucu-karti { top: 14px; bottom: auto; width: 260px; }
  .ipucu-anim { height: 84px; }
  .urun-seridi .sekme-icerik:not([hidden]) { grid-template-columns: 200px minmax(0, 1fr); }
  .sahne-ipucu { top: 14px; bottom: auto; left: 14px; transform: none; white-space: normal; border-radius: 12px; max-width: calc(100% - 310px); }
  body.sol-kapali .ipucu-karti, body.sol-kapali .sahne-ipucu { top: 58px; }
  .sahne-alani:has(.ipucu-karti:not([hidden])) .sahne-ipucu { display: none; }
}
/* Dik tablet: üst çubuk tek satıra sığsın. Firma adı kısalır, Gerçekçi düğmesinde yalnızca simge kalır. */
@media (min-width: 721px) and (max-width: 1000px) {
  .ust { gap: 10px; padding: 0 10px; }
  .marka > div { min-width: 0; }
  .marka strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gorunum-sec button { padding: 6px 10px; }
  .ust-butonlar { flex: 0 1 auto; min-width: 0; }
  .musteri-dugme { min-width: 0; max-width: 200px; }
  .gercekci-dugme span { display: none; }
  .gercekci-dugme { padding: 0 10px; }
  .paylas-dugme span { display: none; }
  .ayrac { display: none; }
}
@media (max-width: 720px) {
  .ust { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  /* Telefonda üst düğmeler alt alta değil, tam genişlikte bir iki satıra dizilir */
  .ust { padding: 8px 12px; }
  .ust-butonlar { flex-basis: 100%; justify-content: flex-start; min-width: 0; }
  .musteri-dugme { flex: 1; max-width: none; }
  /* Telefonda uleso Render düğmesinde yalnızca simge kalır; yoksa sayfa ekrandan taşar ve her şey küçülür */
  .gercekci-dugme span { display: none; }
  .gercekci-dugme { padding: 0 10px; }
  .paylas-dugme span { display: none; }
  .musteri-dugme .avatar { display: none; }
  /* Telefonda alt alta: önce banyo, sonra kartlar, en altta banyo ayarları */
  body { height: auto; min-height: 100%; overflow: auto; }
  .duzen { flex-direction: column; }
  .sahne-alani { order: -1; flex: none; height: 68vh; }
  .sol { width: auto; margin-left: 0 !important; border-right: 0; overflow: visible; }
  .sol-baslik #sol-kapat, .sol-ac { display: none !important; }
  .panel.sag { position: static; width: auto; padding: 12px; pointer-events: auto; order: 0; }
  .sol { order: 1; }
  .ayrac { display: none; }
  .musteri-dugme { min-width: 0; }
  .gorunum-sec button { padding: 6px 10px; }
  .fiyat-karti { margin-top: 0; }
  .urun-seridi .sekme-icerik:not([hidden]) { grid-template-columns: 1fr; }
  .serit-ayarlar { max-height: 22vh; }
  .ipucu-karti { top: auto; bottom: 66px; width: calc(100% - 28px); }
  .plan-araclari { max-width: calc(100% - 20px); }
  .ipucu-anim { display: none; }
  .secenekler { grid-template-columns: 1fr; }
  .sahne-ipucu { top: auto; bottom: 66px; width: max-content; left: auto; right: 12px; max-width: calc(100% - 110px); }
}

/* Fiyatsız müşteri linki: kartlarda fiyat yazmaz (fiyatlar linkin içinde de yok). */
.fiyatsiz .fiyat { display: none; }

/* Müşteriler penceresi: tasarım dosyasından açma düğmesi */
.dosyadan-ac { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; cursor: pointer; }

/* Ayarlar penceresi: Firma / Program sekmeleri */
.ayar-sekmeleri { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); margin: -4px 0 14px; }
.ayar-sekmeleri button { border: 0; background: none; padding: 8px 14px; font: inherit; color: var(--soluk); border-bottom: 2px solid transparent; cursor: pointer; }
.ayar-sekmeleri button.aktif { color: var(--vurgu); border-bottom-color: var(--vurgu); font-weight: 600; }

/* Sol panel: kapı, pencere, niş tek satır (tıklayınca pencerede düzenlenir) */
.oge-satiri { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: 10px; margin-bottom: 8px; cursor: pointer; background: var(--yuzey); }
.oge-satiri:hover, .oge-satiri:focus-visible { border-color: var(--vurgu); }
.oge-simge { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--zemin); display: grid; place-items: center; font-size: 16px; }
.oge-yazi { flex: 1; min-width: 0; display: grid; }
.oge-yazi b { font-size: 13px; }
.oge-yazi small { color: var(--soluk); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ayarlar > Ürünlerim: Ürünler / Seramik seçimi küçük düğmeler */
.katalog-sekmeleri { display: inline-flex; gap: 4px; background: var(--zemin); border-radius: 10px; padding: 3px; margin-bottom: 8px; }
.katalog-sekmeleri button { border: 0; background: none; border-radius: 8px; padding: 6px 14px; font: inherit; color: var(--soluk); cursor: pointer; }
.katalog-sekmeleri button.aktif { background: var(--yuzey); color: var(--yazi); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
[data-katalog-ara] { width: 100%; margin-bottom: 10px; }
.katalog-satiri { cursor: default; }
.katalog-satiri:hover { border-color: var(--cizgi); }
.katalog-satiri img { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--zemin); }
.katalog-satiri .buton { flex: none; padding: 6px 12px; }
[data-katalog-liste] { max-height: 60vh; overflow-y: auto; }

/* Müşteri bilgileri penceresi */
dialog.orta { width: min(760px, calc(100vw - 32px)); }
.kisi-firma { display: inline-flex; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.kisi-firma button { border: 0; background: var(--yuzey); padding: 8px 18px; font: inherit; cursor: pointer; color: var(--soluk); }
.kisi-firma button.aktif { background: color-mix(in srgb, var(--vurgu) 10%, white); color: var(--vurgu); font-weight: 600; box-shadow: inset 0 0 0 2px var(--vurgu); border-radius: 10px; }
.musteri-ust { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.musteri-sol, .musteri-sag { display: grid; gap: 10px; align-content: start; }
@media (max-width: 640px) { .musteri-ust { grid-template-columns: 1fr; } }
.zorunlu { color: var(--tehlike); }
input.hatali { border-color: var(--tehlike); background: #fdf3f3; }
.no-kutusu { position: relative; display: block; }
.no-kutusu input { width: 100%; padding-right: 28px; }
.no-kutusu span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--soluk); cursor: help; }
.musteri-sekmeleri { margin-top: 10px; overflow-x: auto; }
.coklu-satir { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.coklu-satir input { flex: 1 1 110px; min-width: 0; }
.coklu-satir select { flex: 0 0 110px; }
.adres-satiri .genis-alan { flex-basis: 100%; }
.metin-dugme { border: 0; background: none; color: var(--vurgu); padding: 2px 0; font: inherit; cursor: pointer; }
[data-ayar-icerik] h4 { margin: 12px 0 6px; font-size: 13px; }
.uyari-kutusu { background: #fff7e6; border: 1px solid #f3d19c; color: #6b3d06; border-radius: 10px; padding: 10px 12px; margin-top: 12px; font-size: 13px; }
.benzer-satir { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border-radius: 8px; padding: 6px 9px; margin-top: 6px; }
.buton.kucuk { padding: 4px 10px; font-size: 12px; }
.musteri-no { display: inline-block; font-size: 11px; font-weight: 600; color: var(--soluk); background: var(--zemin); border-radius: 6px; padding: 1px 6px; margin-right: 4px; }
dialog.orta { overflow-x: hidden; }

/* Hesabım: güvenilir cihazlar */
.cihaz-satiri { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 10px; margin-top: 8px; color: var(--yazi); }
.cihaz-satiri span { color: var(--soluk); }

/* uleso Render: ekrandaki görünüm, render gelince onun yerine sonuç; beklerken üstünde sayaç. */
.render-alan { position: relative; margin: 10px 0; background: #111; border-radius: 10px; overflow: hidden; }
.render-alan img, .render-alan video { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.render-alan img[hidden], .render-alan video[hidden] { display: none; }
.render-secimler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.render-secimler:empty { display: none; }
/* Fotoğraf / 360° seçimi: üstteki uleso Render düğmesinin yeşiliyle iki seçim kartı. Seçilen kart koyu yeşil, parlak
   ve gölgeli; üstünden bir kez ışık geçer. Seçilmeyen kart beyaz, simgesi açık yeşil yuvarlakta. */
.render-turler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.render-tur {
  --render-yesil: #0F6E56;
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: start; cursor: pointer;
  font: inherit; color: var(--yazi); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); transition: background .25s, border-color .25s, box-shadow .25s, transform .2s, color .25s;
}
.render-tur:hover:not(:disabled):not(.aktif) { border-color: color-mix(in srgb, var(--render-yesil) 45%, var(--cizgi)); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08); }
.render-tur:focus-visible { outline: 2px solid var(--render-yesil); outline-offset: 2px; }
.render-tur:disabled { cursor: not-allowed; }
.render-tur:disabled:not(.aktif) { opacity: 0.55; }
.rt-simge {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px;
  color: var(--render-yesil); background: color-mix(in srgb, var(--render-yesil) 10%, #fff); transition: background .25s, color .25s;
}
.rt-simge svg.i { width: 24px; height: 24px; stroke-width: 1.6; }
.rt-yazi { display: grid; gap: 3px; min-width: 0; flex: 1; }
.rt-yazi strong { font-size: 15px; letter-spacing: -0.01em; }
.rt-yazi small { font-size: 12px; color: var(--soluk); line-height: 1.4; transition: color .25s; }
.rt-isaret {
  width: 22px; height: 22px; flex: none; align-self: flex-start; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--cizgi); color: transparent; transition: background .25s, border-color .25s, color .25s;
}
.rt-isaret svg.i { width: 13px; height: 13px; stroke-width: 3; }
.render-tur.aktif {
  color: #fff; border-color: transparent;
  background: radial-gradient(120% 140% at 0% 0%, #1c8f71 0%, #0F6E56 45%, #0a4a3a 100%);
  box-shadow: 0 10px 24px -8px rgb(15 110 86 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.render-tur.aktif::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.22) 50%, transparent 65%);
  transform: translateX(-100%); animation: rt-isik 1.1s .1s ease-out;
}
@keyframes rt-isik { to { transform: translateX(100%); } }
.render-tur.aktif .rt-simge { color: #fff; background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); }
.render-tur.aktif .rt-yazi small { color: rgb(255 255 255 / 0.78); }
.render-tur.aktif .rt-isaret { background: #fff; border-color: #fff; color: var(--render-yesil); }
.buton.ana.render-ana { background: #0F6E56; border-color: #0F6E56; }
/* Render penceresinin alt satırı: solda "Bilgisayarda hazırla", sağda indir/video/Render al. Render bitince düğme
   sayısı 5'e çıkıyor; dar ekranda yana taşmasın diye iki sütuna dizilir: üstte tam genişlik Render al, en altta
   bilgisayarda hazırla. */
.render-alt { flex-wrap: wrap; justify-content: flex-end; }
.render-alt > span { flex: 1; }
@media (max-width: 700px) {
  .render-alt { display: grid; grid-template-columns: 1fr 1fr; }
  .render-alt > span { display: none; }
  .render-alt .buton { white-space: normal; justify-content: center; text-align: center; }
  .render-alt [data-baslat] { grid-column: 1 / -1; order: -1; }
  .render-alt [data-isik] { grid-column: 1 / -1; order: 9; }
}
@media (max-width: 520px) { .render-turler { gap: 8px; } .render-tur { padding: 10px; gap: 10px; } .rt-simge { width: 38px; height: 38px; } }
/* 360° görüntüleyici: sürükleyerek etrafa bakılır; tam ekranda bütün ekranı kaplar */
.kure-alan { position: relative; height: min(62vh, 560px); cursor: grab; touch-action: none; user-select: none; }
.kure-alan[hidden] { display: none; }
.kure-alan:active { cursor: grabbing; }
.kure-alan:fullscreen { height: 100vh; width: 100vw; background: #000; }
.kure-tuval { display: block; width: 100%; height: 100%; }
.kure-ipucu { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgb(0 0 0 / 0.5); color: #fff; font-size: 13px; pointer-events: none; white-space: nowrap; }
.kure-tam { position: absolute; top: 10px; right: 10px; padding: 6px 12px; border: 0; border-radius: 8px; background: rgb(0 0 0 / 0.55); color: #fff; font-weight: 600; cursor: pointer; }
.kure-tam:hover { background: rgb(0 0 0 / 0.75); }
/* Render beklerken: kâğıt üstünde banyonun karakalem çizimi soldan sağa çizilir; sonra renkler yumuşak bir fırça
   geçişiyle gelir, bir süre durur, yine karakaleme döner (render bitene kadar). Altta cam kutuda aşama yazısı.
   Videoda yalnız karartılmış resim ve yazı. Çizim js'de 3D görüntüden üretilir (karakalemCiz). */
.render-bekle { position: absolute; inset: 0; overflow: hidden; background: #0d1116; color: #fff; z-index: 2; }
.render-bekle[hidden] { display: none; }
.rb-dijital, .rb-gercek { position: absolute; inset: 0; background: center / contain no-repeat; }
.render-bekle.kure .rb-dijital, .render-bekle.kure .rb-gercek { background-size: cover; }
.rb-dijital { filter: brightness(0.5); }
.rb-gercek, .rb-cizgi { display: none; }
.render-bekle.tarama { background: #f5f3ee; }
.render-bekle.tarama .rb-dijital {
  filter: contrast(1.08); -webkit-mask: linear-gradient(90deg, #000 0 40%, transparent 60% 100%) 100% 0 / 300% 100% no-repeat;
  mask: linear-gradient(90deg, #000 0 40%, transparent 60% 100%) 100% 0 / 300% 100% no-repeat;
  animation: rb-firca 1.8s cubic-bezier(.45, 0, .25, 1) forwards;
}
.render-bekle.tarama .rb-gercek {
  display: block; opacity: 0; -webkit-mask: linear-gradient(90deg, #000 0 40%, transparent 60% 100%) 100% 0 / 300% 100% no-repeat;
  mask: linear-gradient(90deg, #000 0 40%, transparent 60% 100%) 100% 0 / 300% 100% no-repeat;
  animation: rb-renk 6s 1.8s ease-in-out infinite;
}
@keyframes rb-firca { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes rb-renk {
  0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 1; }
  50%, 80% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; }
  100% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 0; }
}
.rb-bilgi {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px);
  padding: 8px 16px; border-radius: 99px; background: rgb(10 14 20 / 0.62); border: 1px solid rgb(255 255 255 / 0.14); backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.rb-bilgi [data-asama] { overflow: hidden; text-overflow: ellipsis; }
.rb-nokta { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #5eead4; box-shadow: 0 0 0 0 rgb(94 234 212 / 0.6); animation: rb-nabiz 1.6s ease-out infinite; }
@keyframes rb-nabiz { to { box-shadow: 0 0 0 8px rgb(94 234 212 / 0); } }
.rb-sayac { opacity: 0.65; font-variant-numeric: tabular-nums; }
.rb-sayac:empty { display: none; }
/* Sonuç gelince: karakalem çizim yumuşak bir fırça geçişiyle soldan sağa silinir, altından gerçekçi resim çıkar */
.render-gecis { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.rg-resim {
  position: absolute; inset: 0; background: #f5f3ee center / contain no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent 0 40%, #000 60% 100%) 100% 0 / 300% 100% no-repeat;
  mask: linear-gradient(90deg, transparent 0 40%, #000 60% 100%) 100% 0 / 300% 100% no-repeat;
  animation: rb-firca 1.6s cubic-bezier(.45, 0, .25, 1) forwards;
}
.rg-cizgi { display: none; }
.render-gecis.kure .rg-resim { background-size: cover; }
@media (prefers-reduced-motion: reduce) {
  .render-bekle.tarama .rb-dijital { animation: none; -webkit-mask: none; mask: none; }
  .render-bekle.tarama .rb-gercek, .render-gecis { display: none; animation: none; }
  .render-tur.aktif::after { animation: none; }
}
.render-donen { width: 34px; height: 34px; border: 3px solid rgb(255 255 255 / 0.3); border-top-color: #fff; border-radius: 50%; animation: render-don 0.9s linear infinite; }
@keyframes render-don { to { transform: rotate(360deg); } }
.dil-satiri { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--soluk); }
.dil-satiri select { width: auto; padding: 2px 6px; font-size: 12px; }

/* Fatura bilgisi + indirim kodu penceresi (paket seçerken) */
.fatura-penceresi form { display: grid; gap: 8px; padding: 20px 22px; }
.fatura-penceresi h3 { margin: 0; }
.fatura-penceresi label { display: grid; gap: 4px; font-size: 14px; }
.fatura-penceresi label[hidden] { display: none; }
.fatura-penceresi input, .fatura-penceresi select, .fatura-penceresi textarea { padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 10px; font: inherit; }
.fatura-penceresi .fatura-tip { display: flex; gap: 18px; }
.fatura-penceresi .fatura-tip label { display: flex !important; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: inherit; margin: 0; cursor: pointer; }
.fatura-penceresi .fatura-tip input { width: auto; margin: 0; }
.fatura-penceresi { overflow-y: auto; }
.fatura-penceresi .indirim-satir { display: flex; gap: 8px; }
.fatura-penceresi .indirim-satir input { flex: 1; text-transform: uppercase; }
.fatura-penceresi .hata { color: #b42318; margin: 0; }
.fatura-penceresi .dugmeler { display: flex; justify-content: flex-end; gap: 8px; }

/* Yardım ve sık sorulanlar penceresi */
.yardim-penceresi .yardim-ara { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 12px; font: inherit; margin: 4px 0 10px; }
.yardim-penceresi .yardim-liste { max-height: min(60vh, 520px); overflow-y: auto; padding-right: 4px; }
.yardim-penceresi .yardim-liste h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.yardim-penceresi details { border-bottom: 1px solid rgba(0,0,0,.07); padding: 9px 0; }
.yardim-penceresi summary { cursor: pointer; font-weight: 600; }
.yardim-penceresi details p { margin: 6px 0 2px; line-height: 1.5; }
.yardim-penceresi .yardim-alt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.yardim-penceresi .yardim-alt a.buton { text-decoration: none; color: inherit; }

/* Tavsiye (davet) bölümü — Hesabım */
.davet-kutu { margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: #e8f6f0; }
.davet-kutu h4 { margin: 0 0 4px; }
.davet-satir { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.davet-satir input { flex: 1 1 260px; min-width: 0; padding: 8px 10px; border: 1px solid #c9ddd4; border-radius: 10px; font: inherit; background: #fff; }
.davet-satir a.buton { text-decoration: none; color: inherit; }
.fatura-penceresi .zorunlu { color: #b42318; font-weight: 700; }
.fatura-penceresi .zorunlu-not { margin: 0; }
.fatura-penceresi .alan-hata { color: #b42318; font-size: 12px; min-height: 0; }
.fatura-penceresi .alan-hata:empty { display: none; }
.fatura-penceresi label.hatali input, .fatura-penceresi label.hatali textarea { border-color: #b42318; background: #fff5f4; }