/* THERMOKOR Portfolio 0.4.1 FINAL2
   Bigger book, slim bottom status, right-side TOC, smaller brand band,
   no mirrored face during page turns. */

:root{background:#e8edf1}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:#e8edf1}
#main-content{width:100vw;height:100dvh;overflow:hidden}

.tkbook{
  --tkbook-blue:#1B397D;
  --tkbook-blue-2:#102653;
  --tkbook-green:#4D8744;
  --tkbook-green-bright:#6aa661;
  --tkbook-paper:#fffdfa;
  width:100vw!important;max-width:none!important;height:100dvh!important;
  margin:0!important;padding:0!important;overflow:hidden!important;background:#e8edf1;
}

/* --- Larger, more elegant book canvas --- */
.tkbook__stage{
  width:100%;height:100dvh;min-height:0!important;border:0!important;border-radius:0!important;
  padding:26px 48px 52px!important;overflow:hidden!important;
  background:
    radial-gradient(circle at 13% 7%,rgba(255,255,255,.98),rgba(255,255,255,0) 34%),
    radial-gradient(circle at 89% 78%,rgba(77,135,68,.085),rgba(77,135,68,0) 29%),
    linear-gradient(145deg,#eef2f4 0%,#e1e8eb 100%)!important;
}
.tkbook__book-wrap{
  width:min(calc((100dvh - 88px) * 1.56),calc(100vw - 360px))!important;
  max-height:none!important;margin:0 auto!important;
  transform:translateX(-64px);
  perspective:3000px!important;perspective-origin:50% 48%!important;
  transition:transform .28s ease,width .28s ease;
}
.tkbook:has(.tkbook__toc[hidden]) .tkbook__book-wrap{transform:translateX(0)}
.tkbook__book{
  width:100%!important;max-height:none!important;aspect-ratio:1.56 / 1!important;
  margin:auto;cursor:ew-resize;
}

/* A single cover stays a real portrait page instead of looking square. */
.tkbook__book.is-cover{transform:translateX(-25%) scale(.985)!important}
.tkbook__book.is-end{transform:translateX(25%) scale(.985)!important}

/* --- Smaller logo band, still full-width solid blue --- */
.tkbook-cover__brandbar,.tkbook-back__brandbar{
  position:absolute;z-index:5;left:0;right:0;top:0;min-height:68px;
  display:flex;align-items:center;justify-content:center;padding:11px 26px;
  background:linear-gradient(90deg,var(--tkbook-blue-2),var(--tkbook-blue));
  box-shadow:0 10px 24px rgba(6,18,45,.18)
}
.tkbook-cover__brandbar img,.tkbook-back__brandbar img{
  display:block;width:min(68%,390px);max-height:48px;height:auto;object-fit:contain;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.24))
}
.tkbook-cover__content{bottom:42px!important}
.tkbook-cover__content>.tkbook-brand,.tkbook-back__content>.tkbook-brand{display:none!important}
.tkbook-back__content{padding-top:78px}

