:root{
    --bg:#f3f1ea; --card:#fcfbf7; --card2:#f7f5ee;
    --line:#e2dfd4; --line2:#cbc8bb;
    --ink:#191817; --dim:#8d8a7f; --dim2:#b5b2a6;
    --radius:16px; --radius-s:10px;
  }
  *{box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--line2) transparent}
  ::-webkit-scrollbar{width:10px; height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--line2); border-radius:8px; border:3px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:var(--dim2)}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font:14px/1.6 "Shantell Sans","Comic Sans MS","Segoe Print",ui-rounded,ui-sans-serif,sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- üst çubuk ---------- */
  #top{
    display:flex; align-items:center; justify-content:space-between;
    height:68px; padding:0 28px; border-bottom:1px solid var(--line);
    background:var(--bg); position:sticky; top:0; z-index:5;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px}
  #logo{width:40px; height:40px; display:block; cursor:pointer}
  .brand small{font-weight:400; color:var(--dim); font-size:12px; letter-spacing:0; margin-left:2px}
  .actions{display:flex; gap:10px; align-items:center}
  button .sm{display:none}
  .dlwrap{position:relative}
  #dlMenu{
    position:absolute; top:calc(100% + 10px); right:0; z-index:30; width:240px;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:14px; display:flex; flex-direction:column; gap:11px;
    box-shadow:0 18px 44px -18px rgba(50,45,30,.3), 0 2px 8px rgba(50,45,30,.06);
  }
  #dlMenu[hidden]{display:none}
  #dlMenu .row label{font-size:12px}
  #dlMenu button{width:100%}

  button{
    font-family:inherit; font-size:13.5px; font-weight:600;
    padding:10px 18px; border-radius:12px; cursor:pointer; transition:.15s;
    background:var(--card); color:var(--ink); border:1px solid var(--line2);
  }
  button:hover:not(:disabled){border-color:var(--ink)}
  button:disabled{opacity:.35; cursor:default}
  button.primary{background:var(--ink); border-color:var(--ink); color:#fff}
  button.primary:hover:not(:disabled){background:#000}

  /* ---------- düzen ---------- */
  #app{display:grid; grid-template-columns:352px 1fr; min-height:calc(100vh - 69px)}
  @media (max-width:920px){
    /* çizim önce: telefonu açan kişi önce mug'ı görsün, kontroller altta */
    #app{display:flex; flex-direction:column; min-height:0}
    #stage{order:-1; padding:16px 14px 10px; overflow:visible}
    #out{max-height:56vh}
    #stage::before,#stage::after,#frame::before,#frame::after{display:none}

    /* üstte yalnız marka; eylemler alta sabit bar olarak iner */
    #top{height:56px; padding:0 16px}
    .brand{font-size:18px}
    .brand small{display:none}
    .actions{
      position:fixed; left:0; right:0; bottom:0; z-index:25;
      background:var(--card); border-top:1px solid var(--line);
      padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:8px;
    }
    .actions button{flex:1; padding:12px 4px; font-size:13.5px; white-space:nowrap}
    .actions button .lg{display:none}
    .actions button .sm{display:inline}
    .dlwrap{flex:1; display:flex}
    .dlwrap>button{flex:1}
    /* export sheet'i barın üstünden açılır */
    #dlMenu{position:fixed; top:auto; bottom:calc(72px + env(safe-area-inset-bottom)); left:14px; right:14px; width:auto}
    /* bar içeriği örtmesin */
    #panel{padding-bottom:96px}
  }
  /* dokunmatikte hover yok: silme rozeti hep görünür */
  @media (hover:none){ #thumbs .rm{opacity:1} }

  /* ---------- sol panel ---------- */
  #panel{
    border-right:1px solid var(--line);
    padding:22px 22px 48px; display:flex; flex-direction:column; gap:14px;
    overflow-y:auto; max-height:calc(100vh - 69px);
  }
  @media (max-width:920px){ #panel{max-height:none; border-right:0; border-top:1px solid var(--line); padding:16px 14px 96px} }

  #drop{
    border:1.5px dashed var(--line2); border-radius:var(--radius); padding:22px 16px;
    text-align:center; color:var(--dim); cursor:pointer; transition:.15s; background:var(--card);
  }
  #drop:hover,#drop.over{border-color:var(--ink); color:var(--ink); background:#fff}
  #drop b{color:var(--ink); display:block; margin-bottom:4px; font-size:14.5px; font-weight:600}
  #drop span{font-size:12px}

  #thumbWrap{display:none; gap:10px; flex-direction:column;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px}
  #thumbWrap.on{display:flex}
  #thumbs{display:flex; flex-wrap:wrap; gap:8px}
  #thumbs .thumb{position:relative}
  #thumbs img{width:46px; height:46px; object-fit:cover; border-radius:9px; border:1px solid var(--line); display:block}
  #thumbs .bad img{opacity:.3; filter:grayscale(1); border-color:#c96f5f}
  #thumbs .rm{
    position:absolute; top:-7px; right:-7px; width:19px; height:19px; border-radius:50%;
    background:var(--ink); color:#fff; font:600 13px/18px inherit; font-family:inherit;
    text-align:center; cursor:pointer; opacity:0; transition:.12s; user-select:none;
  }
  #thumbs .thumb:hover .rm{opacity:1}
  #thumbs .rm:hover{background:#000}
  #thumbMeta{font-size:12px; color:var(--dim); line-height:1.5}
  #thumbMeta b{color:var(--ink); display:block; font-size:13px; font-weight:600}

  #status{font-size:12.5px; color:var(--dim); line-height:1.45; padding:0 2px}
  #status:empty{display:none}   /* boşken yer tutmasın — kart ile grup arasında ölü boşluk bırakıyordu */
  #status.err{color:#b4483a}
  #status.ok{color:#3c7a44}

  /* ---------- gruplar ---------- */
  .group{
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--card);
  }
  .group>summary{border-radius:var(--radius)}
  .group>summary{
    padding:13px 16px; cursor:pointer; font-weight:600; font-size:13.5px;
    color:var(--ink); list-style:none; user-select:none; display:flex; align-items:center; justify-content:space-between;
  }
  .group>summary::-webkit-details-marker{display:none}
  .group>summary::after{
    content:""; width:8px; height:8px; border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
    transform:rotate(45deg); transition:.15s; margin-right:2px;
  }
  .group[open]>summary::after{transform:rotate(-135deg)}
  .group .body{padding:2px 16px 16px; display:flex; flex-direction:column; gap:11px; border-top:1px solid var(--line)}
  .group .body{padding-top:13px}

  .row{display:flex; align-items:center; gap:10px; justify-content:space-between}
  .row label{color:var(--dim); font-size:12.5px; flex:0 0 auto}
  .row .val{color:var(--ink); font-variant-numeric:tabular-nums; font-size:11.5px; min-width:30px; text-align:right; font-weight:600}
  input[type=range]{flex:1; min-width:0; accent-color:var(--ink); height:18px}
  select{
    background:#fff; color:var(--ink); border:1px solid var(--line2); border-radius:9px;
    padding:6px 9px; font-size:12.5px; flex:1; min-width:0; font-family:inherit;
  }
  select:focus{outline:none; border-color:var(--ink)}

  .chips{display:flex; flex-wrap:wrap; gap:7px}
  .chip{
    border:1px solid var(--line2); background:#fff; color:var(--ink);
    padding:6px 13px; border-radius:999px; font-size:12px; font-weight:500;
    cursor:pointer; user-select:none; transition:.13s;
  }
  .chip:hover{border-color:var(--ink)}
  .chip.on{background:var(--ink); border-color:var(--ink); color:#fff}

  #foot{color:var(--dim2); font-size:11.5px; line-height:1.55; margin-top:auto; padding:8px 2px 0}
  #foot a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line2); transition:.15s}
  #foot a:hover{color:var(--ink); border-color:var(--ink)}
  code{background:var(--card2); border:1px solid var(--line); padding:1px 5px; border-radius:5px; font-size:11px; color:var(--dim)}

  /* ---------- sahne ---------- */
  #stage{
    position:relative; display:flex; align-items:center; justify-content:center;
    padding:44px; overflow:auto;
  }
  /* kırpma işaretleri */
  #stage::before,#stage::after{
    content:"+"; position:absolute; color:var(--line2); font-size:22px; font-weight:300; pointer-events:none;
  }
  #stage::before{top:14px; left:22px}
  #stage::after{bottom:14px; right:22px}
  #frame{position:relative; display:flex}
  #frame::before,#frame::after{
    content:"+"; position:absolute; color:var(--line2); font-size:22px; font-weight:300; pointer-events:none;
  }
  #frame::before{top:-34px; right:-30px}
  #frame::after{bottom:-38px; left:-30px}
  #out{
    max-width:100%; max-height:calc(100vh - 170px);
    border-radius:6px; border:1px solid var(--line);
    box-shadow:0 24px 60px -24px rgba(50,45,30,.28), 0 2px 8px rgba(50,45,30,.06);
  }
  #hint{position:absolute; bottom:16px; left:0; right:0; text-align:center; color:var(--dim2); font-size:12.5px; pointer-events:none}

  .spin{display:inline-block; width:10px; height:10px; border:1.5px solid var(--line2);
        border-top-color:var(--ink); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-1px; margin-right:6px}
  @keyframes sp{to{transform:rotate(360deg)}}