/* Kendi Kitabını Tasarla — prototip. Marka tonları temadan alınmıştır. */
:root{
  --ink:#14173A;
  --ink-soft:#1F2456;
  --parchment:#FBF2E1;
  --parchment-soft:#F3E6C9;
  --parchment-deep:#EADCB8;
  --paper:#FFFDF8;
  --gold:#D9A441;
  --ember:#E8703C;
  --ember-deep:#CB5A2A;
  --success:#3F8F5F;
  --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,select,textarea{font:inherit;color:inherit;}
button,label.dugme{cursor:pointer;}
[hidden]{display:none!important;}
h1,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.ikincil.koyu{color:var(--on-dark);box-shadow:inset 0 0 0 1px rgba(244,238,220,.3);}
.dugme.ikincil.koyu:hover{background:rgba(255,255,255,.08);}
.dugme.kucuk{padding:7px 14px;font-size:13.5px;}
.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:132px minmax(0,1fr) 330px;}

/* Sayfa şeridi */
.serit{overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:10px;background:var(--parchment-soft);border-right:1px solid var(--line);}
.kucuk-sayfa{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--muted);}
.kucuk-sayfa canvas{width:96px;height:96px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--line);display:block;}
.kucuk-sayfa[aria-current="true"]{color:var(--text);}
.kucuk-sayfa[aria-current="true"] canvas{box-shadow:0 0 0 3px var(--ember);}
.kucuk-sayfa.eksik span::after{content:" •";color:var(--ember);}

/* Sahne */
.sahne{min-width:0;overflow-y:auto;padding:14px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.sahne-ust{display:flex;align-items:center;gap:14px;}
.sahne-ust h1{font-size:20px;min-width:150px;text-align:center;}
.ok{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:22px;line-height:1;}
.ok:disabled{opacity:.35;cursor:default;}
/* Açık kitap: iki sayfa yan yana, ortada sırt gölgesi. */
.kitap{position:relative;display:flex;width:min(100%,calc((100vh - 280px)*2));min-width:260px;filter:drop-shadow(0 18px 22px rgba(20,23,58,.32));}
.kitap canvas{flex:1;min-width:0;aspect-ratio:1;display:block;background:#fff;touch-action:none;cursor:pointer;}
.kitap canvas.secili{outline:3px solid var(--ember);outline-offset:-3px;cursor:grab;}
.kitap::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:7%;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(20,23,58,.16) 46%,rgba(20,23,58,.3) 50%,rgba(20,23,58,.16) 54%,transparent);}
.kitap.tek{width:min(100%,calc(100vh - 280px));}
.kitap.tek #tuval-sol,.kitap.tek::after{display:none;}
.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:520px;}