/* --- Upper controls: compact TOC + prominent fullscreen --- */
.tkbook__utilities{
  top:14px!important;right:18px!important;padding:0!important;background:transparent!important;
  border:0!important;box-shadow:none!important;backdrop-filter:none!important;gap:8px!important
}
.tkbook__utility{
  min-height:42px!important;padding:10px 14px!important;border:1px solid rgba(27,57,125,.20)!important;
  border-radius:13px!important;background:rgba(255,255,255,.94)!important;color:var(--tkbook-blue)!important;
  font-size:11px!important;font-weight:850!important;box-shadow:0 8px 22px rgba(16,38,83,.10)!important
}
.tkbook__utility:hover{background:var(--tkbook-green)!important;border-color:var(--tkbook-green)!important;color:#fff!important;transform:translateY(-1px)}
.tkbook__utility--fullscreen{
  min-height:44px!important;padding:11px 18px!important;background:var(--tkbook-blue)!important;
  border-color:var(--tkbook-blue)!important;color:#fff!important;font-size:12px!important;
  box-shadow:0 10px 26px rgba(16,38,83,.24)!important
}
.tkbook__utility--fullscreen .tkbook__utility-icon{font-size:18px!important;color:#fff!important}
.tkbook__utility--fullscreen:hover{background:var(--tkbook-green)!important;border-color:var(--tkbook-green)!important}

/* --- Right-side TOC rail, vertically scrollable, no full-screen overlay on desktop --- */
.tkbook__toc{
  position:absolute!important;z-index:1220!important;top:70px!important;right:16px!important;bottom:58px!important;left:auto!important;
  width:264px!important;display:flex!important;justify-content:flex-end!important;
  background:transparent!important;backdrop-filter:none!important;border-radius:18px!important;overflow:visible!important;
  pointer-events:auto
}
.tkbook__toc[hidden]{display:none!important}
.tkbook__toc-panel{
  width:264px!important;height:100%!important;overflow:auto!important;scrollbar-width:thin;
  background:rgba(251,252,250,.97)!important;border:1px solid rgba(27,57,125,.10)!important;
  border-radius:18px!important;box-shadow:0 18px 46px rgba(10,24,48,.14)!important;backdrop-filter:blur(10px)
}
.tkbook__toc-head{
  position:sticky!important;top:0!important;z-index:3!important;padding:17px 17px 14px!important;
  background:linear-gradient(145deg,var(--tkbook-blue-2),var(--tkbook-blue))!important;border:0!important
}
.tkbook__toc-head span{color:#a9d5a2!important;font-size:8px!important;letter-spacing:.15em!important}
.tkbook__toc-head strong{color:#fff!important;font-size:18px!important;line-height:1.08!important}
.tkbook__toc-close{width:34px!important;height:34px!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.10)!important;color:#fff!important;font-size:22px!important}
.tkbook__toc-close:hover{background:var(--tkbook-green)!important}
.tkbook__toc-list{padding:7px 9px 14px!important}
.tkbook__toc-list button{
  grid-template-columns:34px 1fr!important;gap:8px!important;min-height:42px!important;padding:9px 8px!important;
  border-bottom:1px solid rgba(25,58,122,.06)!important;border-radius:8px!important;transition:background .16s ease,transform .16s ease!important
}
.tkbook__toc-list button span:first-child{font-size:8px!important;color:var(--tkbook-green)!important;font-weight:900!important}
.tkbook__toc-list button span:last-child{font-size:10.8px!important;line-height:1.28!important;color:#334158!important;font-weight:760!important}
.tkbook__toc-list button:hover{background:rgba(77,135,68,.09)!important;transform:translateX(-1px)}
.tkbook__toc-list button[aria-current="page"]{background:#edf5eb!important;box-shadow:inset 3px 0 0 var(--tkbook-green)!important}
.tkbook__toc-list button[aria-current="page"] span:last-child{color:var(--tkbook-blue)!important;font-weight:900!important}

/* --- Slim bottom status bar only --- */
.tkbook__dock{
  position:absolute;z-index:1250;left:0;right:0;bottom:0;height:46px;
  display:grid;grid-template-columns:180px minmax(0,1fr) 184px;align-items:stretch;
  background:linear-gradient(90deg,var(--tkbook-blue-2),var(--tkbook-blue));
  border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -9px 26px rgba(10,28,65,.16);color:#fff
}
.tkbook__dock-status{display:flex;align-items:center;gap:12px;padding:0 18px;border-right:1px solid rgba(255,255,255,.12)}
.tkbook__dock-folio{font-size:14px!important;line-height:1!important;font-weight:900!important;letter-spacing:.10em!important;color:#fff!important;white-space:nowrap}
.tkbook__dock .tkbook__folio-line{width:64px!important;height:3px!important;background:rgba(255,255,255,.22)!important;margin:0!important}
.tkbook__dock .tkbook__folio-line i{background:var(--tkbook-green-bright)!important}
.tkbook__dock-nav{display:none!important}
.tkbook__dock-title{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.72);font-size:9px;font-weight:850;letter-spacing:.18em}
.tkbook__dock-fullscreen{
  display:flex;align-items:center;justify-content:center;gap:9px;border:0!important;border-left:1px solid rgba(255,255,255,.12)!important;
  background:#0d2555!important;color:#fff!important;padding:0 16px!important;cursor:pointer;transition:background .18s ease!important
}
.tkbook__dock-fullscreen span{font-size:18px!important}.tkbook__dock-fullscreen strong{font-size:11px!important;color:#fff!important;white-space:nowrap}
.tkbook__dock-fullscreen:hover{background:var(--tkbook-green)!important}
.tkbook__hint,.tkbook__folio{display:none!important}

/* Side arrows: visible but not dominant. Next arrow makes room for TOC. */
.tkbook__edge{width:48px!important;height:68px!important;background:var(--tkbook-blue)!important;color:#fff!important;border:0!important;box-shadow:0 10px 26px rgba(16,38,83,.17)!important}
.tkbook__edge span{font-size:29px!important;color:#fff!important}
.tkbook__edge--prev{left:22px!important}
.tkbook__edge--next{right:292px!important}
.tkbook:has(.tkbook__toc[hidden]) .tkbook__edge--next{right:22px!important}
.tkbook__edge:hover{background:var(--tkbook-green)!important;color:#fff!important;transform:translateY(-50%) scale(1.035)!important}
.tkbook__edge:disabled{opacity:.22!important}

/* --- FINAL5 stable flip mechanics ---
   Canonical 3D page model: front=0deg, back=180deg, sheet turns 0 -> -180deg.
   No opacity swapping, no child backface culling, no mirrored-content hacks. */
.tkbook__sheet{
  transform-style:preserve-3d!important;
  isolation:isolate;
}
.tkbook__face{
  -webkit-backface-visibility:hidden!important;
  backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
  will-change:transform;
}
.tkbook__face--front{
  transform:rotateY(0deg)!important;
  -webkit-transform:rotateY(0deg)!important;
}
.tkbook__face--back{
  transform:rotateY(180deg)!important;
  -webkit-transform:rotateY(180deg)!important;
}

/* Subtle variation without gimmicky distortion. */
.tkbook__sheet.turn-v0{transform-origin:left 50%}
.tkbook__sheet.turn-v1{transform-origin:left 39%}
.tkbook__sheet.turn-v2{transform-origin:left 61%}
.tkbook__sheet.is-turning-forward,.tkbook__sheet.is-turning-backward{transition:none!important;will-change:transform,filter}
.tkbook__sheet.is-turning-forward.turn-v0{animation:tkFlipForwardA .84s cubic-bezier(.30,.03,.12,.99)}
.tkbook__sheet.is-turning-forward.turn-v1{animation:tkFlipForwardB .84s cubic-bezier(.30,.03,.12,.99)}
.tkbook__sheet.is-turning-forward.turn-v2{animation:tkFlipForwardC .84s cubic-bezier(.30,.03,.12,.99)}
.tkbook__sheet.is-turning-backward.turn-v0{animation:tkFlipBackA .84s cubic-bezier(.30,.03,.12,.99)}
.tkbook__sheet.is-turning-backward.turn-v1{animation:tkFlipBackB .84s cubic-bezier(.30,.03,.12,.99)}
.tkbook__sheet.is-turning-backward.turn-v2{animation:tkFlipBackC .84s cubic-bezier(.30,.03,.12,.99)}
@keyframes tkFlipForwardA{0%{transform:rotateY(0)}48%{transform:rotateY(-90deg) rotateZ(-.35deg)}100%{transform:rotateY(-180deg)}}
@keyframes tkFlipForwardB{0%{transform:rotateY(0)}48%{transform:rotateY(-90deg) rotateX(.75deg)}100%{transform:rotateY(-180deg)}}
@keyframes tkFlipForwardC{0%{transform:rotateY(0)}48%{transform:rotateY(-90deg) rotateX(-.75deg)}100%{transform:rotateY(-180deg)}}
@keyframes tkFlipBackA{0%{transform:rotateY(-180deg)}48%{transform:rotateY(-90deg) rotateZ(.35deg)}100%{transform:rotateY(0)}}
@keyframes tkFlipBackB{0%{transform:rotateY(-180deg)}48%{transform:rotateY(-90deg) rotateX(-.75deg)}100%{transform:rotateY(0)}}
@keyframes tkFlipBackC{0%{transform:rotateY(-180deg)}48%{transform:rotateY(-90deg) rotateX(.75deg)}100%{transform:rotateY(0)}}

/* Keep the interaction inside the presentation. */
.tkbook__book,.tkbook__stage{touch-action:none;overscroll-behavior:none}
.tkbook__toc-panel{touch-action:pan-y}

/* Fullscreen gets the largest practical book. */
.tkbook:fullscreen,.tkbook.is-fullscreen{background:#e8edf1!important}
.tkbook:fullscreen .tkbook__stage{padding:18px 44px 46px!important}
.tkbook:fullscreen .tkbook__book-wrap{
  width:min(calc((100vh - 70px) * 1.56),calc(100vw - 350px))!important;
  max-height:none!important
}
.tkbook:fullscreen .tkbook__toc{top:62px!important;bottom:54px!important}
.tkbook:fullscreen .tkbook__dock{height:44px}

/* Tablet: TOC becomes overlay again, book stays large. */
@media(max-width:1180px){
  .tkbook__stage{padding:54px 52px 50px!important}
  .tkbook__book-wrap{width:min(calc((100dvh - 116px) * 1.50),calc(100vw - 135px))!important;transform:none!important}
  .tkbook__book{aspect-ratio:1.50 / 1!important}
  .tkbook__toc{top:0!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;background:rgba(9,20,42,.42)!important;backdrop-filter:blur(6px)!important;border-radius:0!important}
  .tkbook__toc-panel{width:min(360px,94%)!important;height:100%!important;border-radius:0!important;margin-left:auto}
  .tkbook__edge--next{right:22px!important}
}

/* Mobile preserves the single-page mode from the base CSS. */
@media(max-width:860px){
  .tkbook__stage{padding:58px 10px 50px!important}
  .tkbook__book-wrap{width:min(620px,calc(100vw - 16px))!important;max-height:calc(100dvh - 112px)!important;transform:none!important}
  .tkbook__book,.tkbook__book.is-cover,.tkbook__book.is-end{aspect-ratio:.76 / 1!important;transform:none!important}
  .tkbook-cover__brandbar,.tkbook-back__brandbar{min-height:58px;padding:9px 18px}
  .tkbook-cover__brandbar img,.tkbook-back__brandbar img{width:min(70%,330px);max-height:40px}
  .tkbook__utilities{top:9px!important;right:9px!important}
  .tkbook__utility{min-height:36px!important;padding:8px 10px!important}
  .tkbook__utility>span:last-child{display:none}
  .tkbook__dock{height:42px;grid-template-columns:135px 1fr 54px}
  .tkbook__dock-status{padding:0 11px;gap:8px}.tkbook__dock-folio{font-size:12px!important}.tkbook__dock .tkbook__folio-line{width:40px!important}
  .tkbook__dock-title{font-size:7.5px;letter-spacing:.12em}
  .tkbook__dock-fullscreen{padding:0!important}.tkbook__dock-fullscreen strong{display:none}.tkbook__dock-fullscreen span{font-size:18px!important}
  .tkbook__edge{top:auto!important;bottom:50px!important;width:42px!important;height:42px!important;transform:none!important}
  .tkbook__edge:hover{transform:none!important}
  .tkbook__edge--prev{left:10px!important}.tkbook__edge--next{right:10px!important}
  /* Mobile base uses visibility/opacity instead of 3D faces. Do not force desktop backface transforms there. */
  .tkbook__face--front,.tkbook__face--back{transform:translateX(18px)!important}
  .tkbook__face.is-mobile-active{transform:translateX(0)!important}
  .tkbook__sheet.is-turning-forward .tkbook__face--front,.tkbook__sheet.is-turning-forward .tkbook__face--back,.tkbook__sheet.is-turning-backward .tkbook__face--front,.tkbook__sheet.is-turning-backward .tkbook__face--back{animation:none!important}
  .tkbook__sheet.is-turning-forward::after,.tkbook__sheet.is-turning-backward::after{display:none!important}
}

@media(max-width:520px){
  .tkbook__stage{padding-left:7px!important;padding-right:7px!important}
  .tkbook__dock-title span{display:none}
}

@media(prefers-reduced-motion:reduce){
  .tkbook__sheet.is-turning-forward,.tkbook__sheet.is-turning-backward,
  .tkbook__sheet.is-turning-forward .tkbook__face,.tkbook__sheet.is-turning-backward .tkbook__face{animation:none!important}
}