/* Kendi Foto Kitabını Tasarla. Marka tonları ve temel düzen kitap, takvim ve puzzle 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,select,textarea{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%;}
.ozet .dugme.genis{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:270px minmax(0,1fr) 320px;}

/* Fotoğraf tepsisi */
.tepsi{min-height:0;display:flex;flex-direction:column;background:var(--paper);border-right:1px solid var(--line);}
.tepsi-ust{padding:14px 14px 10px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line);}
.tepsi-ust h2{font-size:18px;}
.tepsi-ust h2 small{font-family:var(--font-body);font-size:13px;color:var(--muted);font-weight:600;}
.fotolar{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start;}
.fotolar.uzerinde{background:rgba(232,112,60,.08);}
/* Kare kutu alt boşlukla kurulur: iPhone Safari kaydırılan grid içinde aspect-ratio satırlarını yanlış hesaplayıp küçük resimleri üst üste bindiriyordu. */
.foto{position:relative;display:block;width:100%;height:0;padding:0 0 100%;border-radius:6px;overflow:hidden;background:var(--parchment-soft);cursor:grab;border:0;}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.foto .adet{position:absolute;right:3px;bottom:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;}
.foto .sil{position:absolute;right:2px;top:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(20,23,58,.75);color:#fff;font-size:13px;line-height:20px;padding:0;display:none;}
.foto:hover .sil,.foto:focus-within .sil{display:block;}
.foto.kullanildi img{opacity:.55;}
.foto .adet.cok{background:var(--ember);}
.bildirim{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;bottom:22px;transform:translateY(20px);max-width:560px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;line-height:1.4;box-shadow:0 14px 34px -12px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;}
.bildirim.acik{opacity:1;transform:translateY(0);}
.tepsi-bos{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:30px 14px;border:2px dashed rgba(232,112,60,.55);border-radius:12px;cursor:pointer;color:var(--ink);}
.tepsi-bos b{font-family:var(--font-display);font-size:18px;font-weight:600;}
.tepsi-bos span{font-size:13px;color:var(--muted);}
.serit-araclar,.mobil-yazi{display:none;}
.tepsi-alt{padding:8px 14px 12px;border-top:1px solid var(--line);margin:0;}

/* Sahne */
.orta{min-width:0;min-height:0;display:flex;flex-direction:column;}
.sahne{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 12px 6px;}
.tuval-kutu{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;}
.tuval-kutu canvas{display:block;touch-action:none;filter:drop-shadow(0 22px 26px rgba(20,23,58,.32));}
.tuval-kutu.uzerinde canvas{outline:3px dashed var(--ember);outline-offset:6px;}
.ok{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 8px rgba(20,23,58,.18);font-size:26px;line-height:38px;color:var(--ink);padding:0;}
.ok:disabled{opacity:.3;cursor:default;}
.sahne-baslik{margin:0;text-align:center;font-weight:700;font-size:14px;color:var(--ink);}
.uyari{margin:2px 0 0;min-height:20px;font-weight:600;font-size:13.5px;color:var(--ember-deep);text-align:center;padding:0 12px;}
.serit{display:flex;gap:10px;overflow-x:auto;padding:8px 14px 12px;border-top:1px solid var(--line);background:rgba(255,253,248,.6);}
.serit button{flex:none;border:0;background:none;padding:4px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--muted);}
.serit canvas{display:block;height:54px;width:auto;box-shadow:0 2px 6px rgba(20,23,58,.2);background:#fff;}
.serit button[aria-current="true"]{background:var(--parchment-soft);color:var(--ink);}
.serit button[aria-current="true"] canvas{outline:2px solid var(--ember);outline-offset:2px;}
.serit .eksik-isaret{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;}
#baglam{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:8px;align-items:center;flex-wrap:wrap;}
.alan{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted);}
.alan input[type=text],.alan textarea,.alan select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;color:var(--text);font-weight:400;font-size:14px;}
.alan textarea{resize:vertical;min-height:64px;}
input[type=range]{width:100%;accent-color:var(--ember);}
.onay-kutu{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;}
.ipucu{margin:0;font-size:12.5px;color:var(--muted);}
.ipucu.sol{text-align:left;}
.ipucu:empty{display:none;}

