/* Insigne Kolaj — "Studio Light v2".
   Token'lar insigne-personalizer/editor/editor.css ile BİREBİR aynı: kolaj
   mağazada aynı sayfada yaşayacak, iki farklı dil konuşamaz. Koyu ton Ali
   tarafından reddedildi (2026-07-27) — açık, güven veren, canlı. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  --paper:#faf9f7; --card:#ffffff;
  --ink:#16151a; --ink2:#54535c; --ink3:#9694a0;
  --line:#eceae6; --line2:#dedbd4;
  --teal:#0D9488; --teal-d:#0B7C71;
  --cyan:#0891B2; --amber:#ffbb49; --green:#1faa6b; --gold:#c9986a;
  --teal-soft:rgba(13,148,136,.07); --ring:rgba(13,148,136,.30);
  --sh-card:0 2px 10px rgba(22,21,26,.04),0 12px 32px -18px rgba(22,21,26,.10);
  --sh-frame:0 30px 55px -22px rgba(22,21,26,.35),0 4px 12px rgba(22,21,26,.10);
  --disp:'Space Grotesk','Montserrat',system-ui,sans-serif;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --ust:60px; --yan:308px; --sekme:0px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--paper);color:var(--ink);font:14px/1.55 var(--sans);overscroll-behavior:none}
button,input,select,textarea{font:inherit;color:var(--ink)}
h3{margin:0;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
[hidden]{display:none!important}

/* ── üst çubuk ───────────────────────────────────────────── */
.ust{height:var(--ust);display:flex;align-items:center;gap:14px;padding:0 16px;
  background:var(--card);border-bottom:1px solid var(--line);position:relative;z-index:30}