/* Panel */
.panel{overflow-y:auto;padding:12px 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);flex:1;min-width:90px;}
.alan select,textarea{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;font-weight:400;color:var(--text);width:100%;font-size:16px;}
textarea{resize:vertical;}
input[type=range]{width:100%;accent-color:var(--ember);}
input[type=color]{width:100%;height:36px;border:1px solid var(--line);border-radius:10px;padding:2px;background:#fff;}
.onay-kutu{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:600;color:var(--muted);padding-bottom:8px;}
.duzenler{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;}
.duzen{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 3px 4px;font-size:10.5px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.15;}
.duzen[aria-pressed="true"]{border-color:var(--ember);box-shadow:0 0 0 2px var(--ember);color:var(--text);}
.duzen i{width:34px;height:34px;border-radius:3px;background:var(--parchment-soft);position:relative;display:block;overflow:hidden;}
.duzen i::before,.duzen i::after{content:"";position:absolute;left:0;right:0;}
.duzen i::before{background:var(--ink-soft);}
.duzen i::after{height:3px;left:6px;right:6px;background:var(--muted);box-shadow:0 5px 0 var(--muted);border-radius:2px;}
.duzen[data-duzen=tam] i::before{top:0;bottom:0;} .duzen[data-duzen=tam] i::after{bottom:9px;background:#fff;box-shadow:0 5px 0 #fff;}
.duzen[data-duzen=ust] i::before{top:0;height:60%;} .duzen[data-duzen=ust] i::after{bottom:8px;}
.duzen[data-duzen=alt] i::before{bottom:0;height:60%;} .duzen[data-duzen=alt] i::after{top:4px;}
.duzen[data-duzen=yazi] i::after{top:11px;box-shadow:0 5px 0 var(--muted),0 10px 0 var(--muted);}
.duzen[data-duzen=gorsel] i::before{top:0;bottom:0;} .duzen[data-duzen=gorsel] i::after{display:none;}

/* Örtü: önizleme ve bitirme pencereleri */
.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.genis{width:min(1000px,100%);}
.pencere h2{font-size:21px;}
.pencere p{margin:0;}
.pencere ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;}
.pencere-alt{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.yayilim{display:flex;justify-content:center;gap:2px;background:var(--ink);padding:14px;border-radius:12px;}
.yayilim canvas{width:min(46%,420px);aspect-ratio:1;background:#fff;display:block;}
.yayilim.tek canvas{width:min(70%,420px);}
.gezin{display:flex;align-items:center;justify-content:center;gap:14px;font-weight:600;}

@media (max-width:900px){
  body{height:auto;min-height:100%;}
  .editor{display:flex;flex-direction:column;}
  .sahne{order:1;overflow:visible;padding:12px;}
  .serit{order:2;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-block:1px solid var(--line);padding:10px;}
  .kucuk-sayfa canvas{width:64px;height:64px;}
  .panel{order:3;border-left:0;overflow:visible;}
  .kitap.tek{width:min(100%,70vh);}
  .kayit{display:none;}
  .marka span{display:none;}
}

.duzen[data-duzen=kapak] i::before{top:0;bottom:0;} .duzen[data-duzen=kapak] i::after{top:6px;height:5px;background:#fff;box-shadow:0 20px 0 -1px #fff;}
#serbest-alani[hidden]{display:none!important;}
.kilit-notu{margin:0;padding:10px 12px;border-radius:12px;background:var(--parchment-soft);font-size:13.5px;font-weight:600;}
.kucuk-sayfa.kilitli span::after{content:" · sabit";font-weight:500;}
.duzen[data-duzen=kapak2] i{background:var(--parchment);box-shadow:inset 0 0 0 1px var(--gold);} .duzen[data-duzen=kapak2] i::before{top:10px;bottom:7px;left:6px;right:6px;border-radius:3px;box-shadow:0 0 0 1.5px #fff;}
.duzen[data-duzen=kapak2] i::after{top:3px;height:4px;background:var(--ink);box-shadow:none;}
.duzen[data-duzen=kapak3] i{background:var(--ink);} .duzen[data-duzen=kapak3] i::before{top:10px;bottom:5px;background:#8fc0c9;}
.duzen[data-duzen=kapak3] i::after{top:3px;height:4px;background:#fff;box-shadow:none;}
.duzen[data-duzen=kapak4] i::before{top:0;bottom:0;background:linear-gradient(#fff 25%,var(--ink-soft) 80%);}
.duzen[data-duzen=kapak4] i::after{top:6px;height:5px;background:#111;box-shadow:none;}

/* ---------- Tanıtım turu ---------- */
.bag.acik{color:var(--on-dark);align-self:center;}
.tur-vurgu{position:fixed;z-index:40;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 3px var(--gold),0 0 0 200vmax rgba(20,23,58,.74);transition:left .25s,top .25s,width .25s,height .25s;}
.tur-kart{position:fixed;z-index:41;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 24px));
  background:var(--parchment);border-radius:16px;padding:16px 18px;box-shadow:0 20px 50px -10px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:8px;}
.tur-kart.altta{bottom:16px;}
.tur-kart.ustte{top:16px;}
.tur-kart.orta{top:50%;transform:translate(-50%,-50%);}
.tur-kart h2{font-size:19px;}
.tur-kart p{margin:0;font-size:14.5px;}
.tur-sayac{font-size:12px!important;font-weight:700;color:var(--muted);letter-spacing:.06em;}
.tur-dugmeler{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:4px;}
.tur-dugmeler .bag{margin-right:auto;align-self:center;}
@media (prefers-reduced-motion:reduce){.tur-vurgu{transition:none;}}
.kalite-uyarisi{margin:0;max-width:560px;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);}
.onay-satiri{display:flex;gap:8px;align-items:flex-start;font-size:14px;}
.onay-satiri input{margin-top:3px;flex:none;}
.fiyat{margin:0;font-weight:700;font-size:15px;}
.fiyat:empty{display:none;}