/* Blok Atölyesi — tasarım dosyası */
:root{
  --bg:#FFF8E7; --ink:#2B2D42; --muted:#6B7085; --card:#fff; --line:#EDE6D3;
  --accent:#FF6B35; --accent-soft:#FFF1EA; --sel:#FFC400; --sky:#DCEBFA;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);
  overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;padding:0}
h1,h2,p{margin:0}
.screen{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top) + 28px) calc(env(safe-area-inset-right) + 28px) calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 28px)}

/* ---------- Profil ekranı ---------- */
#profiles{background:radial-gradient(circle at 20% 10%,#FFE9B8 0,transparent 45%),radial-gradient(circle at 85% 90%,#CFE7FF 0,transparent 50%),var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;text-align:center}
.logo{display:flex;align-items:center;gap:14px;justify-content:center}
.logo img{width:64px;height:64px;border-radius:16px;box-shadow:0 4px 0 #0000001a}
.logo h1{font-size:clamp(30px,5vw,46px);font-weight:800}
.ask{font-size:22px;color:var(--muted);font-weight:600;margin-top:6px}
.kids{display:flex;gap:clamp(18px,4vw,40px);justify-content:center;flex-wrap:wrap}
.kid{background:#fff;border-radius:34px;padding:22px 24px 20px;width:min(280px,40vw);min-width:200px;
  box-shadow:0 8px 0 #0000000f,0 14px 34px #00000014;transition:transform .12s}
.kid:active{transform:translateY(5px) scale(.98)}
.kid .av svg{width:100%;height:auto;display:block}
.kid b{display:block;font-size:30px;margin-top:12px}
.kid small{display:block;color:var(--muted);font-size:15px;font-weight:600;margin-top:2px}
.offline{font-size:14px;color:var(--muted);font-weight:600}
.offline.ok{color:#2E8B57}

/* ---------- Modeller ekranı ---------- */
#models{background:var(--bg)}
.mhead{display:flex;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.pill{background:#fff;border-radius:999px;padding:10px 18px;font-weight:700;box-shadow:0 2px 0 #0000000f;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.pill svg{width:20px;height:20px}
.who{display:flex;align-items:center;gap:14px}
.who .av{width:72px;height:72px}
.who .av svg{width:100%;height:100%}
.who h1{font-size:30px;font-weight:800}
.who p{color:var(--muted);font-weight:600}
.resume{display:flex;align-items:center;gap:18px;width:100%;max-width:640px;background:var(--accent);color:#fff;border-radius:24px;padding:12px;text-align:left;
  box-shadow:0 6px 0 #C8471A;margin-bottom:30px;transition:transform .12s}
.resume:active{transform:translateY(4px);box-shadow:0 2px 0 #C8471A}
.resume img{width:150px;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:var(--sky)}
.resume b{display:block;font-size:24px}
.resume span{font-size:16px;opacity:.92;font-weight:600}
.sec{font-size:20px;font-weight:800;margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.mcard{position:relative;background:#fff;border-radius:22px;overflow:hidden;text-align:left;box-shadow:0 4px 0 #0000000f,0 8px 20px #0000000d;transition:transform .12s}
.mcard:active{transform:scale(.98)}
.mcard .th{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--sky)}
.mcard .meta{padding:10px 14px 14px}
.mcard b{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard span{font-size:13.5px;color:var(--muted);font-weight:600}
.mcard .del{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;background:#ffffffe6;display:grid;place-items:center;color:#C0392B;box-shadow:0 2px 6px #0002}
.mcard .del svg{width:20px;height:20px}
.newcard{border:3px dashed #E3D9BF;background:#FFFDF6;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;gap:8px;color:var(--accent);font-weight:800;font-size:18px}
.newcard svg{width:54px;height:54px}
.mfoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:34px}

/* ---------- Editör ---------- */
#editor{position:fixed;inset:0;display:grid;grid-template-columns:clamp(196px,24vw,262px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;background:var(--sky)}
#topbar{grid-column:1/-1;display:flex;align-items:center;gap:4px;background:#fff;border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 10px) 6px calc(env(safe-area-inset-left) + 10px)}
.tb{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}
.tb svg{width:25px;height:25px}
.tb:active{background:#0000000d}
.tb.on{background:#FFE7A3}
.tb:disabled{opacity:.3}
.tsep{width:1px;height:28px;background:var(--line);margin:0 4px}
#title{display:flex;align-items:center;gap:6px;font-weight:800;font-size:19px;padding:6px 10px;border-radius:12px;min-width:0;max-width:34vw}
#title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#title svg{width:18px;height:18px;flex:0 0 auto;color:var(--muted)}
#count{color:var(--muted);font-weight:700;font-size:14px;white-space:nowrap}
.grow{flex:1}
#eAvatar{width:40px;height:40px;flex:0 0 auto}
#eAvatar svg{width:100%;height:100%}

#palette{grid-row:2/4;background:#FFFDF6;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;padding-left:env(safe-area-inset-left)}
#cats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px}
.cat{padding:8px 2px;border-radius:12px;background:#F2ECDC;font-weight:800;font-size:12.5px;line-height:1.1}
.cat.on{background:var(--accent);color:#fff}
#partList{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px 10px calc(env(safe-area-inset-bottom) + 12px);align-content:start}
.part{background:#fff;border-radius:16px;border:3px solid transparent;padding:4px 4px 7px;display:flex;flex-direction:column;align-items:center;box-shadow:0 2px 0 #0000000f;touch-action:pan-y;cursor:grab}
.part:active{border-color:var(--accent);background:var(--accent-soft)}
/* Sürüklerken parçayı çevirme düğmesi (diğer elle dokunulur) */
#dragRotate{position:absolute;right:18px;bottom:18px;width:88px;height:88px;border-radius:50%;background:var(--accent);color:#fff;z-index:41;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:800;font-size:13.5px;box-shadow:0 6px 0 #C8471A,0 10px 24px #0003;touch-action:none}
#dragRotate:active{transform:translateY(4px);box-shadow:0 2px 0 #C8471A,0 6px 14px #0003}
#dragRotate svg{width:36px;height:36px}
.dragimg{position:fixed;left:0;top:0;width:104px;height:104px;pointer-events:none;z-index:40;filter:drop-shadow(0 8px 12px #0005)}
body.dragging,body.dragging *{cursor:grabbing!important}
.part img{width:100%;aspect-ratio:1;object-fit:contain;pointer-events:none}
.part span{font-size:12.5px;font-weight:700;line-height:1.15;text-align:center}
.part.on{border-color:var(--accent);background:var(--accent-soft)}

#viewport{position:relative;min-width:0;min-height:0;overflow:hidden}
#viewport canvas{display:block;touch-action:none;width:100%;height:100%}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;pointer-events:auto;background:#fff;border-radius:999px;padding:4px 11px 4px 6px;font-size:13.5px;font-weight:800;
  box-shadow:0 2px 8px #0003;white-space:nowrap;display:flex;align-items:center;gap:6px;will-change:transform}
.tag i{width:15px;height:15px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #0003;flex:0 0 auto}
.hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#2B2D42dd;color:#fff;padding:7px 16px;border-radius:999px;font-size:14.5px;font-weight:700;pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.fbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:4px;background:#fff;border-radius:22px;padding:6px;box-shadow:0 8px 24px #00000026}
.fb{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:66px;padding:7px 8px 6px;border-radius:16px;font-size:12.5px;font-weight:800}
.fb svg{width:27px;height:27px}
.fb:active{background:#0000000d}
.fb.danger{color:#D62828}
.fb.primary{background:var(--accent);color:#fff}

#colorsBar{grid-column:2;display:flex;align-items:center;gap:10px;background:#fff;border-top:1px solid var(--line);padding:8px calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 8px) 12px;min-width:0}
#curColor{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;min-width:120px;flex:0 0 auto}
#curColor i{width:22px;height:22px;border-radius:7px;background:var(--c);box-shadow:inset 0 0 0 1px #0002}
#colors{display:flex;gap:9px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:5px 4px;flex:1;min-width:0;scrollbar-width:none}
#colors::-webkit-scrollbar{display:none}
.sw{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--c);box-shadow:inset 0 -5px 0 #00000026,0 0 0 1px #00000026}
.sw.trans{background:linear-gradient(135deg,var(--c) 0 48%,color-mix(in srgb,var(--c) 35%,#fff) 52%);opacity:.85}
.sw.on{outline:4px solid var(--ink);outline-offset:2px}

/* ---------- Pencere ve bildirim ---------- */
#modal{position:fixed;inset:0;background:#2B2D4266;display:grid;place-items:center;z-index:50;padding:20px}
.mbox{background:#fff;border-radius:26px;padding:24px;width:min(440px,100%);box-shadow:0 20px 60px #0004}
.mbox h2{font-size:22px;font-weight:800}
.mbox p{color:var(--muted);font-weight:600;margin-top:6px}
.mbox input{width:100%;font:inherit;font-size:20px;font-weight:700;padding:12px 14px;border-radius:14px;border:2px solid var(--line);margin-top:16px;outline:none;-webkit-user-select:text;user-select:text}
.mbox input:focus{border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{background:#F2ECDC;border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px}
.mbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.btn{border-radius:14px;padding:12px 20px;font-weight:800;background:#F2ECDC;min-height:48px}
.btn.primary{background:var(--accent);color:#fff}
.btn.danger{background:#FDE2E1;color:#C0392B}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 90px);transform:translateX(-50%) translateY(20px);background:#2B2D42;color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;transition:.25s;pointer-events:none;z-index:60;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Telefon gibi dar ekranlar */
@media (max-width:700px){
  #editor{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}
  #palette{grid-row:3;border-right:0;border-top:1px solid var(--line);max-height:190px;padding-left:0}
  #cats{grid-template-columns:repeat(6,1fr);padding:6px}
  .cat{font-size:11px}
  #partList{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:92px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px}
  .part{touch-action:pan-x}
  #colorsBar{grid-column:1;grid-row:4}
  #curColor{min-width:0}
  #curColor span{display:none}
  #title{max-width:30vw}
  #count,.tsep{display:none}
}