.ust::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--teal),var(--cyan) 45%,var(--amber))}
.marka{font:700 18px/1 var(--disp);letter-spacing:-.01em;white-space:nowrap}
.marka span{color:var(--teal);font-weight:500;margin-left:6px}
.urun-ozet{color:var(--ink2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1}
.urun-ozet b{color:var(--ink);font-weight:600}
.ust-sag{display:flex;gap:8px;margin-left:auto;align-items:center}

.dugme{background:var(--card);border:1px solid var(--line2);color:var(--ink);
  padding:9px 15px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap;font-weight:500}
.dugme:hover:not(:disabled){border-color:var(--teal);color:var(--teal-d);transform:translateY(-1px)}
.dugme:disabled{opacity:.42;cursor:not-allowed}
.dugme.birincil{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600;
  box-shadow:0 6px 16px -8px rgba(13,148,136,.7)}
.dugme.birincil:hover:not(:disabled){background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.dugme.minik{padding:6px 11px;font-size:12.5px;border-radius:8px}
.dugme.sade{background:transparent;border-color:transparent;color:var(--ink2)}
.dugme.sade:hover{background:var(--teal-soft);border-color:transparent}
.dugme.sade.etkin{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-d)}
.dugme.tehlike:hover{border-color:#d4564a;color:#c4463a}

/* ── düzen ───────────────────────────────────────────────── */
.govde{display:flex;height:calc(100% - var(--ust) - var(--sekme));position:relative}
.yan{width:var(--yan);flex:0 0 var(--yan);background:var(--paper);overflow-y:auto;
  overscroll-behavior:contain;padding:14px 14px 30px}
.yan.sol{border-right:1px solid var(--line)}
/* ⚠ 13 şablon kartı yan yana sığmıyor ve "Fotoğraflar" bölümünü ekranın çok
   aşağısına itiyordu (Ali 2026-10-01): müşteri fotoğraf yükleyeceği yeri
   bulamıyor. Şablon ızgarası artık KENDİ İÇİNDE kayıyor; böylece yükleme
   alanı her zaman görünür kalıyor. Yükseklik ekranla ölçeklenir. */
.sablon-izgara{max-height:min(46vh,430px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px}
.yan.sag{border-left:1px solid var(--line)}
.bolum{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin-bottom:12px;box-shadow:var(--sh-card)}
/* Başlık + sayaç + eylem düğmesi 248px'lik panele sığmıyordu ve düğme kartın
   dışına taşıyordu. Sığmadığında alt satıra insin. */
.bolum-bas{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.bolum-bas h3{flex:1 1 auto;min-width:0}
.bolum-bas .dugme{margin-left:auto;max-width:100%}
.say{color:var(--teal-d);font:600 11px/1 var(--sans);text-transform:none;letter-spacing:0}

/* ── segment ─────────────────────────────────────────────── */
.segment{display:flex;background:var(--paper);border:1px solid var(--line2);
  border-radius:10px;padding:3px;gap:2px;max-width:100%;overflow:hidden}
.segment.tam{width:100%;margin-bottom:12px}
/* 4 düğme 248px'lik panele sığmıyordu ("Fotoğraf" kartın dışına taşıyordu):
   min-width:0 olmadan flex öğeleri içeriğinden küçülmez. */
.segment button{flex:1 1 0;min-width:0;background:none;border:0;padding:7px 5px;
  border-radius:7px;cursor:pointer;color:var(--ink2);font-size:12px;font-weight:500;
  transition:.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.segment button:hover{color:var(--ink)}
.segment button.etkin{background:var(--card);color:var(--teal-d);font-weight:600;
  box-shadow:0 1px 3px rgba(22,21,26,.08)}

/* ── şablon kartları ─────────────────────────────────────── */
.sablon-izgara{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sablon-kart{background:var(--card);border:1.5px solid var(--line2);border-radius:12px;
  padding:9px;cursor:pointer;transition:.15s;position:relative;text-align:left}
.sablon-kart:hover{border-color:var(--teal);transform:translateY(-1px);box-shadow:var(--sh-card)}
.sablon-kart.etkin{border-color:var(--teal);background:var(--teal-soft);
  box-shadow:0 0 0 3px var(--ring)}
.sablon-kart svg{width:100%;height:auto;display:block;margin-bottom:7px;border-radius:6px}
.sablon-kart b{display:block;font:600 12px/1.3 var(--sans)}
.sablon-kart small{color:var(--ink3);font-size:10.5px}
.rozet-etiket{position:absolute;top:6px;right:6px;background:var(--amber);color:#3d2c00;
  font:700 8.5px/1 var(--sans);padding:3px 6px;border-radius:5px;letter-spacing:.05em}

/* ── fotoğraf şeridi ─────────────────────────────────────── */
.yukle-alan{display:block;border:1.5px dashed var(--line2);border-radius:12px;
  padding:18px 12px;text-align:center;cursor:pointer;transition:.15s;margin-bottom:12px;
  background:var(--paper)}
.yukle-alan:hover,.yukle-alan.uzerinde{border-color:var(--teal);background:var(--teal-soft)}
.yukle-ikon{width:34px;height:34px;line-height:31px;border-radius:50%;margin:0 auto 7px;
  border:1.5px solid var(--teal);color:var(--teal);font-size:19px;background:var(--card)}
.yukle-alan b{display:block;font-size:13px;font-weight:600}
.yukle-alan small{color:var(--ink3);font-size:11px}
.serit{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.serit-oge{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;cursor:grab;
  border:2px solid var(--line);background:var(--paper)}
.serit-oge img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.serit-oge.kullanimda{border-color:var(--teal)}
.serit-oge.suruklenen{opacity:.4}
.serit-oge .kullanim{position:absolute;bottom:0;left:0;right:0;background:rgba(13,148,136,.92);
  font:600 9.5px/1 var(--sans);text-align:center;padding:4px 2px;color:#fff}
.serit-oge .sil{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.94);border:1px solid var(--line2);color:var(--ink2);
  font-size:13px;line-height:17px;padding:0;cursor:pointer;opacity:0;transition:.15s}
.serit-oge:hover .sil{opacity:1}
.serit-oge .sil:hover{color:#c4463a;border-color:#d4564a}

/* ── sahne ───────────────────────────────────────────────── */
/* ── STÜDYO SAHNESİ ──────────────────────────────────────────────
   Gerçek bir çekim stüdyosu: kesintisiz siklorama fonu, yumuşak ufuk
   kıvrımı, zeminde hafif turkuaz yansıma ve eserin altında temas gölgesi.
   Krem/bej DEĞİL — beyaz + turkuaz ekseni (Ali, 2026-09-16). */
.sahne{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px;min-width:0;position:relative;isolation:isolate;
  background:
    /* tepe ışığı: eserin üstüne düşen yumuşak huzme */
    radial-gradient(60% 46% at 50% 4%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%),
    /* köşe kararması — derinlik (nötr gri, renk katmaz) */
    radial-gradient(118% 92% at 50% 40%, rgba(255,255,255,0) 52%, rgba(40,46,50,.07) 100%),
    /* zemin: renksiz, yalnız ışık düşüşü */
    linear-gradient(180deg, rgba(40,46,50,0) 0 58%, rgba(40,46,50,.04) 80%, rgba(40,46,50,.07) 100%),
    /* ufuk kıvrımı: fon zemine dikişsiz geçer (siklorama) */
    radial-gradient(150% 58% at 50% 62%, #ffffff 0%, rgba(255,255,255,.60) 42%, rgba(255,255,255,0) 74%),
    /* siklorama fonu */
    linear-gradient(180deg, #ffffff 0%, #fbfcfc 34%, #f4f6f7 66%, #edf0f1 100%)}
.tuval-sar{position:relative;max-width:100%;max-height:100%;
  box-shadow:0 34px 60px -24px rgba(11,60,56,.38), 0 4px 14px rgba(11,60,56,.10);
  border-radius:3px;background:#fff}
/* eserin zeminle temas gölgesi — havada durmasın */
.tuval-sar::after{content:"";position:absolute;left:3%;right:3%;bottom:-30px;height:40px;
  background:radial-gradient(ellipse at 50% 0%, rgba(11,60,56,.30) 0%, rgba(11,60,56,.10) 42%, rgba(11,60,56,0) 74%);
  filter:blur(6px);z-index:-1;pointer-events:none}
#tuval{display:block;max-width:100%;max-height:100%;touch-action:none;border-radius:3px}
.rozetler{position:absolute;inset:0;pointer-events:none}
.rozet{position:absolute;transform:translate(-50%,-50%);font:700 10px/1 var(--sans);
  padding:4px 8px;border-radius:20px;white-space:nowrap;background:rgba(255,255,255,.93);
  border:1px solid;backdrop-filter:blur(4px);box-shadow:0 2px 6px rgba(22,21,26,.10)}
.rozet.iyi{color:#13795f;border-color:#8fd3bd}
.rozet.orta{color:#8a6210;border-color:#f0cf8a}
.rozet.dusuk,.rozet.yetersiz{color:#b03a2d;border-color:#eda99e;background:rgba(255,241,239,.95)}
.rozet.bos{color:var(--ink3);border-color:var(--line2);border-style:dashed}
.rozet.yazi{color:var(--cyan);border-color:#9bd3e4}
.yukleniyor{position:absolute;top:10px;right:10px;opacity:0;transition:.2s}
.yukleniyor.acik{opacity:1}
.yukleniyor span{display:block;width:16px;height:16px;border:2px solid var(--line2);
  border-top-color:var(--teal);border-radius:50%;animation:don .7s linear infinite}
@keyframes don{to{transform:rotate(360deg)}}
.sahne-alt{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.hucre-arac{display:flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line2);border-radius:11px;padding:7px 11px;flex-wrap:wrap;
  justify-content:center;box-shadow:var(--sh-card)}
.hucre-arac.gizli{visibility:hidden;opacity:0}
.hucre-arac input[type=range]{width:104px}
.ayrac{width:1px;height:20px;background:var(--line2)}
.ipucu{color:var(--ink3);font-size:11.5px;text-align:center;min-height:17px}

/* ── sağ panel ───────────────────────────────────────────── */
.giris{width:100%;background:var(--card);border:1px solid var(--line2);border-radius:9px;
  padding:9px 11px;margin-bottom:9px;outline:none;color:var(--ink);transition:.15s}
.giris::placeholder{color:var(--ink3)}
.giris:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--ring)}
/* Elle boyutlandırma KAPALI: müşteri kutuyu aşağı çektikçe panelin yapısı
   bozuluyordu ve zaten başlık o kadar uzun yazılmamalı (Ali, 2026-09-16).
   Kutu yüksekliği role göre sabit. */
textarea.giris{resize:none;font-family:var(--sans);line-height:1.45;overflow:hidden}
select.giris{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--ink2) 50%),
  linear-gradient(135deg,var(--ink2) 50%,transparent 50%);
  background-position:calc(100% - 16px) 51%,calc(100% - 11px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
input[type=range]{accent-color:var(--teal)}
input[type=checkbox]{accent-color:var(--teal);width:16px;height:16px}

.kalite-kutu{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:12px;line-height:1.6}
.kalite-satir{display:flex;justify-content:space-between;gap:10px}
.kalite-satir b{font-variant-numeric:tabular-nums}
.kalite-cubuk{height:5px;border-radius:3px;background:var(--line2);margin:7px 0 4px;overflow:hidden}
.kalite-cubuk i{display:block;height:100%;transition:.3s;border-radius:3px}

.renk-izgara{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.renk-nokta{aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line2);transition:.15s}
.renk-nokta:hover{transform:scale(1.08)}
.renk-nokta.etkin{border-color:var(--teal);transform:scale(1.14);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 3px var(--ring)}
/* line-height:1 iki satıra düşen başlıkları üst üste bindiriyordu. */
.alt-baslik{font:600 10.5px/1.45 var(--sans);color:var(--ink3);text-transform:uppercase;
  letter-spacing:.12em;margin:14px 0 8px}
.desen-izgara{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.desen-kart{background:var(--card);border:1.5px solid var(--line2);border-radius:9px;
  padding:8px;font-size:11.5px;cursor:pointer;text-align:center;transition:.15s}
.desen-kart:hover{border-color:var(--teal)}
.desen-kart.etkin{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-d);font-weight:600}
.foto-sec-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.foto-sec-izgara img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;
  border:2px solid var(--line)}
.foto-sec-izgara img.etkin{border-color:var(--teal);box-shadow:0 0 0 3px var(--ring)}

.kaydir-satir{display:block;font-size:12px;color:var(--ink2);margin-bottom:12px}
.kaydir-satir b{float:right;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.kaydir-satir input{width:100%;margin-top:6px}
.onay{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink2);cursor:pointer}

/* ── yazı alanları ───────────────────────────────────────── */
.yazi-alan{background:var(--paper);border:1px solid var(--line);border-radius:11px;
  padding:12px;margin-bottom:10px;transition:.15s}
.yazi-alan.odakta{border-color:var(--teal);box-shadow:0 0 0 3px var(--ring)}
.yazi-bas{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.yazi-bas label{font:600 10.5px/1 var(--sans);color:var(--ink3);text-transform:uppercase;
  letter-spacing:.12em;flex:1}
.hiza-grup{display:flex;gap:2px;background:var(--card);border:1px solid var(--line2);
  border-radius:8px;padding:2px}
.hiza-grup button{width:26px;height:24px;border:0;background:none;border-radius:6px;
  cursor:pointer;color:var(--ink3);display:grid;place-items:center;padding:0;transition:.15s}
.hiza-grup button:hover{color:var(--ink)}
.hiza-grup button.etkin{background:var(--teal-soft);color:var(--teal-d)}
.hiza-grup svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.yazi-olcu{font-size:10.5px;color:var(--ink3);display:flex;gap:10px;margin-top:8px;
  font-variant-numeric:tabular-nums;flex-wrap:wrap}
.yazi-olcu span.uyar{color:#8a6210;font-weight:600}
.yazi-olcu span.kotu{color:#b03a2d;font-weight:600}
.mini-kaydir{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--ink3)}
.mini-kaydir input{flex:1}
/* Yazı rengi: "Oto" + işletim sisteminin gerçek renk seçicisi. Sabit bir
   palet YOK — ne yer kaplar ne de zemin değişince bayatlar. */
.renk-oto{border:1px solid var(--line2);background:var(--card);border-radius:7px;
  padding:4px 10px;font-size:11px;cursor:pointer;color:var(--ink2);transition:.15s}
.renk-oto:hover{border-color:var(--teal);color:var(--teal-d)}
.renk-oto.etkin{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-d);font-weight:600}
.renk-sec{width:30px;height:24px;padding:0;border:1.5px solid var(--line2);border-radius:7px;
  background:var(--card);cursor:pointer;transition:.15s}
.renk-sec::-webkit-color-swatch-wrapper{padding:2px}
.renk-sec::-webkit-color-swatch{border:0;border-radius:4px}
.renk-sec:hover{border-color:var(--teal)}
.renk-sec.etkin{border-color:var(--teal);box-shadow:0 0 0 2.5px var(--ring)}

/* ── uyarılar ────────────────────────────────────────────── */
.uyari-yigin{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + var(--sekme));
  z-index:40;display:flex;flex-direction:column;gap:8px;align-items:center;
  width:min(640px,calc(100% - 32px));pointer-events:none}
/* ⚠ UYARILAR YUMUŞAK (Ali 2026-10-01: "bu uyarı çok sert kalıyor, daha light
   olsun"). Burada bir şey BOZULMUYOR — müşteri tasarımını henüz bitirmedi.
   Kırmızı şerit + BÜYÜK HARF başlık bir arıza bildirimi gibi duruyordu ve
   insanı yanlış bir şey yaptığına inandırıyordu. Artık ton nötr: ince kenar,
   yumuşak zemin, küçük harf başlık. Bilgi aynı, suçlama yok. */
.uyari{background:var(--card);border:1px solid var(--line2);
  border-left:2px solid var(--line2);
  border-radius:12px;padding:10px 14px;font-size:12.5px;width:100%;
  box-shadow:0 2px 10px -6px rgba(16,24,32,.22);
  pointer-events:auto;display:flex;gap:9px;align-items:flex-start;color:var(--ink2)}
.uyari.engel{border-left-color:#e0b36a;background:#fffdf8}
.uyari.uyari-hafif,.uyari:not(.engel){border-left-color:var(--line2)}
.uyari i{font-style:normal;font-size:13px;line-height:1.35;opacity:.62}
.uyari b{display:block;font:600 11.5px/1.25 var(--sans);text-transform:none;
  letter-spacing:0;color:var(--ink);margin-bottom:2px}

/* ── pencere ─────────────────────────────────────────────── */
.ortu{position:fixed;inset:0;background:rgba(22,21,26,.55);z-index:50;display:flex;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.pencere{background:var(--card);border-radius:16px;max-width:940px;width:100%;max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-frame)}
.pencere header{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)}
.pencere h2{margin:0;font:600 16px/1 var(--disp);flex:1}
.kapat{background:none;border:0;font-size:25px;color:var(--ink3);cursor:pointer;line-height:1;padding:0 4px}
.kapat:hover{color:var(--ink)}
.pencere-govde{padding:18px;overflow-y:auto}
.pencere-govde img.kanit{width:100%;border-radius:10px;margin-bottom:16px;
  background:var(--paper);border:1px solid var(--line)}
.ozet-tablo{width:100%;border-collapse:collapse;font-size:12.5px}
.ozet-tablo td{padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink2)}
.ozet-tablo td:last-child{text-align:right;color:var(--ink);font-weight:500;
  font-variant-numeric:tabular-nums}
.not{color:var(--ink3);font-size:12px;margin-top:14px;line-height:1.6}

/* ── 3B malzeme görünümü ─────────────────────────────────── */
/* Malzeme ekranı da editörle AYNI stüdyoda dursun — iki ayrı ortam gibi durmasın. */
.uc-boyut{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;
  background:
    radial-gradient(60% 46% at 50% 4%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(118% 92% at 50% 40%, rgba(255,255,255,0) 52%, rgba(40,46,50,.07) 100%),
    linear-gradient(180deg, rgba(40,46,50,0) 0 58%, rgba(40,46,50,.04) 80%, rgba(40,46,50,.07) 100%),
    radial-gradient(150% 58% at 50% 62%, #ffffff 0%, rgba(255,255,255,.60) 42%, rgba(255,255,255,0) 74%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfc 34%, #f4f6f7 66%, #edf0f1 100%)}
.uc-boyut header{background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.uc-boyut .malzeme-serit{background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.uc-boyut header{display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--card);border-bottom:1px solid var(--line)}
.uc-boyut header h2{margin:0;font:600 15px/1 var(--disp);flex:1}
#ucSahne{flex:1;min-height:0;position:relative}
.malzeme-serit{display:flex;gap:8px;padding:12px 16px;background:var(--card);
  border-top:1px solid var(--line);overflow-x:auto;justify-content:center}
.malzeme-dugme{border:1.5px solid var(--line2);background:var(--card);border-radius:10px;
  padding:8px 14px;cursor:pointer;white-space:nowrap;font-size:12.5px;transition:.15s}
.malzeme-dugme.etkin{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-d);font-weight:600}

/* ── mobil ───────────────────────────────────────────────── */
.mobil-sekme{display:none}
@media (max-width:1000px){
  :root{--sekme:62px;--yan:100%;--yaprak:42dvh}
  .govde{display:block;height:calc(100% - var(--ust) - var(--sekme))}
  .sahne{height:100%;padding:8px 10px;transition:height .18s ease}
  /* ⚠⚠ ALT YAPRAK (Ali 2026-10-01). Eskiden panel üst çubuktan sekme çubuğuna
     kadar TÜM ekranı kaplıyordu → müşteri TASARLADIĞI ŞEYİ HİÇ GÖRMÜYORDU.
     Ali fotoğraf yükledi, kolaj arkada doğru şekilde doluydu ama önünde panel
     vardı; "fotoğraflar yüklenmiyor" sandı. Panel artık ekranın alt kısmında
     bir yaprak; tuval üstte AÇIK kalıyor ve seçim yapıldıkça değiştiği
     anında görülüyor. */
  .yan{position:fixed;left:0;right:0;bottom:var(--sekme);top:auto;
    height:var(--yaprak);z-index:20;display:none;border:0;background:var(--paper);
    border-top:1px solid var(--line);border-radius:18px 18px 0 0;
    box-shadow:0 -12px 34px rgba(16,24,32,.13);padding:16px 14px 20px}
  .yan.acik{display:block}
  /* yaprağın tutamağı: burasının çekilebilir bir katman olduğunu belli eder */
  .yan.acik::before{content:"";position:absolute;top:7px;left:50%;
    transform:translateX(-50%);width:38px;height:4px;border-radius:2px;
    background:var(--line)}
  /* tuval yaprağın ARKASINDA kalmasın: sahne kısalır, kolaj hep görünür */
  body.panel-acik .sahne{height:calc(100% - var(--yaprak))}
  /* ⚠ TEK KAYDIRICI: yaprağın kendisi kayar. Izgara da kayarsa iki kaydırıcı
     çarpışır ve parmak hangisine ait olduğunu bilemez — "kaydıramıyorum"
     şikâyetinin ikinci sebebi buydu. */
  .sablon-izgara{max-height:none;overflow:visible}
  .mobil-sekme{display:flex;position:fixed;bottom:0;left:0;right:0;height:var(--sekme);
    background:var(--card);border-top:1px solid var(--line);z-index:35;
    padding-bottom:env(safe-area-inset-bottom)}
  /* ⚠ Etiket 10px + geometrik karakter ikon telefonda okunmuyordu (Ali 2026-10-01).
     Simgeler artık SVG (cihazdan bağımsız), 23px kutu; etiket 11px. */
  .mobil-sekme button{flex:1;background:none;border:0;color:var(--ink3);font-size:11px;
    font-weight:600;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;cursor:pointer;padding:0 2px;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .mobil-sekme button i{font-style:normal;display:block;width:23px;height:23px}
  .mobil-sekme button i svg{width:100%;height:100%;display:block}
  .mobil-sekme button.etkin{color:var(--teal-d)}
  .sablon-izgara{grid-template-columns:1fr 1fr 1fr}
  .serit{grid-template-columns:repeat(4,1fr)}
  .serit-oge .sil{opacity:1}
  .urun-ozet{display:none}
  .hucre-arac{width:100%}
  body.panel-acik .uyari-yigin{display:none}
}
/* Üst çubuk dar ekranda taşıyordu (birincil eylem kesiliyordu) — düğmeler
   kısa etikete düşer. Sepet düğmesi ASLA kısaltılmaz: birincil eylem o. */
.kisa{display:none}
@media (max-width:820px){
  .uzun{display:none}
  .kisa{display:inline}
}
@media (max-width:560px){
  .sablon-izgara{grid-template-columns:1fr 1fr}
  .serit{grid-template-columns:repeat(3,1fr)}
  .ust{gap:8px;padding:0 10px}
  .marka span{display:none}
  .marka{font-size:16px}
  .dugme{padding:8px 11px;font-size:13px}
  .ust-sag{gap:6px}
}


/* ── Adım vurgusu (Ali 2026-10-01) ─────────────────────────────────────────
   Şablon seçilince müşteri "şimdi ne yapacağım?" diye kalıyordu. Bir sonraki
   adım kendiliğinden açılır ve hedef alan kısa süre nabız gibi vurgulanır.
   İki nabız sonra durur: sürekli yanıp sönen arayüz rahatsız eder ve
   müşteri onu hata sanar. */
@keyframes kljNabiz{
  0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,0)}
  50%    {box-shadow:0 0 0 7px rgba(13,148,136,.26)}
}
.vurgu{animation:kljNabiz 1.15s ease-in-out 2;border-color:#0D9488!important}


/* ── SIRADAKİ ADIM ÇUBUĞU (Ali 2026-10-01) ────────────────────────────────
   Telefonda müşteri şablonu seçiyor ve orada kalıyordu: alt sekmeler gezinme
   içindir, yönlendirme için değil — kimse "şimdi Fotoğraflar sekmesine
   geçmeliyim" diye düşünmüyor. Bu çubuk sekme çubuğunun hemen üstünde durur
   ve HER AN TEK BİR ŞEY söyler: sıradaki eylem. Tıklayınca doğru paneli açar
   ve hedefi vurgular. Masaüstünde YOK — orada her şey zaten aynı anda görünür. */
.adim-cubugu{display:none}
@media (max-width:1000px){
  .adim-cubugu{display:block;position:fixed;left:0;right:0;bottom:var(--sekme);
    z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,var(--paper) 62%,rgba(250,249,247,0));
    pointer-events:none}
  .adim-cubugu .dugme{width:100%;pointer-events:auto;height:46px;font-size:15px;
    font-weight:650;border-radius:12px;box-shadow:0 6px 18px rgba(13,148,136,.26)}
  /* panel açıkken çubuk yaprağın ÜSTÜNDE durur, içeriği örtmesin diye
     yaprak alt dolgusu büyür */
  body.panel-acik .yan{padding-bottom:76px}
  body.adim-gizli .adim-cubugu{display:none}
}


/* ── Yükleme geri bildirimi (Ali 2026-10-01) ──────────────────────────────
   Dosya seçilir seçilmez karo belirir ve müşterinin KENDİ görseli (yerelden,
   sunucuyu beklemeden) içinde görünür; üstünde dönen bir halka durur. Yüklenen
   karo netleşir. Böylece "bir şey oluyor mu?" sorusu hiç doğmaz. */
.serit-oge.yukleniyor{position:relative}
.serit-oge.yukleniyor img{filter:grayscale(.55) brightness(.82)}
.serit-oge.yukleniyor::after{content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.35)}
.yukle-donen{position:absolute;top:50%;left:50%;width:20px;height:20px;
  margin:-10px 0 0 -10px;border:2.5px solid rgba(13,148,136,.25);
  border-top-color:#0D9488;border-radius:50%;animation:kljDon .75s linear infinite;z-index:2}
@keyframes kljDon{to{transform:rotate(360deg)}}
.serit-oge.hata{outline:2px solid #d14343;outline-offset:-2px}
.serit-oge.hata .yukle-donen{display:none}


/* ── YAPRAK BAŞLIĞI (Ali 2026-10-01) ──────────────────────────────────────
   Panelin bir KATMAN olduğu ve kapatılabildiği görünür olmalı. Tutamaç +
   adım adı + "2 / 5" sayacı + aşağı ok. Yaprak kayarken başlık yapışık kalır,
   yoksa müşteri aşağı inince nerede olduğunu kaybeder. */
.yaprak-bas{display:none}
@media (max-width:1000px){
  /* ⚠ YAPIŞMA NOKTASI (Ali 2026-10-01: "şablon başlığının üstünde tuhaf bir
     görüntü oluşuyor aşağıya kaydırdığımda"). Başlık negatif kenar boşluğuyla
     yukarı çekiliyordu; `top:0` ise kapsayıcının DOLGU kutusuna göre ölçülüyor,
     dolayısıyla başlık olması gerekenden aşağıda yapışıyor ve bölümün kendi
     başlığı ÜSTÜNDEN sızıyordu. Negatif boşluk kaldırıldı: yaprağın üst
     dolgusu sıfır, dolguyu başlığın kendisi veriyor. */
  /* ⚠ YAPIŞKAN BAŞLIK + KAYDIRMA (Ali 2026-10-01: "text alanı üstte kalmıyor,
     üstteki başlık üstüne biniyor, yazı tipi seçicisi başlığın altında kalıyor").
     Tarayıcı `scrollIntoView` hesabını yaparken yapışkan başlığın yerini
     BİLMEZ: hedefi kapsayıcının tepesine hizalar ve başlık onun üstüne oturur.
     `scroll-padding-top` tam bunun için var — kaydırma artık başlığın
     ALTINDAN başlar. Değer başlık yüksekliğiyle aynı tutulur. */
  .yan{padding-top:0;scroll-padding-top:62px}
  .yaprak-bas{display:flex;align-items:center;gap:10px;position:sticky;top:0;
    z-index:6;margin:0 -14px 10px;padding:15px 14px 10px;
    background:var(--paper);border-radius:18px 18px 0 0;
    border-bottom:1px solid var(--line);
    box-shadow:0 6px 10px -8px rgba(16,24,32,.28)}
  .yaprak-bas .tutamac{position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:42px;height:4px;border-radius:2px;background:var(--line);cursor:pointer}
  .yaprak-bas .tutamac::after{content:"";position:absolute;inset:-12px -26px}
  .yaprak-bilgi{display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0}
  .yaprak-bilgi b{font-size:15px;font-weight:650}
  .yaprak-bilgi small{font-size:11px;color:var(--ink3);letter-spacing:.06em}
  .yaprak-kapat{width:34px;height:34px;border:0;border-radius:10px;cursor:pointer;
    background:var(--line);color:var(--ink);font-size:17px;line-height:1;
    display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  /* yaprak açıkken tuval kısalır ama MİNİMUM bir yükseklik korur: müşteri
     ne yaptığını görmeden ayar yapmasın */
  body.panel-acik .sahne{height:max(calc(100% - var(--yaprak)), 180px)}
  .yan.acik::before{display:none}   /* tutamaç artık başlıkta */
}


/* Geçici uyarılar adım çubuğunun ÜSTÜNDE dursun; düğmeyi örtmemeli. */
@media (max-width:1000px){
  .uyari-yigin{bottom:calc(var(--sekme) + 70px);top:auto;left:10px;right:10px}
}


/* ── Gerçek malzeme görünümü: telefon (Ali 2026-10-01) ────────────────────
   "bu ekrandan geri çıkamıyorum": kapatma düğmesi 1-2 piksellik bir "×" idi,
   üstelik başlık iki satıra sarınca iyice kayboluyordu. Telefonda artık
   dokunulabilir bir hedef (44px, Apple/Google asgarisi) ve başlık tek satır. */
@media (max-width:1000px){
  .uc-boyut header{padding:10px 12px;gap:8px}
  .uc-boyut header h2{font-size:14px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;flex:0 1 auto}
  /* ipucu metni dar ekranda başlığı eziyordu — dokunmatikte zaten
     "sürükle/tekerlek" demek anlamsız, gizleniyor */
  .uc-boyut header .ipucu{display:none}
  .uc-boyut .kapat{margin-left:auto;flex:0 0 auto;width:44px;height:44px;
    border-radius:12px;background:var(--line);color:var(--ink);
    font-size:24px;line-height:1;display:flex;align-items:center;
    justify-content:center;border:0}
  /* malzeme şeridi: ortalama yerine kaydırılabilir, taşan düğme kalmasın */
  .uc-boyut .malzeme-serit{justify-content:flex-start;padding:10px 12px;
    scrollbar-width:none}
  .uc-boyut .malzeme-serit::-webkit-scrollbar{display:none}
}


/* ── Yükleme ilerleme çubuğu (Ali 2026-10-01) ─────────────────────────────
   Yükleme alanının İÇİNDE, müşterinin az önce dokunduğu yerde durur. Söz
   içermez (her dilde aynı okunur), yalnız dönen halka + sayı + dolan çubuk. */
.yukle-alan{position:relative}
.yukle-alan.yukluyor .yukle-ic{opacity:.25;transition:opacity .15s}
.yukle-ilerleme{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;background:rgba(255,255,255,.82);
  border-radius:inherit;z-index:2}
.yukle-ilerleme .yukle-donen{position:static;margin:0;width:26px;height:26px;
  border-width:3px}
.yukle-ilerleme b{font:650 15px/1 var(--sans);color:var(--teal-d);letter-spacing:.02em}
.yukle-ilerleme i{display:block;width:62%;height:4px;border-radius:2px;
  background:var(--line);overflow:hidden}
.yukle-ilerleme u{display:block;height:100%;width:0;background:#0D9488;
  border-radius:2px;transition:width .25s ease}

/* Düğme içindeki dönen halka: düğmenin kendi rengini alır. */
.yukle-donen.dugme-ici{position:static;margin:0 auto;width:15px;height:15px;
  border-width:2px;border-color:currentColor transparent currentColor currentColor;
  opacity:.75}
button[data-mesgul]{cursor:progress}


/* ── ÜRÜN PANELİ (Ali 2026-10-01: "bu product kısmı biraz zayıf kalmış") ───
   İki düz açılır liste, satılan şeyi hiç göstermiyordu. Artık malzeme GÖRSEL
   kartlarla seçiliyor, fiyat ve ölçü okunur bir kartta duruyor.
   ⚠ İŞLEYİŞ DEĞİŞMEDİ: açılır liste hâlâ var, yalnız görsel olarak gizli —
   durumun tek kaynağı o, klavye ve ekran okuyucu da onu kullanmaya devam
   ediyor. Kartlar yalnız onun değerini yazıyor. */
.alan-etiket{display:block;font:600 10px/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink3);margin:2px 0 7px}
.alan-etiket + .giris, .alan-etiket + .malzeme-kart-izgara{margin-top:0}

/* görsel olarak gizli ama erişilebilir: ekran okuyucu ve klavye görür */
.gizli-erisilebilir{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.malzeme-kart-izgara{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.malzeme-kart{display:flex;align-items:center;gap:8px;padding:9px 9px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line2);border-radius:11px;
  text-align:left;transition:.15s;min-width:0;min-height:50px}
.malzeme-kart:hover{border-color:var(--line)}
.malzeme-kart.etkin{border-color:var(--teal);background:var(--teal-soft);
  box-shadow:0 0 0 3px rgba(13,148,136,.10)}
/* ⚠ Malzeme adları dilden dile uzuyor ("Fırçalı Alüminyum", "Gebürstetes
   Aluminium"). İki satıra sığmayan ad ORTADAN KIRPILIYORDU ("Alüminyu") —
   müşteri ne aldığını okuyamaz. Artık üç satıra kadar sarıyor, kelime
   bölünebiliyor ve kart içeriğe göre uzuyor. */
.malzeme-kart span{font-size:11px;line-height:1.2;font-weight:600;color:var(--ink2);
  overflow-wrap:anywhere;hyphens:auto;min-width:0}
.malzeme-kart.etkin span{color:var(--teal-d)}
/* Malzeme yüzeyleri: görsel dosyası YOK — her biri CSS ile, böylece yüklenme
   beklemez ve hiçbir ağ isteği eklemez. */
.malzeme-kart i{flex:0 0 auto;width:26px;height:26px;border-radius:7px;
  border:1px solid rgba(16,24,32,.10);background-size:cover}
.mal-glass{background:linear-gradient(135deg,#e8f3f4 0%,#ffffff 38%,#cfe3e6 62%,#eef7f8 100%)}
.mal-canvas{background:
  repeating-linear-gradient(90deg,rgba(150,128,96,.16) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(0deg,rgba(150,128,96,.16) 0 1px,transparent 1px 3px),
  linear-gradient(135deg,#f3ece0,#e6dbc9)}
.mal-aluminum{background:linear-gradient(135deg,#dfe4e7 0%,#f6f8f9 40%,#c6ced3 70%,#eceff1 100%)}
.mal-brushed{background:
  repeating-linear-gradient(90deg,rgba(90,100,108,.20) 0 1px,transparent 1px 2px),
  linear-gradient(135deg,#c9d0d5,#eef1f3 45%,#b7c0c6)}

.urun-ozet-kart{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  align-items:baseline;padding:12px 14px;margin:12px 0 10px;border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#f7fafa);border:1px solid var(--line2)}
.uok-fiyat{grid-row:1;font:700 21px/1 var(--disp);color:var(--ink);letter-spacing:-.01em}
.uok-olcu{grid-row:1;justify-self:end;text-align:right;display:flex;
  flex-direction:column;gap:2px}
.uok-olcu b{font:600 12.5px/1 var(--sans);color:var(--ink)}
.uok-olcu span{font-size:10.5px;color:var(--ink3)}
.uok-tip{grid-column:1/-1;font-size:11px;color:var(--ink3);letter-spacing:.04em}