.boyutlar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.secenek{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.15;}
.secenek b{font-size:13.5px;color:var(--ink);}
.secenek small{color:var(--muted);font-size:11px;text-align:center;}
.secenek[aria-pressed="true"]{border-color:var(--ember);box-shadow:0 0 0 2px var(--ember);}
.boyut-simge{display:block;border:2px solid var(--ink);border-radius:2px;margin-bottom:4px;}
.boyut-simge.kare{width:24px;height:24px;}
.boyut-simge.yatay{width:30px;height:21px;margin-top:3px;}
.boyut-simge.dikey{width:19px;height:27px;}
.sayfa-sayisi{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;}
.sayfa-sayisi span{margin-right:auto;color:var(--muted);}
.sayfa-sayisi b{min-width:34px;text-align:center;font-size:17px;color:var(--ink);}
.sayfa-sayisi .dugme{width:34px;height:34px;padding:0;font-size:18px;}

.sablonlar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.sablon{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--muted);}
.sablon canvas{width:100%;height:auto;display:block;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.sablon[aria-pressed="true"]{border-color:var(--ember);box-shadow:0 0 0 2px var(--ember);color:var(--ink);}
.renkler{display:flex;gap:8px;flex-wrap:wrap;}
.yazitipleri{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.yazitipleri button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:6px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.yazitipleri button[aria-pressed="true"]{border-color:var(--ember);background:rgba(232,112,60,.08);}
.yazitipleri .ornek{height:34px;display:block;width:100%;padding:0 4px;box-sizing:border-box;text-align:center;line-height:34px;color:var(--ink);white-space:nowrap;overflow:hidden;}
.yazitipleri .ornek.iki{white-space:normal;line-height:1.05;display:flex;align-items:center;justify-content:center;}
.yazitipleri .ornek span{display:inline-block;}
.yazitipleri .ornek.iki span{max-width:100%;text-wrap:balance;}
.yazitipleri .ad{font-size:11px;color:var(--muted,#6b6878);font-weight:600;}
.oto-renk{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 14px;font-size:13px;font-weight:600;margin-bottom:8px;}
.oto-renk[aria-pressed="true"]{border-color:var(--ember);background:rgba(232,112,60,.08);}
.alt-baslik{margin:12px 0 6px;font-size:12.5px;font-weight:700;color:var(--muted,#6b6878);}
.renk{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.18);padding:0;}
.renk[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ember);}
.renkler.genis{display:grid;grid-template-columns:repeat(9,minmax(0,34px));gap:7px;}
.renkler.genis .renk{width:100%;height:auto;aspect-ratio:1;}
.renk.ozel{position:relative;cursor:pointer;overflow:hidden;background:conic-gradient(#e94b4b,#e9c24b,#6fd06a,#4bc6e9,#5a5ce9,#d24be9,#e94b4b);}
.renk.ozel::after{content:"";position:absolute;inset:26%;border-radius:50%;background:var(--ozel,#fff);border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);}
.renk.ozel input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;}
.renk.ozel:focus-within{outline:2px solid var(--ember);outline-offset:2px;}
.duzenler{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.duzen{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:5px;display:flex;align-items:center;justify-content:center;aspect-ratio:1;}
.duzen svg{width:100%;height:100%;display:block;}
.duzen[aria-pressed="true"]{border-color:var(--ember);box-shadow:0 0 0 2px var(--ember);}
.duzen:disabled{opacity:.35;cursor:default;}
.sayfa-sec{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.sayfa-sec button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px;font-size:13px;font-weight:600;}
.sayfa-sec button[aria-pressed="true"]{border-color:var(--ember);background:rgba(232,112,60,.08);}
.sayfa-sec.uclu{grid-template-columns:repeat(3,1fr);}
.sayfa-sec.uclu button{display:flex;align-items:center;justify-content:center;gap:7px;}
.cerceve-ornek{width:16px;height:16px;border-radius:3px;background:#b9a68a;box-shadow:inset 0 0 0 3px #fff,0 0 0 1px rgba(0,0,0,.2);}
.cerceve-ornek.siyah{box-shadow:inset 0 0 0 3px #151517,0 0 0 1px rgba(0,0,0,.2);}
.cerceve-ornek.yok{box-shadow:0 0 0 1px rgba(0,0,0,.2);}

.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;}
.kalite-uyarisi{margin:0;padding:10px 12px;border-radius:12px;background:rgba(232,112,60,.1);border:1px solid rgba(203,90,42,.35);font-size:12.5px;}
.kalite-uyarisi b{color:var(--ember-deep);}

/* Ö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(580px,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;max-height:180px;overflow-y:auto;}
.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 canvas{display:block;max-width:100%;height:auto;margin:0 auto;box-shadow:0 10px 24px -14px rgba(20,23,58,.6);}
.ilerleme{height:8px;border-radius:4px;background:var(--parchment-soft);overflow:hidden;}
.ilerleme i{display:block;height:100%;width:0;background:var(--ember);transition:width .2s;}

@media (max-width:1100px){
  .editor{grid-template-columns:220px minmax(0,1fr) 290px;}
  .fotolar{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  body{height:auto;min-height:100%;}
  .editor{display:flex;flex-direction:column;}
  /* Kitap alanı (sahne, sayfa adı, şerit) ekranın üstünde sabit kalır; fotoğraflar ve ayarlar altında kayar */
  .orta{order:1;position:-webkit-sticky;position:sticky;top:0;z-index:20;background:var(--parchment);box-shadow:0 10px 18px -14px rgba(20,23,58,.45);}
  .sahne{height:clamp(190px,36vh,320px);height:clamp(190px,36svh,320px);padding:8px 4px 2px;}
  .sahne-baslik{font-size:13px;}
  .uyari:empty{display:none;}
  .serit{padding:6px 10px 8px;gap:6px;}
  .serit canvas{height:40px;}
  .serit button{font-size:10.5px;padding:3px;}
  .ok{width:32px;height:32px;font-size:22px;line-height:30px;}
  .tepsi{order:2;border-right:0;border-top:1px solid var(--line);}
  /* Fotoğraflar ekranın altında sabit, yana kayan şerit: 3 tam + 1 yarım küçük resim görünür (kaydırılabildiği belli olur) */
  /* sol kenar 10px + araç sütunu (0,8 kare) + 4 aralık × 8px + 3 tam + 1 yarım fotoğraf = 100vw  →  4,3 kare = 100vw − 42px */
  :root{--kare:calc((100vw - 42px) / 4.3);}
  /* Fotoğraflarım başlığı ve büyük "Fotoğraf ekle" / "Otomatik yerleştir" düğmeleri yerine alttaki şeritteki araç sütunu */
  .tepsi-ust h2,.tepsi-ust label.dugme,#otomatik{display:none;}
  .tepsi-ust{padding:8px 14px;}
  body{padding-bottom:calc(var(--kare) + 26px + env(safe-area-inset-bottom));}
  .fotolar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:row;align-items:center;gap:8px;
    overflow-x:auto;overflow-y:hidden;max-height:none;padding:9px 10px calc(9px + env(safe-area-inset-bottom));
    background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -10px 20px -14px rgba(20,23,58,.45);
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:10px;overscroll-behavior-x:contain;}
  .fotolar .foto{flex:none;width:var(--kare);height:var(--kare);padding:0;scroll-snap-align:start;}
  .serit-araclar{display:flex;flex:none;flex-direction:column;gap:6px;width:calc(var(--kare) * .8);height:var(--kare);scroll-snap-align:start;}
  .foto-ekle{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-height:0;
    border:2px dashed rgba(232,112,60,.6);border-radius:8px;color:var(--ember-deep);cursor:pointer;}
  .foto-ekle b{font-size:20px;line-height:1;font-weight:600;}
  .foto-ekle span{font-size:12px;font-weight:700;}
  .oto-mini{flex:1;min-height:0;border:1.5px solid var(--line);background:#fff;border-radius:8px;color:var(--ink);font-size:11px;font-weight:700;padding:0 2px;}
  .tepsi-bos:not([hidden]) ~ .serit-araclar{display:none;}
  .tepsi-bos{flex:1;flex-direction:row;justify-content:center;gap:10px;padding:0 14px;height:var(--kare);text-align:left;}
  .tepsi-bos b{font-size:16px;}
  .tepsi-bos span,.tepsi-bos .masa-yazi{display:none;}
  .tepsi-bos .mobil-yazi{display:inline;color:var(--ember-deep);}
  .bildirim{bottom:calc(var(--kare) + 36px + env(safe-area-inset-bottom));}
  .panel{order:3;border-left:0;overflow:visible;}
  .kayit,.marka span,.tepsi-alt{display:none;}
  .ust{justify-content:center;}
  .marka{margin:0 auto;justify-content:center;text-align:center;}
  #bitir{display:none;}
}