/* STORY BOOK — canlı hikaye kitabı */
.sb-main{ flex:1; min-height:0; display:flex; align-items:stretch; gap:12px; }
.sb-arrow{ flex-shrink:0; align-self:center; width:62px; height:62px; border-radius:50%; border:0; cursor:pointer; font-size:28px; color:#1B1740;
  background:var(--gk-gold); border-bottom:5px solid #B45309; box-shadow:0 8px 20px rgba(0,0,0,.35); transition:transform .15s; }
.sb-arrow:hover:not(:disabled){ transform:scale(1.08); }
.sb-arrow:disabled{ opacity:.25; cursor:default; }
.sb-view{ flex:1; min-width:0; min-height:0; display:flex; perspective:1800px; }
.sb-spread{ flex:1; min-height:0; display:grid; grid-template-columns:1.05fr 1fr; border-radius:22px; overflow:hidden; position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 6px #7C4A21, 0 0 0 10px #5B3413; background:#FFFBF2; transform-origin:center left; }
.sb-spread::after{ content:''; position:absolute; top:0; bottom:0; left:51.2%; width:34px; transform:translateX(-50%); pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.16) 45%, rgba(0,0,0,.22) 50%, rgba(0,0,0,.08) 60%, rgba(0,0,0,0)); }
.sb-spread.end::after, .sb-spread.cover::after{ display:none; }
.sb-spread.in{ animation:sbIn .35s ease both; }
.sb-spread.outL{ animation:sbOutL .28s ease-in both; transform-origin:left center; }
.sb-spread.outR{ animation:sbOutR .28s ease-in both; transform-origin:right center; }
.sb-spread.fromR{ animation:sbFromR .38s ease-out both; transform-origin:left center; }
.sb-spread.fromL{ animation:sbFromL .38s ease-out both; transform-origin:right center; }
@keyframes sbIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sbOutL{ to{ transform:rotateY(-24deg) translateX(-30px); opacity:0; } }
@keyframes sbOutR{ to{ transform:rotateY(24deg) translateX(30px); opacity:0; } }
@keyframes sbFromR{ from{ transform:rotateY(22deg) translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes sbFromL{ from{ transform:rotateY(-22deg) translateX(-40px); opacity:0; } to{ transform:none; opacity:1; } }
.sb-pic{ min-height:0; display:flex; align-items:center; justify-content:center; background:#FFF7E6; overflow:hidden; }
.sb-pic img{ width:100%; height:100%; object-fit:contain; object-position:center; }
.sb-paper{ position:relative; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:clamp(18px,4vh,44px) clamp(20px,3vw,48px);
  background:repeating-linear-gradient(180deg, #FFFBF2 0 38px, #F3EAD6 38px 39px); color:#2B2250; overflow:auto; }
.sb-text{ display:flex; flex-direction:column; gap:clamp(10px,2vh,18px); }
.sb-s{ margin:0; font-family:'Fredoka','Nunito',sans-serif; font-weight:600; font-size:clamp(20px,3.4vh,32px); line-height:1.45; padding:4px 10px; border-radius:14px;
  cursor:pointer; transition:background .25s, color .25s; }
.sb-s:hover{ background:rgba(124,58,237,.07); }
.sb-s.on{ background:#FEF08A; box-shadow:0 0 0 3px #FACC15; color:#1B1740; }
.sb-s.done{ color:#6B6395; }
.sb-w.has{ border-bottom:2px dotted rgba(124,58,237,.45); cursor:help; }
.sb-w.sel{ background:#C4B5FD; border-radius:6px; }
.sb-pno{ position:absolute; right:18px; bottom:10px; font-family:'Fredoka',sans-serif; font-weight:700; color:#B8A77E; font-size:18px; }
.sb-pop{ position:fixed; z-index:40000; width:220px; padding:10px 14px; border-radius:16px; background:#1B1740; color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.45);
  border:2px solid var(--gk-gold); display:flex; flex-direction:column; align-items:center; gap:2px; opacity:0; pointer-events:none; transform:translateY(6px); transition:all .18s; }
.sb-pop.show{ opacity:1; transform:none; }
.sb-pop b{ font-family:'Fredoka',sans-serif; font-size:20px; color:var(--gk-gold); }
.sb-pop span{ font-weight:800; font-size:18px; color:#5EEAD4; } .sb-pop span.no{ color:#9CA3AF; }
/* kapak ve son */
.sb-coverside{ align-items:center; text-align:center; gap:10px; background:linear-gradient(160deg,#FFFBF2,#FDE7C8); }
.sb-kicker{ font-weight:900; letter-spacing:2px; color:#B45309; font-size:14px; text-transform:uppercase; }
.sb-coverside h1, .sb-endside h1{ margin:0; font-family:'Fredoka',sans-serif; font-size:clamp(30px,5.4vh,52px); color:#DB2777; line-height:1.05; }
.sb-coverside p{ margin:0; font-weight:800; color:#6B6395; }
.sb-tips{ list-style:none; margin:8px 0; padding:0; display:flex; flex-direction:column; gap:6px; font-weight:700; color:#2B2250; font-size:clamp(14px,2.1vh,18px); text-align:left; }
.sb-spread.cover .sb-pic img{ object-fit:contain; background:#fff; }
.sb-spread.end{ grid-template-columns:1fr; }
.sb-endside{ align-items:center; text-align:center; gap:12px; background:linear-gradient(160deg,#FFFBF2,#E9D5FF); }
.sb-endicon{ font-size:80px; }
.sb-endside p{ margin:0; font-weight:800; font-size:20px; color:#4C1D95; }
.sb-endbtns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px; }
/* üst araçlar */
.sb-tool{ min-height:48px; padding:0 16px; border-radius:16px; border:0; cursor:pointer; color:#fff; font-family:'Fredoka',sans-serif; font-weight:700; font-size:18px;
  background:var(--gk-panel); border:2px solid var(--gk-line); border-bottom:4px solid var(--gk-shadow); display:inline-flex; align-items:center; gap:6px; }
.sb-tool.read{ background:#0EA5E9; border-color:#38BDF8; border-bottom-color:#075985; }
.sb-tool.on{ background:#22C55E; border-color:#86EFAC; border-bottom-color:#15803D; animation:gkPulse .6s infinite alternate; }
.sb-tool:disabled{ opacity:.4; cursor:default; animation:none; }
/* sözlük */
.sb-gl h2{ margin:0 0 12px; font-family:'Fredoka',sans-serif; color:#1B1740; }
.sb-glgrid{ max-height:60vh; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; text-align:left; }
.sb-gi{ background:#F5F3FF; border-radius:12px; padding:6px 10px; display:flex; flex-direction:column; }
.sb-gi b{ color:#6D28D9; font-size:16px; } .sb-gi span{ color:#374151; font-weight:700; font-size:14px; }
@media (max-width:820px){
  .sb-arrow{ display:none; }
  .sb-spread{ grid-template-columns:1fr; grid-template-rows:minmax(180px,40vh) auto; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 4px #7C4A21; }
  .sb-spread::after{ display:none; }
  .sb-pic img{ object-fit:contain; }
  .sb-paper{ padding:16px 14px 34px; }
  .sb-s{ font-size:20px; }
  .sb-tool span{ display:none; }
  .sb-nav-m{ display:flex !important; }
}
.sb-nav-m{ display:none; gap:10px; justify-content:center; }
.sb-nav-m .gk-btn{ flex:1; }
.sb-s{ white-space:pre-line; }
.sb-ctitle{ cursor:pointer; } .sb-cspk{ font-size:.6em; vertical-align:middle; display:inline-block; animation:gkPulse .8s infinite alternate; }