/* Kendi Puzzle'ını Tasarla. Marka tonları ve temel düzen kitap ve takvim editörleriyle aynıdır. */
:root{
  --ink:#14173A;
  --parchment:#FBF2E1;
  --parchment-soft:#F3E6C9;
  --paper:#FFFDF8;
  --gold:#D9A441;
  --ember:#E8703C;
  --ember-deep:#CB5A2A;
  --text:#1D1A2E;
  --muted:#756B57;
  --on-dark:#F4EEDC;
  --on-dark-muted:#A5AAD4;
  --line:rgba(29,26,46,.14);
  --font-display:'Fraunces',ui-serif,Georgia,serif;
  --font-script:'Caveat',cursive;
  --font-body:'Figtree',ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--parchment);color:var(--text);font:15px/1.45 var(--font-body);display:flex;flex-direction:column;}
button,input{font:inherit;color:inherit;}
button,label.dugme{cursor:pointer;}
[hidden]{display:none!important;}
h2{font-family:var(--font-display);font-weight:600;margin:0;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.dugme{border:0;border-radius:999px;padding:9px 18px;font-weight:600;background:var(--ember);color:#fff;display:inline-block;text-align:center;}
.dugme:hover{background:var(--ember-deep);}
.dugme:disabled{opacity:.55;cursor:default;}
.dugme.ikincil{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line);}
.dugme.ikincil:hover{background:var(--parchment-soft);}
.dugme.kucuk{padding:7px 14px;font-size:13.5px;}
.dugme.genis{width:100%;padding:13px 18px;font-size:16px;}
.bag{background:none;border:0;padding:0;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px;align-self:flex-start;}

.ust{background:var(--ink);color:var(--on-dark);display:flex;align-items:center;gap:12px;padding:10px 18px;flex-wrap:wrap;}
.marka{display:flex;align-items:baseline;gap:8px;margin-right:auto;}
.marka b{font-family:var(--font-display);font-size:19px;font-weight:600;}
.marka span{font-family:var(--font-script);color:var(--gold);font-size:20px;}
.kayit{font-size:12.5px;color:var(--on-dark-muted);}

.editor{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px;}

/* Sahne */
.sahne{min-width:0;overflow-y:auto;padding:20px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.tuval-kutu{position:relative;width:min(100%,var(--en,900px));border-radius:6px;background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 26px 50px -24px rgba(20,23,58,.55),0 0 0 10px #fff,0 0 0 11px var(--line);margin:12px 0 4px;}
.tuval-kutu canvas{width:100%;height:auto;display:block;border-radius:6px;touch-action:none;cursor:grab;}
.birak{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;cursor:pointer;
  border:3px dashed rgba(232,112,60,.55);border-radius:6px;color:var(--ink);background:rgba(255,253,248,.55);padding:20px}
.birak b{font-family:var(--font-display);font-size:24px;font-weight:600}
.birak span{color:var(--muted)}
.tuval-kutu.uzerinde .birak{display:flex!important;background:rgba(232,112,60,.12);}
.uyari{margin:0;min-height:22px;font-weight:600;font-size:14px;color:var(--ember-deep);text-align:center;}
.ipucu{margin:0;font-size:12.5px;color:var(--muted);text-align:center;max-width:560px;}
.ipucu.sol{text-align:left;}
.kalite-uyarisi{margin:0;max-width:600px;padding:10px 14px;border-radius:12px;background:rgba(232,112,60,.1);border:1px solid rgba(203,90,42,.35);font-size:13.5px;text-align:center;}
.kalite-uyarisi b{color:var(--ember-deep);}

/* Panel */
.panel{overflow-y:auto;padding:14px 14px 30px;background:var(--paper);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}
fieldset{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0;}
legend{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 4px;}
.satir{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.alan{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted);}
input[type=range]{width:100%;accent-color:var(--ember);}
.onay-kutu{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:600;}
.secenekler{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.secenek{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15;}
.secenek b{font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--ink);}
.secenek span{font-weight:700;font-size:13px;}
.secenek small{color:var(--muted);font-size:12px;margin-top:2px;}
.secenek em{font-style:normal;font-weight:700;color:var(--ember-deep);margin-top:6px;font-size:14px;}
.secenek em:empty{display:none;}
.secenek.kucuk{flex-direction:row;justify-content:center;gap:8px;font-weight:700;padding:10px;}
.secenek[aria-pressed="true"]{border-color:var(--ember);box-shadow:0 0 0 2px var(--ember);}
.yon-simge{display:inline-block;border:2px solid currentColor;border-radius:3px;}
.yon-simge.yatay{width:22px;height:16px;}
.yon-simge.dikey{width:16px;height:22px;}
.ozet{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:var(--parchment);}
.fiyat{margin:0;font-weight:700;font-size:15px;text-align:center;}
.fiyat:empty{display:none;}

/* Örtü */
.ortu{position:fixed;inset:0;background:rgba(20,23,58,.72);z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;}
.pencere{background:var(--parchment);border-radius:18px;padding:20px;width:min(560px,100%);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.pencere h2{font-size:21px;}
.pencere p{margin:0;}
.pencere ul{margin:0;padding-left:20px;}
.pencere-alt{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.onay-satiri{display:flex;gap:8px;align-items:flex-start;font-size:14px;}
.onay-satiri input{margin-top:3px;flex:none;}
.pencere img{display:block;width:100%;border-radius:8px;box-shadow:0 10px 24px -14px rgba(20,23,58,.6);}

@media (max-width:900px){
  body{height:auto;min-height:100%;}
  .editor{display:flex;flex-direction:column;}
  .sahne{padding:14px 14px 4px;}
  .panel{border-left:0;overflow:visible;}
  .kayit,.marka span{display:none;}
  #bitir{display:none;}
}