*{box-sizing:border-box}
:root{
  --bg:#0d0d0f;
  --surface:#151519;
  --surface-2:#1a1a1f;
  --line:rgba(255,255,255,.09);
  --muted:#9d9da7;
  --red:#be0d0d;
  --red-bright:#d6282b;
  --white:#fff;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}

.site-header{
  position:sticky;top:0;z-index:50;
  min-height:84px;padding:0 42px;
  display:flex;align-items:center;gap:34px;
  background:rgba(13,13,15,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.brand img{display:block;width:auto;height:62px}
.main-nav{display:flex;align-items:center;gap:23px;flex:1}
.main-nav a{font-size:12px;font-weight:700;letter-spacing:.06em;color:#d3d3d7;transition:.2s}
.main-nav a:hover{color:#fff}
.header-actions{display:flex;align-items:center;gap:12px}
.icon-button,.profile-button,.language-switch button{
  border:0;background:transparent;color:#fff
}
.icon-button{font-size:25px;width:40px;height:40px}
.profile-button{padding:10px 15px;border:1px solid var(--line);border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.07em}
.language-switch{display:flex;align-items:center;gap:5px;color:#666;font-size:11px}
.language-switch button{padding:5px;color:#777;font-size:11px;font-weight:800}
.language-switch button.active{color:var(--red-bright)}

.search-panel{
  display:none;padding:22px 42px;background:#111114;border-bottom:1px solid var(--line)
}
.search-panel.open{display:block}
.search-panel label{display:block;margin-bottom:10px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#aaa}
.search-row{display:flex;gap:10px}
.search-row input{flex:1;padding:14px 16px;border:1px solid var(--line);border-radius:7px;background:#09090b;color:#fff;outline:none}
.search-row button,.full-button{padding:0 24px;border:0;border-radius:7px;background:var(--red);color:#fff;font-weight:800}

.comic-hero{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:300px minmax(0,1fr) 235px;gap:44px;
  padding:70px max(48px,calc((100vw - 1450px)/2));
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 18% 35%,rgba(190,13,13,.18),transparent 25%),
    linear-gradient(110deg,#151519 0%,#0d0d0f 58%,#111114 100%);
}
.hero-glow{position:absolute;width:520px;height:520px;left:-140px;top:-130px;border-radius:50%;background:rgba(190,13,13,.13);filter:blur(85px);pointer-events:none}
.hero-cover-wrap,.hero-info,.hero-side{position:relative;z-index:1}
.hero-cover{
  position:relative;overflow:hidden;height:445px;padding:28px;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:
    linear-gradient(to top,rgba(0,0,0,.94),transparent 68%),
    radial-gradient(circle at 60% 25%,#8e1313 0%,#291217 24%,#131317 52%,#050506 100%);
  box-shadow:0 28px 65px rgba(0,0,0,.58),0 0 38px rgba(190,13,13,.12);
}
.hero-cover:before{content:"";position:absolute;inset:28px;border:1px solid rgba(255,255,255,.06);border-radius:50% 50% 45% 45%;transform:rotate(-13deg);pointer-events:none}
.hero-cover.has-image:before{display:none}.hero-cover-image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.cover-kicker{font-size:10px;letter-spacing:.26em;color:#bfbfc7}
.hero-cover strong{font-size:29px;letter-spacing:.08em}
.hero-cover small{color:#8f8f98;letter-spacing:.12em}
.preview-button{width:100%;margin-top:13px;padding:12px;border:1px solid var(--line);border-radius:7px;background:#18181c;color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em}


.series-status-badge{display:inline-flex;align-items:center;width:max-content;margin:0 0 18px;padding:9px 14px;border-radius:999px;font-size:11px;font-weight:950;letter-spacing:.12em;box-shadow:0 0 24px rgba(214,40,43,.18)}
.series-status-badge.ongoing{border:1px solid rgba(214,40,43,.72);background:rgba(190,13,13,.16);color:#ff4a4d}
.series-status-badge.completed{border:1px solid rgba(91,211,139,.62);background:rgba(34,112,65,.18);color:#75d29a;box-shadow:0 0 24px rgba(74,190,119,.14)}

.breadcrumbs{display:flex;gap:9px;align-items:center;margin-bottom:34px;color:#777;font-size:11px;font-weight:700;letter-spacing:.05em}
.breadcrumbs a:hover{color:#fff}
.eyebrow{margin:0 0 10px;color:var(--red-bright);font-size:12px;font-weight:800;letter-spacing:.12em}
.hero-info h1{margin:0;font-size:clamp(52px,6vw,88px);line-height:.96;letter-spacing:-.045em}
.localized-title{margin:15px 0 0;color:#85858e}
.localized-title strong{color:#d8d8dc}
.comic-subtitle{margin:8px 0 0;color:#fff;font-size:clamp(18px,1.7vw,26px);font-weight:750;line-height:1.2;letter-spacing:.01em}
.hero-meta{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}
.hero-meta span{padding:7px 10px;border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.025);font-size:10px;font-weight:800;letter-spacing:.07em}
.hero-summary{max-width:720px;color:#b8b8c0;font-size:16px}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.primary-action,.secondary-action{
  min-width:160px;padding:14px 22px;border-radius:7px;font-size:12px;font-weight:900;letter-spacing:.07em
}
.primary-action{border:1px solid var(--red);background:var(--red);color:#fff;box-shadow:0 12px 28px rgba(190,13,13,.22)}
.secondary-action{border:1px solid var(--line);background:#18181c;color:#fff}
.secondary-action.added,.side-single-action button.added{border-color:#2b7a4b;background:#143923;color:#c7f3d7}
.quick-credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.quick-credits a{padding:15px 17px;background:#131316}
.quick-credits span,.credits-grid span,.property-list span,.person-link span,.side-label{display:block;color:#72727c;font-size:9px;font-weight:800;letter-spacing:.11em}
.quick-credits strong{font-size:13px}
.quick-credits a:hover strong,.credits-grid a:hover strong{color:var(--red-bright)}

.hero-side{display:flex;flex-direction:column;gap:12px}
.side-card{padding:18px;border:1px solid var(--line);border-radius:9px;background:rgba(24,24,28,.78)}
.side-card strong{display:block;margin-top:5px;font-size:14px}
.side-actions{padding:8px}
.side-actions button{width:100%;padding:12px 8px;border:0;border-bottom:1px solid var(--line);background:transparent;color:#d8d8dd;text-align:left;font-size:10px;font-weight:800;letter-spacing:.055em}
.side-actions button:last-child{border-bottom:0}
.side-actions button:hover{color:#fff;background:rgba(255,255,255,.035)}

.page-layout{
  max-width:1450px;margin:auto;padding:72px 48px 90px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:54px
}
.content-section{margin-bottom:70px}
.section-heading{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.section-heading h2{margin:0;white-space:nowrap;font-size:22px;letter-spacing:.035em}
.section-heading span{height:1px;flex:1;background:linear-gradient(90deg,rgba(214,40,43,.7),transparent);box-shadow:0 0 18px rgba(214,40,43,.3)}
.section-heading>a{margin-left:auto;color:#888;font-size:10px;font-weight:800;letter-spacing:.08em}
.section-heading>a:hover{color:#fff}
.lead-text{max-width:900px;margin:0;color:#c0c0c7;font-size:17px;line-height:1.85}

.credits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line);border-radius:10px;overflow:hidden}
.credits-grid a{padding:19px;background:#141418;min-height:78px}
.credits-grid strong{display:block;margin-top:6px;font-size:14px}

.property-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.property-list>div{padding:17px 18px;border:1px solid var(--line);border-radius:8px;background:#141418}
.property-list strong{display:block;margin-top:4px;font-size:13px}
.status-active{color:#75d29a}

.series-banner{
  padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  border:1px solid rgba(190,13,13,.22);border-radius:11px;
  background:linear-gradient(100deg,rgba(190,13,13,.16),rgba(255,255,255,.018));
}
.series-banner span{color:var(--red-bright);font-size:10px;font-weight:800;letter-spacing:.12em}
.series-banner h3{margin:5px 0;font-size:28px}
.series-banner p{margin:0;color:#999}
.series-banner a{font-size:10px;font-weight:900;letter-spacing:.09em}

.poster-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px
}
.poster-card{min-width:0}
.poster{
  position:relative;overflow:hidden;height:290px;padding:18px;
  display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  background:linear-gradient(145deg,#4b1212,#121216 58%,#060607);
  box-shadow:0 18px 35px rgba(0,0,0,.34);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
.poster:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),transparent 58%)}
.poster span{position:relative;z-index:1;font-size:18px;font-weight:900;line-height:1.05;letter-spacing:-.02em}
.poster-card:hover .poster{transform:translateY(-7px);border-color:rgba(214,40,43,.35);box-shadow:0 25px 45px rgba(0,0,0,.5),0 0 25px rgba(190,13,13,.12)}
.poster-card h3{margin:13px 0 2px;font-size:14px}
.poster-card p{margin:0;color:#777;font-size:11px}
.p2,.p6,.p10,.p14,.p18{background:linear-gradient(145deg,#1d3154,#13151c 58%,#060607)}
.p3,.p7,.p11,.p15,.p19{background:linear-gradient(145deg,#4d3c16,#17150f 58%,#060607)}
.p4,.p8,.p12,.p16,.p20{background:linear-gradient(145deg,#243d31,#101712 58%,#060607)}
.compact-row .poster{height:245px}

.secondary-column{min-width:0}
.sticky-stack{position:sticky;top:112px;display:flex;flex-direction:column;gap:18px}
.sidebar-panel{padding:22px;border:1px solid var(--line);border-radius:10px;background:#141418}
.sidebar-panel h3{margin:0 0 18px;font-size:12px;letter-spacing:.1em}
.sidebar-panel p{color:#8d8d96;font-size:13px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag-list a{padding:7px 9px;border:1px solid var(--line);border-radius:5px;color:#aaa;font-size:10px}
.tag-list a:hover{border-color:rgba(214,40,43,.4);color:#fff}
.person-link{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
.person-link:last-child{border-bottom:0}
.person-link strong{font-size:12px}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-grid button{padding:10px 6px;border:1px solid var(--line);border-radius:5px;background:#19191d;color:#bbb;font-size:9px;font-weight:800}
.full-button{width:100%;min-height:42px;margin-top:8px;font-size:10px;letter-spacing:.07em}

.site-footer{
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:42px;
  padding:60px max(48px,calc((100vw - 1450px)/2)) 25px;
  border-top:1px solid var(--line);background:#0a0a0c
}
.footer-brand img{height:58px}
.footer-brand p{color:#72727b}
.site-footer h4{font-size:11px;letter-spacing:.1em}
.site-footer>div:not(.footer-brand):not(.footer-bottom){display:flex;flex-direction:column;gap:9px}
.site-footer a{color:#85858e;font-size:12px}
.site-footer a:hover{color:#fff}
.footer-bottom{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--line);color:#606068;font-size:11px}

@media(max-width:1150px){
  .main-nav{display:none}
  .comic-hero{grid-template-columns:260px 1fr}
  .hero-side{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
  .page-layout{grid-template-columns:1fr}
  .sticky-stack{position:static;display:grid;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .site-header{padding:0 18px}
  .brand img{height:52px}
  .profile-button{display:none}
  .comic-hero{grid-template-columns:1fr;padding:38px 20px}
  .hero-cover-wrap{max-width:300px;margin:auto}
  .hero-info h1{font-size:52px}
  .quick-credits,.credits-grid,.property-list{grid-template-columns:1fr 1fr}
  .page-layout{padding:48px 20px}
  .poster-row{grid-template-columns:repeat(2,1fr)}
  .sticky-stack{grid-template-columns:1fr}
  .site-footer{grid-template-columns:1fr 1fr;padding:45px 20px 20px}
  .footer-brand{grid-column:1/-1}
}

/* v2.1 alignment adjustments */
.comic-hero{
  grid-template-columns:360px minmax(0,1fr) 250px;
  align-items:stretch;
}

.hero-cover-wrap{
  display:flex;
  flex-direction:column;
  height:100%;
}

.hero-cover{
  height:560px;
  flex:0 0 auto;
}

.preview-button{
  margin-top:14px;
  min-height:52px;
}

.hero-info{
  display:flex;
  flex-direction:column;
}

.quick-credits{
  margin-top:auto;
}

.hero-side{
  display:grid;
  grid-template-rows:repeat(4,1fr);
  gap:12px;
  align-self:stretch;
}

.hero-side .side-card{
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.side-single-action{
  padding:0;
}

.side-single-action button{
  width:100%;
  height:100%;
  min-height:76px;
  padding:18px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
}

.side-single-action button:hover{
  background:rgba(255,255,255,.035);
}

@media(max-width:1150px){
  .comic-hero{
    grid-template-columns:300px 1fr;
  }
  .hero-side{
    grid-column:1/-1;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:none;
  }
}

@media(max-width:760px){
  .comic-hero{
    grid-template-columns:1fr;
  }
  .hero-cover{
    height:520px;
  }
  .hero-side{
    grid-template-columns:1fr 1fr;
  }
}


/* v2.2 three cards row */
.content-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:24px;
 align-items:start;
}
.triple-card{height:100%;}
@media(max-width:980px){
 .content-grid{grid-template-columns:1fr;}
}


/* v2.3 – ÖZET, KÜNYE und ÖZELLİKLER in einer Reihe */
.info-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr) minmax(300px,.76fr);
  gap:18px;
  align-items:stretch;
  margin-bottom:54px;
}

.info-row .info-card{
  min-width:0;
  height:100%;
  margin:0;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:9px;
  background:
    linear-gradient(145deg,rgba(23,24,28,.96),rgba(12,13,16,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.info-row .section-heading{
  margin-bottom:20px;
}

.info-row .section-heading h2{
  font-size:18px;
}

.info-row .section-heading span{
  display:none;
}

.info-row .lead-text{
  max-width:none;
  font-size:14px;
  line-height:1.85;
  color:#c8c8ce;
}

.summary-card{
  position:relative;
  overflow:hidden;
}

.summary-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 45%,rgba(214,40,43,.10),transparent 28%),
    linear-gradient(90deg,transparent 48%,rgba(255,255,255,.018));
}

.summary-card > *{
  position:relative;
  z-index:1;
}

.info-row .credits-grid{
  display:flex;
  flex-direction:column;
  gap:0;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
}

.info-row .credits-grid a{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  min-height:0;
  padding:7px 0;
  border:0;
  background:transparent;
}

.info-row .credits-grid span{
  font-size:10px;
  letter-spacing:.06em;
}

.info-row .credits-grid strong{
  margin:0;
  color:var(--red-bright);
  font-size:12px;
  text-align:right;
}

.info-row .property-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.info-row .property-list > div{
  display:grid;
  grid-template-columns:105px minmax(0,1fr);
  align-items:center;
  padding:8px 0;
  border:0;
  border-radius:0;
  background:transparent;
}

.info-row .property-list span{
  font-size:10px;
  letter-spacing:.06em;
}

.info-row .property-list strong{
  margin:0;
  font-size:12px;
  font-weight:600;
}

.primary-column{
  min-width:0;
}

@media(max-width:1180px){
  .info-row{
    grid-template-columns:1fr 1fr;
  }

  .summary-card{
    grid-column:1 / -1;
  }
}

@media(max-width:760px){
  .info-row{
    grid-template-columns:1fr;
  }

  .summary-card{
    grid-column:auto;
  }

  .info-row .info-card{
    padding:22px;
  }
}


/* v2.4 Full-width SERİ */
.series-section,
.section-series,
#series{
  grid-column:1 / -1 !important;
  width:100%;
}

.series-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:18px;
}

.series-section .content-section,
.section-series .content-section{
  width:100%;
}


/* v2.5 korrigiert – SERİ als volle, eigene Zeile */
.series-section{
  grid-column:1 / -1;
  width:100%;
  margin:0 0 54px;
  padding:22px 18px 20px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(20,22,26,.97),rgba(11,12,15,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.series-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 12px 18px;
}

.series-header h2{
  margin:0;
  font-size:17px;
  color:#fff;
}

.series-header h2 span{
  color:#d7d7db;
}

.series-header a{
  color:var(--red-bright);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

.series-carousel{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:14px;
}

.series-viewport{
  overflow:hidden;
}

.series-track{
  display:flex;
  gap:26px;
  transition:transform .3s ease;
}

.series-item{
  flex:0 0 calc((100% - 130px) / 6);
  min-width:145px;
  padding:0 0 10px;
  text-align:center;
  border:1px solid transparent;
  border-radius:5px;
}

.series-cover{
  aspect-ratio:.68;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:14px 8px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:5px;
  background:#17171a;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

.series-cover.has-image{padding:0;overflow:hidden;position:relative}
.series-cover.has-image img{width:100%;height:100%;display:block;object-fit:cover}

.series-cover strong{
  font-family:Georgia,serif;
  font-size:18px;
  letter-spacing:.03em;
  color:#f0f0f0;
}

.series-cover-1{background:linear-gradient(155deg,#3a3a3a,#121214 65%,#070708)}
.series-cover-2{background:linear-gradient(155deg,#24496c,#11151a 65%,#070708)}
.series-cover-3{background:linear-gradient(155deg,#8a5b0a,#2b1707 65%,#070708)}
.series-cover-4{background:linear-gradient(155deg,#5b1c0d,#180b09 65%,#070708)}
.series-cover-5{background:linear-gradient(155deg,#7b321b,#27110c 65%,#070708)}
.series-cover-6{background:linear-gradient(155deg,#4b3d14,#15130b 65%,#070708)}

.series-number{
  display:block;
  margin-top:10px;
  color:#efefef;
  font-size:13px;
}

.series-title{
  display:block;
  margin-top:4px;
  min-height:30px;
  color:#d0d0d4;
  font-size:12px;
  line-height:1.3;
}

.series-item.active{
  border-color:var(--red-bright);
  background:rgba(214,40,43,.025);
  box-shadow:0 0 18px rgba(214,40,43,.15);
}

.series-item.active .series-cover{
  border-color:transparent;
  border-radius:4px 4px 0 0;
}

.series-item.active .series-number,
.series-item.active .series-title{
  color:var(--red-bright);
}

.series-arrow{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(16,17,20,.92);
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
}

.series-arrow:hover{
  border-color:var(--red-bright);
  color:var(--red-bright);
}

.series-arrow:disabled{
  opacity:.35;
  cursor:default;
}

@media(max-width:1180px){
  .series-item{flex-basis:calc((100% - 78px) / 4)}
}

@media(max-width:760px){
  .series-carousel{
    grid-template-columns:36px minmax(0,1fr) 36px;
    gap:8px;
  }

  .series-arrow{
    width:36px;
    height:36px;
    font-size:28px;
  }

  .series-track{gap:18px}
  .series-item{flex-basis:calc((100% - 18px) / 2)}
}


/* v2.6 korrigiert – unterer Bereich als volle Seitenbreite */
.related-overview{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  width:100%;
  margin:0 0 20px;
}

.related-list-card{
  min-width:0;
  padding:20px 18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(20,22,26,.97),rgba(11,12,15,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.related-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:15px;
}

.related-list-head h2{
  margin:0;
  color:#fff;
  font-size:12px;
  line-height:1.25;
  letter-spacing:.035em;
  white-space:nowrap;
}

.related-list-head a{
  flex:0 0 auto;
  color:var(--red-bright);
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
}

.related-mini-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.related-mini-list>a{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-width:0;
  padding:2px 0;
}

.mini-cover{
  width:36px;
  height:50px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:4px 2px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:3px;
  background:linear-gradient(145deg,#4b1212,#121216 62%,#060607);
  box-shadow:0 5px 10px rgba(0,0,0,.34);
}

.mini-cover span{
  color:#fff;
  font-size:8px;
  font-weight:900;
  line-height:1;
}

.related-mini-list strong{
  display:block;
  overflow:hidden;
  color:#efeff1;
  font-size:11px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.related-mini-list small{
  display:block;
  overflow:hidden;
  margin-top:3px;
  color:#85858e;
  font-size:10px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.related-empty{grid-column:1/-1;margin:0;padding:24px;border:1px dashed var(--line);border-radius:6px;color:#777781;font-size:11px;text-align:center}
.single-series{grid-template-columns:1fr}.single-series .series-viewport{margin:0}.single-series .series-track{transform:none!important}.newsletter-message{min-height:18px;margin:9px 0 0;color:#72c98c;font-size:11px}.newsletter-form button:disabled{opacity:.6;cursor:wait}

.related-mini-list>a:hover strong{
  color:var(--red-bright);
}

.tags-wide{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:30px;
  width:100%;
  margin:0;
  padding:16px 22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(20,22,26,.97),rgba(11,12,15,.99));
}

.tags-wide h2{
  flex:0 0 auto;
  margin:0;
  color:#fff;
  font-size:12px;
  letter-spacing:.06em;
}

.tags-wide-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.tags-wide-list a{
  min-width:112px;
  padding:10px 18px;
  border:1px solid rgba(214,40,43,.78);
  border-radius:4px;
  color:var(--red-bright);
  font-size:10px;
  font-weight:800;
  letter-spacing:.055em;
  text-align:center;
}

.tags-wide-list a:hover{
  background:rgba(214,40,43,.1);
  color:#fff;
}

@media(max-width:1200px){
  .related-overview{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .related-overview{
    grid-template-columns:1fr;
  }

  .tags-wide{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }

  .tags-wide-list{
    width:100%;
  }

  .tags-wide-list a{
    flex:1 1 130px;
  }
}


/* Homepage premium effects imported */
.content-section,
.info-card,
.related-list-card,
.series-section,
.tags-wide,
.side-card{
 transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
 position:relative;
 overflow:hidden;
}

.content-section::before,
.info-card::before,
.related-list-card::before,
.series-section::before,
.tags-wide::before,
.side-card::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 35%,transparent 70%,rgba(214,40,43,.05));
 opacity:0;
 transition:opacity .25s ease;
 pointer-events:none;
}

.content-section:hover,
.info-card:hover,
.related-list-card:hover,
.series-section:hover,
.tags-wide:hover,
.side-card:hover{
 transform:translateY(-4px);
 box-shadow:0 18px 36px rgba(0,0,0,.35),0 0 18px rgba(214,40,43,.12);
 border-color:rgba(214,40,43,.45);
}

.content-section:hover::before,
.info-card:hover::before,
.related-list-card:hover::before,
.series-section:hover::before,
.tags-wide:hover::before,
.side-card:hover::before{
 opacity:1;
}


/* v2.7 – Footer über die volle Breite und größer */
.site-footer{
  grid-template-columns:minmax(320px,1.35fr) repeat(3,minmax(210px,1fr));
  column-gap:96px;
  row-gap:42px;
  width:100%;
  padding:78px max(54px,calc((100vw - 1560px)/2)) 30px;
}

.footer-brand img{
  height:72px;
}

.footer-brand p{
  max-width:360px;
  margin-top:20px;
  font-size:15px;
  line-height:1.7;
}

.site-footer h4{
  margin:8px 0 20px;
  font-size:13px;
  letter-spacing:.12em;
}

.site-footer>div:not(.footer-brand):not(.footer-bottom){
  gap:13px;
}

.site-footer a{
  font-size:14px;
  line-height:1.45;
}

.footer-bottom{
  padding-top:30px;
  font-size:12px;
}

@media(max-width:1100px){
  .site-footer{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:60px;
    padding:64px 36px 26px;
  }

  .footer-brand{
    grid-column:1 / -1;
  }
}

@media(max-width:620px){
  .site-footer{
    grid-template-columns:1fr;
    gap:34px;
    padding:52px 22px 22px;
  }

  .footer-brand{
    grid-column:auto;
  }

  .footer-brand img{
    height:64px;
  }
}


/* v2.8 – kompakter, dolu ve Newsletter içeren premium footer */
.site-footer{
  display:grid;
  grid-template-columns:minmax(270px,1.25fr) repeat(3,minmax(150px,.72fr)) minmax(340px,1.5fr);
  column-gap:48px;
  row-gap:34px;
  align-items:start;
  width:100%;
  padding:58px max(42px,calc((100vw - 1540px)/2)) 24px;
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 86% 16%,rgba(214,40,43,.075),transparent 24%),
    linear-gradient(180deg,#0b0c0f 0%,#08090b 100%);
}

.footer-brand,
.footer-column,
.footer-newsletter{
  min-width:0;
}

.footer-logo{
  display:inline-flex;
  align-items:flex-end;
  gap:9px;
  text-decoration:none;
}

.footer-logo-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  color:#fff;
  background:#e50914;
  font-size:42px;
  font-weight:950;
  line-height:1;
}

.footer-logo-word{
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:-.03em;
}

.footer-brand p{
  max-width:320px;
  margin:18px 0 0;
  color:#90909a;
  font-size:14px;
  line-height:1.65;
}

.footer-socials{
  display:flex;
  gap:10px;
  margin-top:24px;
}

.footer-socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  color:#d9d9de;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  transition:border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}

.footer-socials a:hover{
  transform:translateY(-2px);
  border-color:var(--red-bright);
  background:rgba(214,40,43,.08);
  color:var(--red-bright);
}

.site-footer h4{
  margin:3px 0 18px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
}

.footer-column{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding-left:28px;
  border-left:1px solid rgba(255,255,255,.07);
}

.footer-column a{
  color:#9999a3;
  font-size:13px;
  line-height:1.35;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}

.footer-column a:hover{
  transform:translateX(3px);
  color:#fff;
}

.footer-newsletter{
  padding-left:32px;
  border-left:1px solid rgba(255,255,255,.07);
}

.footer-newsletter p{
  max-width:390px;
  margin:0 0 18px;
  color:#9999a3;
  font-size:13px;
  line-height:1.65;
}

.newsletter-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  gap:10px;
}

.newsletter-form input{
  width:100%;
  min-width:0;
  height:46px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  outline:none;
  background:#101115;
  color:#fff;
  font-size:13px;
}

.newsletter-form input:focus{
  border-color:var(--red-bright);
  box-shadow:0 0 0 3px rgba(214,40,43,.1);
}

.newsletter-form button{
  height:46px;
  border:1px solid var(--red-bright);
  border-radius:4px;
  background:var(--red-bright);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
  transition:filter .2s ease, transform .2s ease;
}

.newsletter-form button:hover{
  transform:translateY(-1px);
  filter:brightness(1.1);
}

.footer-newsletter small{
  display:block;
  margin-top:11px;
  color:#62626b;
  font-size:9px;
  line-height:1.5;
}

.footer-bottom{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#65656e;
  font-size:10px;
}

.footer-bottom nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:20px;
}

.footer-bottom a{
  color:#7a7a84;
  text-decoration:none;
}

.footer-bottom a:hover{
  color:#fff;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media(max-width:1250px){
  .site-footer{
    grid-template-columns:1.15fr repeat(3,.72fr);
  }

  .footer-newsletter{
    grid-column:1 / -1;
    padding:26px 0 0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.07);
  }

  .footer-newsletter p{
    max-width:620px;
  }

  .newsletter-form{
    max-width:620px;
  }
}

@media(max-width:860px){
  .site-footer{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:34px;
    padding:48px 28px 22px;
  }

  .footer-brand{
    grid-column:1 / -1;
  }

  .footer-column{
    padding-left:0;
    border-left:0;
  }

  .footer-newsletter{
    grid-column:1 / -1;
  }

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
  }

  .footer-bottom nav{
    justify-content:flex-start;
  }
}

@media(max-width:560px){
  .site-footer{
    grid-template-columns:1fr;
    padding:42px 20px 20px;
  }

  .footer-brand,
  .footer-newsletter{
    grid-column:auto;
  }

  .newsletter-form{
    grid-template-columns:1fr;
  }

  .newsletter-form button{
    width:100%;
  }
}


.footer-logo{
display:inline-flex;
align-items:center;
}
.footer-logo-image{
height:58px;
width:auto;
display:block;
}
.footer-logo-mark,.footer-logo-word{display:none!important;}
.edition-switch a{color:#b9b9c1;font-size:10px;font-weight:800;letter-spacing:.05em;text-decoration:none}.edition-switch a:hover{color:#fff}

/* v4.1 – richer quick actions and balanced summary */
.hero-side .side-card{
  border-color:rgba(255,255,255,.105);
  background:linear-gradient(135deg,rgba(27,27,32,.94),rgba(14,14,18,.94));
}
.hero-side .side-card-update{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:13px;
  padding:17px;
}
.side-card-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  border:1px solid rgba(214,40,43,.48);
  border-radius:8px;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.14),transparent 38%),rgba(190,13,13,.15);
  color:#f14b4e;
  font-size:20px;
  font-style:normal;
  line-height:1;
  box-shadow:inset 0 0 18px rgba(214,40,43,.08),0 0 18px rgba(190,13,13,.08);
}
.side-card-copy{display:block;min-width:0}
.side-card-copy small,.side-card-copy .side-label{
  display:block;
  margin:0 0 5px;
  color:#777781;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}
.side-card-copy strong{
  display:block;
  margin:0;
  overflow:hidden;
  color:#f2f2f4;
  font-size:11px;
  line-height:1.25;
  text-overflow:ellipsis;
}
.side-card-update .side-card-copy strong{color:#d8d8de;font-size:14px}
.side-single-action button{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-height:76px;
  padding:16px;
}
.side-single-action button>i{
  color:#d6282b;
  font-size:18px;
  font-style:normal;
  transition:transform .2s ease,color .2s ease;
}
.side-single-action button:hover{
  background:linear-gradient(90deg,rgba(214,40,43,.10),rgba(255,255,255,.018));
}
.side-single-action button:hover .side-card-icon{border-color:#d6282b;color:#fff;box-shadow:0 0 24px rgba(214,40,43,.22)}
.side-single-action button:hover>i{transform:translateX(3px);color:#fff}
.side-single-action button.added .side-card-icon{border-color:#3c9661;background:rgba(34,116,68,.2);color:#9ee0b7;box-shadow:none}

.summary-card{display:flex;flex-direction:column;min-height:255px}
.summary-card::before{
  content:"";
  position:absolute;
  top:25px;
  bottom:25px;
  left:0;
  width:3px;
  background:linear-gradient(180deg,#f13f43,#7b0c10);
  opacity:1;
  box-shadow:0 0 20px rgba(214,40,43,.38);
}
.summary-content{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:17px;
  flex:1;
  min-height:112px;
}
.summary-mark{
  align-self:start;
  color:rgba(214,40,43,.5);
  font-family:Georgia,serif;
  font-size:72px;
  line-height:.82;
  text-shadow:0 0 24px rgba(214,40,43,.18);
}
.summary-kicker{display:block;margin-bottom:9px;color:#d6282b;font-size:8px;font-weight:900;letter-spacing:.18em}
.summary-content .lead-text{margin:0;color:#d0d0d5;font-size:14px;line-height:1.8}
.summary-footer{position:relative;z-index:1;display:flex;align-items:center;gap:13px;margin-top:19px;color:#63636c;font-size:8px;font-weight:900;letter-spacing:.14em}
.summary-footer i{height:1px;flex:1;background:linear-gradient(90deg,rgba(214,40,43,.38),transparent)}

@media(max-width:760px){
  .summary-content{grid-template-columns:35px minmax(0,1fr);gap:10px}
  .summary-mark{font-size:55px}
  .side-single-action button,.hero-side .side-card-update{grid-template-columns:38px minmax(0,1fr) auto;padding:13px}
  .side-card-icon{width:38px;height:38px;flex-basis:38px}
}

/* v4.2 – phone layout */
@media(max-width:520px){
  .hero-info h1{font-size:clamp(38px,13vw,50px)!important;overflow-wrap:anywhere}
  .hero-meta{gap:6px}
  .hero-meta span{padding:7px 8px;font-size:9px}
  .quick-credits,.credits-grid,.property-list{grid-template-columns:1fr}
  .hero-side{grid-template-columns:1fr}
  .page-layout{padding-right:16px;padding-left:16px}
  .section-heading{align-items:flex-start;flex-wrap:wrap}
  .section-heading h2{white-space:normal}
  .series-banner{align-items:flex-start;flex-direction:column;padding:22px 20px}
  .summary-card{min-height:0}
  .summary-content{grid-template-columns:28px minmax(0,1fr)}
  .summary-mark{font-size:46px}
  .summary-content .lead-text{font-size:13px;line-height:1.65}
}


/* v4.5 – Cover proportional halten, Download unten ausrichten */
@media(min-width:1151px){
  .hero-cover-wrap{
    display:flex;
    flex-direction:column;
    align-self:stretch;
    height:100%;
  }
  .hero-cover{
    flex:0 0 auto;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:2 / 3;
  }
  .hero-cover-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .preview-button{
    flex:0 0 52px;
    height:52px;
    min-height:52px;
    margin-top:auto;
  }
}

.quick-credits > .credit-cell{
  padding:15px 17px;
  background:#131316;
  min-width:0;
}
.quick-credits > .credit-cell strong{
  font-size:13px;
}

.credits-grid > .credit-cell{
  padding:19px;
  background:#141418;
  min-height:78px;
  min-width:0;
}
.credits-grid > .credit-cell strong{
  display:block;
  margin-top:6px;
  font-size:14px;
}

.info-row .credits-grid > .credit-cell{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  min-height:0;
  padding:7px 0;
  border:0;
  background:transparent;
}
.info-row .credits-grid > .credit-cell > span{
  font-size:10px;
  letter-spacing:.06em;
}
.info-row .credits-grid > .credit-cell > strong{
  margin:0;
  color:var(--red-bright);
  font-size:12px;
  text-align:right;
}

.people-links{
  line-height:1.45;
}
.people-links a{
  display:inline !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:inherit;
  text-decoration:none;
}
.people-links a:hover{
  color:#fff;
}
.credit-separator{
  display:inline !important;
  color:#666 !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  letter-spacing:0 !important;
}
.credit-empty{
  display:inline !important;
  color:#777 !important;
  font-size:inherit !important;
  letter-spacing:0 !important;
}


/* Diğer eserler: tek panel + sekmeler */
.related-hub{
  grid-column:1 / -1;
  width:100%;
  margin:0 0 20px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(20,22,26,.98),rgba(10,11,14,.995));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.related-hub-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding:24px 26px 0;
  border-bottom:1px solid rgba(255,255,255,.075);
}
.related-hub-kicker{display:block;margin-bottom:7px;color:var(--red-bright);font-size:8px;font-weight:900;letter-spacing:.16em}
.related-hub-head h2{margin:0 0 21px;color:#fff;font-size:24px;letter-spacing:.02em}
.related-tabs{display:flex;flex-wrap:wrap;gap:4px}
.related-tab{
  min-width:92px;
  padding:14px 16px 13px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:#74747d;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.related-tab:hover{color:#ddd}
.related-tab.active{border-bottom-color:var(--red-bright);background:rgba(214,40,43,.055);color:#fff}
.related-panel{padding:22px 26px 26px}
.related-panel[hidden]{display:none!important}
.related-panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.related-panel-head h3{margin:0;color:#b7b7bf;font-size:10px;font-weight:900;letter-spacing:.09em}
.related-panel-head a{color:var(--red-bright);font-size:9px;font-weight:900;letter-spacing:.06em;white-space:nowrap}
.related-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.related-mini-item{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 18px;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:10px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:6px;
  background:rgba(255,255,255,.018);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.related-mini-item:hover{transform:translateY(-2px);border-color:rgba(214,40,43,.4);background:rgba(214,40,43,.045)}
.related-mini-item .mini-cover{width:46px;height:64px;padding:0}
.related-mini-item .mini-cover.has-image img{width:100%;height:100%;display:block;object-fit:cover}
.related-mini-item strong{display:block;overflow:hidden;color:#f0f0f2;font-size:11px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.related-mini-item small{display:block;overflow:hidden;margin-top:5px;color:#7f7f88;font-size:9px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.related-mini-arrow{color:#55555e;font-size:15px;transition:color .2s ease,transform .2s ease}
.related-mini-item:hover .related-mini-arrow{color:var(--red-bright);transform:translateX(2px)}
@media(max-width:1050px){.related-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .related-hub-head{align-items:flex-start;flex-direction:column;gap:4px;padding-inline:18px}
  .related-hub-head h2{margin-bottom:8px}
  .related-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .related-tab{min-width:max-content;padding-inline:13px}
  .related-panel{padding:18px}
  .related-mini-grid{grid-template-columns:1fr}
}


/* v2.4 – protected single download action */
.preview-button.download-action{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-height:64px;
  padding:10px 13px;
  border-color:rgba(214,40,43,.42);
  background:linear-gradient(90deg,rgba(190,13,13,.22),rgba(24,24,28,.96));
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.2);
}
.preview-button.download-action .download-button-icon{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(214,40,43,.58);border-radius:8px;
  background:rgba(190,13,13,.18);color:#f14b4e;font-size:20px;
}
.download-button-copy{display:block;min-width:0}
.download-button-copy small{display:block;margin-bottom:4px;color:#85858f;font-size:8px;font-weight:900;letter-spacing:.14em}
.download-button-copy strong{display:block;color:#fff;font-size:12px;letter-spacing:.08em}
.preview-button.download-action>i{color:#d6282b;font-size:18px;font-style:normal;transition:transform .2s ease}
.preview-button.download-action:hover:not(:disabled){background:linear-gradient(90deg,rgba(214,40,43,.31),rgba(24,24,28,.96));border-color:#d6282b}
.preview-button.download-action:hover:not(:disabled)>i{transform:translateX(3px)}
.preview-button.download-action:disabled{cursor:not-allowed;opacity:.52}

body.modal-open{overflow:hidden}
.download-auth-modal[hidden]{display:none}
.download-auth-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px}
.download-auth-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}
.download-auth-dialog{
  position:relative;z-index:1;width:min(520px,100%);padding:34px;
  border:1px solid rgba(214,40,43,.34);border-radius:14px;
  background:linear-gradient(145deg,#1a1a1f,#0f0f12 72%);
  box-shadow:0 28px 80px rgba(0,0,0,.62),0 0 38px rgba(190,13,13,.14);
}
.download-auth-close{position:absolute;top:13px;right:15px;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#141418;color:#aaa;font-size:23px;line-height:1}
.download-auth-close:hover{color:#fff;border-color:rgba(214,40,43,.45)}
.download-auth-kicker{display:block;margin-bottom:9px;color:var(--red-bright);font-size:9px;font-weight:900;letter-spacing:.16em}
.download-auth-dialog h2{margin:0 42px 12px 0;font-size:24px;line-height:1.12;letter-spacing:.02em}
.download-auth-dialog p{margin:0;color:#a9a9b1;font-size:14px;line-height:1.7}
.download-auth-actions{display:flex;gap:10px;margin-top:25px}
.download-auth-actions a{flex:1;display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 16px;border-radius:7px;font-size:10px;font-weight:900;letter-spacing:.08em}
.download-auth-login{background:var(--red);border:1px solid var(--red);color:#fff}
.download-auth-register{background:#19191d;border:1px solid var(--line);color:#fff}
.download-auth-register:hover{border-color:rgba(214,40,43,.5)}
@media(max-width:560px){.download-auth-dialog{padding:28px 22px}.download-auth-actions{flex-direction:column}}


/* v2.5 – Downloadbox an die Höhe einer Quick-Credit-Zeile angleichen */
@media(min-width:1151px){
  .hero-cover-wrap .preview-button.download-action{
    flex:0 0 70px;
    height:70px;
    min-height:70px;
  }
}


/* v2.6 – yeşil indirme aksiyonu + kırık bağlantı bildirimi */
.preview-button.download-action{
  border-color:rgba(91,211,139,.52);
  background:linear-gradient(90deg,rgba(34,112,65,.24),rgba(24,24,28,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.2),0 0 24px rgba(74,190,119,.08);
}
.preview-button.download-action .download-button-icon{
  border-color:rgba(91,211,139,.58);
  background:rgba(34,112,65,.18);
  color:#75d29a;
}
.preview-button.download-action>i{color:#75d29a}
.preview-button.download-action:hover:not(:disabled){
  border-color:#75d29a;
  background:linear-gradient(90deg,rgba(45,139,82,.32),rgba(24,24,28,.96));
}
.broken-link-action{
  min-height:48px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:11px;
  margin-top:9px;
  padding:8px 12px;
  border:1px solid rgba(214,40,43,.26);
  border-radius:8px;
  background:rgba(190,13,13,.055);
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,opacity .2s ease;
}
.broken-link-action:hover:not(:disabled){border-color:rgba(214,40,43,.58);background:rgba(190,13,13,.11)}
.broken-link-action:disabled{cursor:not-allowed;opacity:.38}
.broken-link-action.reported{border-color:rgba(104,196,134,.28);background:rgba(104,196,134,.055)}
.broken-link-icon{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid rgba(214,40,43,.42);border-radius:7px;
  background:rgba(190,13,13,.1);color:#e75b5e;font-size:15px;font-weight:950;
}
.broken-link-action.reported .broken-link-icon{border-color:rgba(104,196,134,.35);background:rgba(104,196,134,.08);color:#75d29a}
.broken-link-action span:not(.broken-link-icon){min-width:0}
.broken-link-action small{display:block;margin-bottom:3px;color:#777781;font-size:7px;font-weight:900;letter-spacing:.13em}
.broken-link-action strong{display:block;color:#d8d8de;font-size:10px;letter-spacing:.09em}
.broken-link-modal[hidden]{display:none}
.broken-link-modal{position:fixed;inset:0;z-index:1002;display:grid;place-items:center;padding:22px}
.broken-link-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}
.broken-link-dialog{
  position:relative;z-index:1;width:min(500px,100%);padding:34px;
  border:1px solid rgba(214,40,43,.34);border-radius:14px;
  background:linear-gradient(145deg,#1a1a1f,#0f0f12 72%);
  box-shadow:0 28px 80px rgba(0,0,0,.62),0 0 38px rgba(190,13,13,.12);
}
.broken-link-close{position:absolute;top:13px;right:15px;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#141418;color:#aaa;font-size:23px;line-height:1}
.broken-link-close:hover{color:#fff;border-color:rgba(214,40,43,.45)}
.broken-link-kicker{display:block;margin-bottom:9px;color:var(--red-bright);font-size:9px;font-weight:900;letter-spacing:.16em}
.broken-link-dialog h2{margin:0 42px 12px 0;font-size:24px;line-height:1.12;letter-spacing:.02em}
.broken-link-dialog p{margin:0;color:#a9a9b1;font-size:14px;line-height:1.7}
.broken-link-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
.broken-link-modal-actions button{min-width:125px;min-height:44px;padding:0 16px;border-radius:7px;font-size:9px;font-weight:900;letter-spacing:.08em}
.broken-link-cancel{border:1px solid var(--line);background:#19191d;color:#aaa}
.broken-link-confirm{border:1px solid #cf272a;background:#a80d10;color:#fff}
.broken-link-confirm:hover:not(:disabled){background:#c31518}
.broken-link-confirm:disabled{opacity:.5;cursor:not-allowed}
@media(min-width:1151px){
  .hero-cover-wrap .broken-link-action{flex:0 0 48px;height:48px}
}
@media(max-width:560px){.broken-link-dialog{padding:28px 22px}.broken-link-modal-actions{flex-direction:column}.broken-link-modal-actions button{width:100%}}


/* v2.5 – comic share panel */
.share-modal[hidden]{display:none!important}
.share-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px}
.share-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(7px)}
.share-dialog{position:relative;width:min(560px,100%);padding:34px;border:1px solid rgba(214,40,43,.34);border-radius:12px;background:linear-gradient(145deg,#18181d,#101013);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 45px rgba(190,13,13,.1)}
.share-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#121216;color:#9b9ba3;font-size:22px;line-height:1}
.share-close:hover{border-color:var(--red-bright);color:#fff}
.share-kicker{display:block;margin-bottom:9px;color:var(--red-bright);font-size:9px;font-weight:900;letter-spacing:.17em}
.share-dialog h2{margin:0 42px 8px 0;color:#fff;font-size:24px;line-height:1.15}
.share-dialog>p{margin:0 0 22px;color:#8f8f98;font-size:12px;line-height:1.65}
.share-platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.share-platforms button{display:flex;min-width:0;min-height:82px;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:10px 6px;border:1px solid var(--line);border-radius:8px;background:#131317;color:#c8c8cf;transition:.2s ease}
.share-platforms button span{display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(214,40,43,.35);border-radius:50%;color:#fff;font-size:13px;font-weight:900}
.share-platforms button strong{font-size:8px;letter-spacing:.08em;white-space:nowrap}
.share-platforms button:hover{transform:translateY(-2px);border-color:rgba(214,40,43,.7);background:rgba(190,13,13,.09);color:#fff}
.share-copy{display:flex;width:100%;min-height:48px;align-items:center;justify-content:center;gap:10px;margin-top:10px;border:1px solid rgba(214,40,43,.35);border-radius:8px;background:rgba(190,13,13,.08);color:#fff}
.share-copy span{color:var(--red-bright);font-size:18px}
.share-copy strong{font-size:9px;letter-spacing:.1em}
.share-copy:hover{border-color:var(--red-bright);background:rgba(190,13,13,.16)}
.share-status{min-height:18px!important;margin:10px 0 0!important;color:#72c98c!important;font-size:10px!important;text-align:center}
@media(max-width:560px){.share-dialog{padding:28px 20px}.share-platforms{grid-template-columns:1fr 1fr}.share-dialog h2{font-size:21px}}


/* v2.8 – elegant editorial detail layout */
.comic-hero{
  grid-template-columns:300px minmax(0,1fr) !important;
  gap:46px !important;
  align-items:start !important;
  max-width:1480px;
  margin:0 auto;
  padding:46px 42px 56px !important;
  background:
    radial-gradient(circle at 5% 28%,rgba(190,13,13,.14),transparent 30%),
    linear-gradient(180deg,rgba(12,12,15,.98),rgba(9,9,11,.98));
}
.hero-cover-wrap{height:auto !important}
.hero-cover{height:500px !important;border-radius:14px !important;box-shadow:0 24px 60px rgba(0,0,0,.42)}
.broken-link-text{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:9px 10px;
  border:0;background:transparent;color:#777b84;font-size:10px;font-weight:800;letter-spacing:.08em;cursor:pointer
}
.broken-link-text:hover{color:#e85b60}.broken-link-text:disabled{opacity:.35;cursor:not-allowed}
.broken-link-text>span{display:grid;place-items:center;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;font-size:11px}

.hero-info-elegant{min-width:0;padding-top:2px}
.hero-utility-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;margin-bottom:16px}
.hero-utility-actions{display:flex;align-items:center;gap:18px;margin-left:auto}
.updated-inline{display:flex;align-items:baseline;gap:8px;color:#8e9098;white-space:nowrap}
.updated-inline small{font-size:9px;font-weight:800;letter-spacing:.12em}.updated-inline strong{font-size:12px;color:#d6d6da}
.share-inline{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#b5b5bd;font-size:10px;font-weight:900;letter-spacing:.1em;padding:7px 0;cursor:pointer}
.share-inline:hover{color:#fff}.share-inline span{color:var(--red-bright);font-size:15px}
.series-status-badge{position:static !important;margin:0 !important;align-self:auto !important}
.breadcrumbs{margin:0 0 28px !important}
.hero-info .eyebrow{margin:0 0 14px !important;color:#ed383c;font-size:11px;letter-spacing:.16em}
.hero-info h1{max-width:none !important;margin:0 0 14px !important;font-size:clamp(46px,5vw,82px) !important;line-height:.98 !important;letter-spacing:-.045em}
.localized-title{margin:0 0 8px !important;font-size:16px !important;color:#92949c !important}.localized-title strong{color:#fff !important}
.comic-subtitle{margin:0 0 22px !important;font-size:22px !important;line-height:1.35 !important;color:#f0f0f3 !important;font-weight:700}
.hero-meta{display:flex;gap:14px !important;margin:0 0 28px !important;flex-wrap:wrap}
.hero-meta span{padding:0 !important;border:0 !important;background:transparent !important;color:#a7a8af !important;font-size:10px !important;font-weight:800 !important;letter-spacing:.08em !important}
.hero-meta span+span:before{content:"•";margin-right:14px;color:#44464d}
.hero-actions-elegant{display:flex !important;gap:10px !important;flex-wrap:wrap;margin:0 0 34px !important}
.hero-actions-elegant button{min-height:50px;border-radius:9px;padding:0 20px}
.primary-download{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:150px;border:1px solid rgba(88,202,133,.45);background:linear-gradient(135deg,rgba(35,129,75,.28),rgba(17,56,34,.22));color:#aaf0c5;font-size:12px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.primary-download:hover{border-color:rgba(88,202,133,.72);background:linear-gradient(135deg,rgba(35,129,75,.38),rgba(17,56,34,.3))}
.primary-download:disabled{opacity:.45;cursor:not-allowed}
.hero-actions-elegant .secondary-action{min-width:190px;background:#131419;border:1px solid rgba(255,255,255,.09);color:#fff}
.hero-actions-elegant .secondary-action:hover{border-color:rgba(214,40,43,.4);background:#17181d}

.credit-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);margin-top:4px}
.credit-strip-item{min-width:0;padding:18px 22px 18px 0;display:flex;flex-direction:column;justify-content:center;position:relative}
.credit-strip-item+.credit-strip-item{padding-left:22px}
.credit-strip-item+.credit-strip-item:before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.07)}
.credit-strip-item span{font-size:9px;font-weight:800;letter-spacing:.12em;color:#777b84;margin-bottom:7px}
.credit-strip-item strong{font-size:14px;line-height:1.4;color:#fff;overflow-wrap:anywhere}
.credit-strip-item .people-links a{color:#fff}.credit-strip-item .people-links a:hover{color:var(--red-bright)}
.publisher-strip .publisher-credit-value img{display:block;max-width:120px;max-height:34px;width:auto;height:auto;object-fit:contain;object-position:left center}

.page-layout{max-width:1480px;margin:0 auto;padding-top:44px !important}
.detail-overview{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(360px,.8fr);gap:48px;margin:0 0 54px;padding:0 0 54px;border-bottom:1px solid rgba(255,255,255,.08)}
.detail-overview .content-section{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.detail-overview .section-heading{margin:0 0 20px}.detail-overview .section-heading h2{font-size:15px;letter-spacing:.08em}.detail-overview .section-heading span{display:none}
.overview-summary .lead-text{max-width:900px;font-size:16px;line-height:1.9;color:#c5c6cc}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:0;border-top:1px solid rgba(255,255,255,.07)}
.fact-grid>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.fact-grid span{font-size:9px;font-weight:800;letter-spacing:.1em;color:#777b84}.fact-grid strong{font-size:12px;color:#e4e4e8;text-align:right;font-weight:700}

/* hide the old panel styles if legacy markup is absent */
.hero-side{display:none !important}

@media(max-width:1120px){
  .comic-hero{grid-template-columns:270px minmax(0,1fr) !important;gap:32px !important;padding:38px 28px 48px !important}
  .hero-cover{height:450px !important}
  .credit-strip{grid-template-columns:1fr 1fr}.credit-strip-item:nth-child(3):before{display:none}.credit-strip-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.07)}
  .detail-overview{grid-template-columns:1fr;gap:34px}
}
@media(max-width:760px){
  .comic-hero{grid-template-columns:1fr !important;padding:30px 18px 42px !important}
  .hero-cover-wrap{max-width:320px;margin:0 auto;width:100%}.hero-cover{height:500px !important}
  .hero-utility-row{align-items:flex-start}.hero-utility-actions{gap:12px;flex-direction:column;align-items:flex-end}
  .updated-inline small{display:none}.hero-info h1{font-size:44px !important}
  .hero-actions-elegant button{width:100%;min-width:0 !important}
  .credit-strip{grid-template-columns:1fr}.credit-strip-item{padding:14px 0 !important}.credit-strip-item:before{display:none !important}.credit-strip-item+.credit-strip-item{border-top:1px solid rgba(255,255,255,.07)}
  .fact-grid{grid-template-columns:1fr}.page-layout{padding-left:18px !important;padding-right:18px !important}
}


/* v5 – approved cinematic editorial mockup */
:root{
  --detail-gold:#c9a56a;
  --detail-gold-soft:#a88b61;
  --detail-red:#b91f24;
  --detail-red-bright:#d9363b;
  --detail-ink:#090a0c;
  --detail-panel:#101115;
  --detail-line:rgba(255,255,255,.09);
}

main{background:#090a0c}
.comic-hero{
  position:relative;
  isolation:isolate;
  grid-template-columns:390px minmax(0,1fr) !important;
  gap:56px !important;
  max-width:1540px;
  min-height:650px;
  margin:0 auto;
  padding:44px 48px 36px !important;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 7% 58%,rgba(125,17,20,.34),transparent 31%),
    radial-gradient(ellipse at 82% 8%,rgba(255,255,255,.025),transparent 35%),
    linear-gradient(112deg,#08090b 0%,#0a0b0e 48%,#090a0c 100%) !important;
  border-bottom:1px solid rgba(153,25,29,.25);
}
.comic-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-7%;bottom:-25px;
  width:58%;height:48%;
  opacity:.72;
  background:
    radial-gradient(ellipse at 42% 100%,rgba(185,31,36,.18),transparent 54%),
    repeating-radial-gradient(ellipse at 16% 110%,rgba(142,25,30,.17) 0 12px,rgba(30,8,10,.05) 14px 27px,transparent 30px 47px);
  filter:blur(.2px);
  transform:skewX(-8deg);
  pointer-events:none;
}
.comic-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-5%;top:7%;
  width:42%;height:82%;
  opacity:.11;
  background:
    repeating-radial-gradient(circle at 70% 40%,transparent 0 19px,rgba(201,165,106,.28) 20px 21px,transparent 22px 38px),
    repeating-linear-gradient(34deg,transparent 0 27px,rgba(201,165,106,.15) 28px 29px,transparent 30px 56px);
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 85%,transparent);
  pointer-events:none;
}

.hero-cover-wrap{
  position:relative;
  width:100%;
  max-width:390px;
  height:auto !important;
  align-self:start;
  padding:8px 8px 0 16px;
}
.hero-cover-wrap::before{
  content:"";
  position:absolute;
  left:0;right:-14px;bottom:34px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.78),transparent 68%);
  filter:blur(5px);
}
.hero-cover{
  position:relative;
  height:570px !important;
  overflow:visible !important;
  border-radius:3px !important;
  border:1px solid rgba(221,210,183,.18) !important;
  background:#111 !important;
  transform:perspective(1400px) rotateY(2.2deg);
  transform-origin:left center;
  box-shadow:
    -10px 12px 0 rgba(25,22,20,.9),
    -12px 12px 0 1px rgba(201,165,106,.12),
    0 34px 70px rgba(0,0,0,.58),
    0 0 55px rgba(144,24,28,.13) !important;
}
.hero-cover::before{
  content:"";
  position:absolute;
  z-index:3;
  left:-10px;top:3px;bottom:3px;
  width:10px;
  background:linear-gradient(90deg,#17120f,#3a2e24 48%,#0b0a09);
  border-left:1px solid rgba(201,165,106,.12);
  box-shadow:inset -1px 0 rgba(255,255,255,.05);
}
.hero-cover.has-image .hero-cover-image{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  border-radius:2px;
}
.broken-link-text{
  position:relative;
  z-index:2;
  width:max-content !important;
  margin:14px auto 0 !important;
  padding:7px 11px !important;
  color:#696b70 !important;
  font-size:9px !important;
  letter-spacing:.1em !important;
}
.broken-link-text:hover{color:#b9a582 !important}

.hero-info-elegant{
  position:relative;
  display:flex !important;
  flex-direction:column;
  min-width:0;
  min-height:570px;
  padding:20px 16px 0 0 !important;
}
.hero-utility-row{
  min-height:32px !important;
  margin:0 0 14px !important;
}
.updated-inline{display:none !important}
.hero-utility-actions{position:absolute;right:0;top:16px;margin:0 !important}
.share-inline{
  color:#777a82 !important;
  font-size:9px !important;
  letter-spacing:.14em !important;
}
.share-inline:hover{color:#d2b784 !important}
.share-inline span{color:var(--detail-red-bright) !important}
.series-status-badge{
  display:inline-flex !important;
  width:max-content;
  padding:8px 15px !important;
  border-radius:5px !important;
  border:1px solid rgba(72,190,118,.42) !important;
  background:rgba(23,96,58,.12) !important;
  color:#79d09a !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.15em !important;
  box-shadow:none !important;
}
.breadcrumbs{display:none !important}
.hero-info .eyebrow{
  margin:4px 0 14px !important;
  color:#df3439 !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.18em !important;
}
.hero-info h1{
  max-width:1050px !important;
  margin:0 0 8px !important;
  color:#f5f2ec !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(42px,4vw,65px) !important;
  font-weight:500 !important;
  line-height:1.03 !important;
  letter-spacing:.005em !important;
  text-wrap:balance;
}
.localized-title{
  margin:0 0 7px !important;
  color:#8d8f95 !important;
  font-size:15px !important;
}
.localized-title strong{color:#eeeae2 !important;font-weight:800}
.comic-subtitle{
  margin:0 0 17px !important;
  color:var(--detail-gold) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:24px !important;
  font-style:italic;
  font-weight:500 !important;
  letter-spacing:.01em;
}
.comic-subtitle::after{
  content:"";
  display:block;
  width:min(520px,75%);
  height:1px;
  margin-top:24px;
  background:linear-gradient(90deg,var(--detail-red-bright) 0 16%,rgba(255,255,255,.08) 16% 100%);
  box-shadow:0 0 12px rgba(185,31,36,.16);
}
.hero-meta{
  display:flex !important;
  align-items:center;
  gap:0 !important;
  margin:0 0 24px !important;
  flex-wrap:wrap;
}
.hero-meta span{
  position:relative;
  padding:0 22px !important;
  border:0 !important;
  background:transparent !important;
  color:#d7c8ad !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.11em !important;
}
.hero-meta span:first-child{padding-left:0 !important}
.hero-meta span+span:before{
  content:"" !important;
  position:absolute;
  left:0;top:50%;
  width:1px;height:15px;
  margin:0 !important;
  background:rgba(185,31,36,.42);
  transform:translateY(-50%);
}
.hero-meta span::after{display:none}
.hero-actions-elegant{
  display:grid !important;
  grid-template-columns:180px minmax(210px,1fr) minmax(210px,1fr);
  gap:14px !important;
  max-width:760px;
  margin:0 0 28px !important;
}
.hero-actions-elegant button{
  min-width:0 !important;
  min-height:50px !important;
  padding:0 18px !important;
  border-radius:3px !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.09em !important;
}
.primary-download{
  border:1px solid rgba(217,54,59,.65) !important;
  background:linear-gradient(180deg,rgba(124,21,25,.34),rgba(59,13,15,.48)) !important;
  color:#f4ede7 !important;
  box-shadow:inset 0 0 24px rgba(185,31,36,.08),0 8px 24px rgba(0,0,0,.18);
}
.primary-download span{color:#e94b50;font-size:18px}
.primary-download:hover:not(:disabled){border-color:#dc3b40 !important;background:linear-gradient(180deg,rgba(150,25,30,.4),rgba(68,14,17,.55)) !important}
.hero-actions-elegant .secondary-action{
  border:1px solid rgba(201,165,106,.28) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)) !important;
  color:#e6e0d7 !important;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.hero-actions-elegant .secondary-action:hover{border-color:rgba(201,165,106,.5) !important;background:rgba(201,165,106,.045) !important}
.hero-actions-elegant .secondary-action.added{border-color:rgba(110,193,139,.36) !important;color:#a9d9ba !important}

.credit-strip{
  display:grid !important;
  grid-template-columns:1fr 1.08fr 1fr .8fr !important;
  margin-top:auto !important;
  border-top:1px solid rgba(201,165,106,.16) !important;
  border-bottom:0 !important;
  background:linear-gradient(90deg,rgba(255,255,255,.008),transparent);
}
.credit-strip-item{
  min-height:92px;
  padding:20px 22px 16px !important;
  justify-content:center !important;
}
.credit-strip-item:first-child{padding-left:0 !important}
.credit-strip-item+.credit-strip-item:before{top:22% !important;bottom:22% !important;background:rgba(201,165,106,.16) !important}
.credit-strip-item>span{
  margin:0 0 7px !important;
  color:#8d8374 !important;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
}
.credit-strip-item strong{
  color:#f2eee8 !important;
  font-family:Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
}
.publisher-strip .publisher-credit-value img{max-width:125px !important;max-height:36px !important}
.publisher-name-text{
  display:block;
  margin-top:7px;
  color:#9b8568;
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.page-layout{
  max-width:1540px !important;
  margin:0 auto !important;
  padding:0 48px 70px !important;
  background:
    radial-gradient(circle at 0 16%,rgba(201,165,106,.035),transparent 18%),
    linear-gradient(#0a0b0d,#090a0c);
}
.detail-overview{
  position:relative;
  display:grid !important;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,.8fr) !important;
  gap:70px !important;
  margin:0 0 34px !important;
  padding:40px 0 42px !important;
  border-bottom:0 !important;
}
.detail-overview::before{
  content:"";
  position:absolute;
  left:-48px;right:-48px;top:0;
  height:1px;
  background:linear-gradient(90deg,rgba(185,31,36,.28),rgba(255,255,255,.06) 32%,rgba(255,255,255,.04));
}
.detail-overview .content-section{padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important}
.detail-overview .section-heading{margin:0 0 18px !important}
.detail-overview .section-heading h2{
  color:#f1eee8 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:17px !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
}
.detail-overview .section-heading::after{
  content:"";
  display:block;
  width:44px;height:1px;
  margin-top:10px;
  background:var(--detail-red-bright);
}
.overview-summary .lead-text{
  max-width:800px !important;
  color:#b8b8ba !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:15px !important;
  line-height:1.85 !important;
}
.overview-facts{padding-left:18px !important;border-left:1px solid rgba(201,165,106,.12) !important}
.fact-grid{
  display:block !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}
.fact-grid>div{
  display:grid !important;
  grid-template-columns:140px minmax(0,1fr);
  justify-content:initial !important;
  gap:22px !important;
  padding:8px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.055) !important;
}
.fact-grid span{
  color:#777a80 !important;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.1em !important;
}
.fact-grid strong{
  color:#e5e1da !important;
  font-size:11px !important;
  font-weight:700 !important;
  text-align:left !important;
}

.series-section{
  margin:0 0 46px !important;
  padding:0 !important;
  border:1px solid rgba(201,165,106,.16) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,rgba(27,21,20,.58),rgba(13,13,16,.78)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.02),0 12px 35px rgba(0,0,0,.16) !important;
}
.series-header{
  margin:0 !important;
  padding:13px 20px 10px !important;
  border-bottom:1px solid rgba(201,165,106,.11);
}
.series-header h2{
  display:flex;
  align-items:baseline;
  gap:5px;
  margin:0 !important;
  color:#eee9e1 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
}
.series-header h2>span{color:#ddd4c7 !important}
.series-header h2 small{margin-left:9px;color:#7e7469;font-family:Arial,sans-serif;font-size:8px;font-weight:900;letter-spacing:.13em}
.series-header a{color:#8f7c65 !important;font-size:8px !important;letter-spacing:.12em !important}
.series-carousel{padding:0 10px 10px !important}
.series-viewport{overflow:hidden !important}
.series-track{gap:8px !important;padding:0 !important}
.series-item{
  display:grid !important;
  grid-template-columns:70px 30px minmax(110px,1fr) !important;
  align-items:center !important;
  width:260px !important;
  min-width:260px !important;
  height:72px !important;
  padding:5px 12px 5px 5px !important;
  border:1px solid rgba(255,255,255,.05) !important;
  border-radius:2px !important;
  background:rgba(4,5,7,.42) !important;
  box-shadow:none !important;
}
.series-item.active{border-color:rgba(217,54,59,.68) !important;background:rgba(91,16,19,.18) !important}
.series-cover{
  width:62px !important;
  height:62px !important;
  margin:0 !important;
  border-radius:1px !important;
  overflow:hidden;
}
.series-cover img{width:100%;height:100%;object-fit:cover}
.series-number{
  margin:0 !important;
  color:#e9e4dc !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  text-align:center;
}
.series-title{
  display:block !important;
  max-height:34px;
  overflow:hidden;
  margin:0 !important;
  color:#b9b1a6 !important;
  font-size:9px !important;
  line-height:1.35 !important;
  text-align:left !important;
}
.series-arrow{border-color:rgba(201,165,106,.18) !important;background:#111216 !important;color:#99856b !important}
.series-arrow:hover:not(:disabled){border-color:rgba(217,54,59,.5) !important;color:#fff !important}

.related-hub,.tags-wide{border-color:rgba(201,165,106,.11) !important;background:rgba(255,255,255,.008) !important}
.related-hub-kicker,.related-tab.active,.related-panel-head>a{color:#bd9f74 !important}
.related-tab.active{border-color:rgba(201,165,106,.34) !important}
.tags-wide-list a{border-color:rgba(201,165,106,.14) !important;color:#968a79 !important;background:transparent !important}
.tags-wide-list a:hover{border-color:rgba(217,54,59,.45) !important;color:#fff !important}

@media(max-width:1180px){
  .comic-hero{grid-template-columns:330px minmax(0,1fr) !important;gap:38px !important;padding:38px 30px 34px !important}
  .hero-cover-wrap{max-width:330px}.hero-cover{height:500px !important}
  .hero-info-elegant{min-height:500px}
  .hero-info h1{font-size:46px !important}
  .hero-actions-elegant{grid-template-columns:150px 1fr 1fr}
  .credit-strip{grid-template-columns:1fr 1fr !important}.credit-strip-item:nth-child(3):before{display:none}.credit-strip-item:nth-child(n+3){border-top:1px solid rgba(201,165,106,.11)}
  .page-layout{padding-inline:30px !important}
  .detail-overview{grid-template-columns:1fr 1fr !important;gap:38px !important}
}
@media(max-width:800px){
  .comic-hero{grid-template-columns:1fr !important;padding:28px 18px 30px !important}
  .hero-cover-wrap{max-width:320px;margin:0 auto}.hero-cover{height:490px !important}
  .hero-info-elegant{min-height:0;padding-right:0 !important}
  .hero-utility-actions{top:10px}
  .hero-info h1{font-size:39px !important}
  .comic-subtitle{font-size:21px !important}
  .hero-actions-elegant{grid-template-columns:1fr !important;max-width:none}
  .credit-strip{grid-template-columns:1fr !important;margin-top:18px !important}.credit-strip-item{min-height:0;padding:14px 0 !important}.credit-strip-item:before{display:none !important}.credit-strip-item+.credit-strip-item{border-top:1px solid rgba(201,165,106,.11)}
  .page-layout{padding-inline:18px !important}
  .detail-overview{grid-template-columns:1fr !important;gap:32px !important;padding-top:32px !important}
  .overview-facts{padding-left:0 !important;border-left:0 !important}
  .series-item{width:235px !important;min-width:235px !important}
}

/* STEP 1 – approved background only. No layout/cover/content changes. */
.comic-hero{
  background-image:url("assets/comic-detail-bg.png") !important;
  background-size:cover !important;
  background-position:center 74% !important;
  background-repeat:no-repeat !important;
}
.comic-hero::before,
.comic-hero::after{
  display:none !important;
}

/* STEP 1B – use the complete background image across the full hero area. */
.comic-hero{
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* STEP 1C – only two changes:
   1) full-width proportional background (no oval distortion)
   2) cover presented as a slightly angled book resting on the stone edge */
.comic-hero{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  grid-template-columns:360px minmax(0,850px) !important;
  justify-content:center !important;
  background-image:
    linear-gradient(90deg, rgba(8,9,11,0) 0%, rgba(8,9,11,0) 46%, rgba(8,9,11,.32) 56%, rgba(8,9,11,.62) 70%, rgba(8,9,11,.82) 84%, rgba(8,9,11,.90) 100%),
    url("assets/comic-detail-bg.png") !important;
  background-size:100% 100%,112% auto !important;
  background-position:center center,84% 90% !important;
  background-repeat:no-repeat !important;
}

.hero-cover-wrap{
  align-self:end !important;
  perspective:1500px !important;
  padding-bottom:0 !important;
}

.hero-cover{
  transform:translateY(15px) rotateY(-7deg) rotateZ(-0.45deg) !important;
  transform-origin:left bottom !important;
  border-radius:2px 5px 5px 2px !important;
  box-shadow:
    -14px 8px 0 rgba(18,15,13,.96),
    -15px 8px 0 1px rgba(201,165,106,.13),
    0 28px 48px rgba(0,0,0,.52) !important;
}

.hero-cover::before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  left:-17px !important;
  top:5px !important;
  bottom:4px !important;
  width:17px !important;
  border:1px solid rgba(201,165,106,.12) !important;
  border-right:0 !important;
  border-radius:3px 0 0 3px !important;
  background:
    linear-gradient(90deg,#080707 0%,#1a1411 24%,#47372a 48%,#17110e 72%,#070707 100%) !important;
  box-shadow:inset -1px 0 rgba(255,255,255,.045),-5px 4px 10px rgba(0,0,0,.25) !important;
  pointer-events:none !important;
}

.hero-cover.has-image .hero-cover-image{
  border-radius:2px 5px 5px 2px !important;
}

.hero-cover-wrap::before{
  bottom:-1px !important;
  left:-4px !important;
  right:-8px !important;
  height:13px !important;
  opacity:.7 !important;
}

@media(max-width:1180px){
  .comic-hero{
    grid-template-columns:330px minmax(0,760px) !important;
    background-size:auto 100% !important;
    background-position:center center !important;
  }
  .hero-cover{transform:translateY(10px) rotateY(-5deg) rotateZ(-0.3deg) !important}
}

@media(max-width:800px){
  .comic-hero{
    grid-template-columns:1fr !important;
    background-size:auto 100% !important;
    background-position:center center !important;
  }
  .hero-cover{transform:translateY(4px) rotateY(-3deg) !important}
}

/* STEP 3 SIMPLE – just make the curtain clearly visible */
.comic-hero::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  left:40px !important;
  top:0 !important;
  width:560px !important;
  height:340px !important;
  background-image:url("assets/comic-detail-curtain.png") !important;
  background-repeat:no-repeat !important;
  background-position:left top !important;
  background-size:560px auto !important;
  opacity:.88 !important;
  filter:brightness(.52) saturate(.72) !important;
  pointer-events:none !important;
}
.comic-hero::after{display:none !important;}
@media(max-width:1180px){
  .comic-hero::before{
    left:20px !important;
    width:460px !important;
    height:300px !important;
    background-size:460px auto !important;
  }
}
@media(max-width:800px){
  .comic-hero::before{
    left:10px !important;
    width:300px !important;
    height:220px !important;
    background-size:300px auto !important;
    opacity:.84 !important;
  }
}


/* STEP 4 – align hero content with the same left content axis as ÖZET */
.comic-hero{
  justify-content:start !important;
  padding-left:max(48px, calc((100vw - 1540px) / 2 + 48px)) !important;
  padding-right:max(48px, calc((100vw - 1540px) / 2 + 48px)) !important;
}
@media(max-width:1540px){
  .comic-hero{
    padding-left:48px !important;
    padding-right:48px !important;
  }
}
@media(max-width:1180px){
  .comic-hero{
    padding-left:30px !important;
    padding-right:30px !important;
  }
}
@media(max-width:800px){
  .comic-hero{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}


/* STEP 6C – hardcover slightly larger and closer to the text block */
.hero-cover.hardcover-preview{
  width:346px !important;
  max-width:346px !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:-18px 0 0 -2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
  display:block !important;
}
.hero-cover.hardcover-preview::before,
.hero-cover.hardcover-preview::after{
  display:none !important;
  content:none !important;
}
.hero-cover.hardcover-preview .hero-hardcover-image{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.42)) !important;
}
.hero-cover-wrap:has(.hardcover-preview){
  width:362px !important;
  max-width:362px !important;
  align-self:end !important;
}
@media(max-width:1180px){
  .hero-cover.hardcover-preview{width:320px !important;max-width:320px !important;margin:-12px 0 0 -2px !important}
  .hero-cover-wrap:has(.hardcover-preview){width:340px !important;max-width:340px !important}
}
@media(max-width:800px){
  .hero-cover.hardcover-preview{width:290px !important;max-width:290px !important;margin:0 auto !important}
  .hero-cover-wrap:has(.hardcover-preview){width:100% !important;max-width:330px !important;margin:0 auto !important}
}

/* STEP 6D – larger hardcover, grounded shadow, curtain removed */
.comic-hero::before{
  display:none !important;
  content:none !important;
}

.hero-cover.hardcover-preview{
  width:372px !important;
  max-width:372px !important;
}
.hero-cover.hardcover-preview .hero-hardcover-image{
  position:relative !important;
  z-index:2 !important;
}
.hero-cover-wrap:has(.hardcover-preview){
  position:relative !important;
  width:388px !important;
  max-width:388px !important;
}
.hero-cover-wrap:has(.hardcover-preview)::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:35px !important;
  bottom:3px !important;
  width:300px !important;
  height:30px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62) 0%,rgba(0,0,0,.38) 42%,rgba(0,0,0,.10) 70%,transparent 78%) !important;
  filter:blur(5px) !important;
  pointer-events:none !important;
}

@media(max-width:1180px){
  .hero-cover.hardcover-preview{width:340px !important;max-width:340px !important}
  .hero-cover-wrap:has(.hardcover-preview){width:356px !important;max-width:356px !important}
  .hero-cover-wrap:has(.hardcover-preview)::after{left:32px !important;width:272px !important}
}
@media(max-width:800px){
  .hero-cover.hardcover-preview{width:305px !important;max-width:305px !important}
  .hero-cover-wrap:has(.hardcover-preview){width:100% !important;max-width:340px !important}
  .hero-cover-wrap:has(.hardcover-preview)::after{left:50% !important;transform:translateX(-50%) !important;width:245px !important}
}

/* STEP 6E – slightly larger and a little further left */
.hero-cover.hardcover-preview{
  width:390px !important;
  max-width:390px !important;
  margin:-18px 0 0 -24px !important;
}
.hero-cover-wrap:has(.hardcover-preview){
  width:402px !important;
  max-width:402px !important;
}
.hero-cover-wrap:has(.hardcover-preview)::after{
  left:22px !important;
  width:316px !important;
}
@media(max-width:1180px){
  .hero-cover.hardcover-preview{
    width:354px !important;
    max-width:354px !important;
    margin:-12px 0 0 -18px !important;
  }
  .hero-cover-wrap:has(.hardcover-preview){width:370px !important;max-width:370px !important}
  .hero-cover-wrap:has(.hardcover-preview)::after{left:22px !important;width:286px !important}
}
@media(max-width:800px){
  .hero-cover.hardcover-preview{
    width:312px !important;
    max-width:312px !important;
    margin:0 auto !important;
  }
  .hero-cover-wrap:has(.hardcover-preview){width:100% !important;max-width:345px !important}
  .hero-cover-wrap:has(.hardcover-preview)::after{left:50% !important;transform:translateX(-50%) !important;width:250px !important}
}


/* STEP 6F – more natural two-layer stone shadow for the hardcover */
.hero-cover.hardcover-preview .hero-hardcover-image{
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.28)) !important;
}
.hero-cover-wrap:has(.hardcover-preview)::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:34px !important;
  bottom:10px !important;
  width:238px !important;
  height:18px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.52) 0%, rgba(0,0,0,.32) 48%, rgba(0,0,0,.08) 68%, transparent 78%) !important;
  filter:blur(2px) !important;
  pointer-events:none !important;
}
.hero-cover-wrap:has(.hardcover-preview)::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  left:72px !important;
  bottom:-2px !important;
  width:286px !important;
  height:48px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.34) 0%, rgba(0,0,0,.20) 40%, rgba(0,0,0,.09) 62%, transparent 78%) !important;
  filter:blur(9px) !important;
  opacity:.90 !important;
  pointer-events:none !important;
}
@media(max-width:1180px){
  .hero-cover.hardcover-preview .hero-hardcover-image{
    filter:drop-shadow(0 16px 20px rgba(0,0,0,.26)) !important;
  }
  .hero-cover-wrap:has(.hardcover-preview)::before{
    left:30px !important;
    bottom:10px !important;
    width:216px !important;
    height:16px !important;
  }
  .hero-cover-wrap:has(.hardcover-preview)::after{
    left:62px !important;
    bottom:-1px !important;
    width:258px !important;
    height:42px !important;
  }
}
@media(max-width:800px){
  .hero-cover.hardcover-preview .hero-hardcover-image{
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.24)) !important;
  }
  .hero-cover-wrap:has(.hardcover-preview)::before{
    left:50% !important;
    transform:translateX(-50%) !important;
    bottom:8px !important;
    width:204px !important;
    height:15px !important;
  }
  .hero-cover-wrap:has(.hardcover-preview)::after{
    left:50% !important;
    transform:translateX(-50%) !important;
    bottom:-2px !important;
    width:230px !important;
    height:36px !important;
  }
}


/* STEP 6G – move hardcover slightly back to the left */
.hero-cover.hardcover-preview{
  margin:-18px 0 0 -40px !important;
}
@media(max-width:1180px){
  .hero-cover.hardcover-preview{
    margin:-12px 0 0 -30px !important;
  }
}
@media(max-width:800px){
  .hero-cover.hardcover-preview{
    margin:0 auto !important;
  }
}


/* USER TEMPLATE TEST – use supplied hardcover/shadow exactly; no extra CSS shadow or pebbles */
.hero-cover-wrap:has(.hardcover-preview)::before,
.hero-cover-wrap:has(.hardcover-preview)::after,
.hero-cover.hardcover-preview::before,
.hero-cover.hardcover-preview::after{
  display:none !important;
  content:none !important;
}
.hero-cover.hardcover-preview{
  width:340px !important;
  max-width:340px !important;
  margin:-18px 0 0 -40px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.hero-cover.hardcover-preview .hero-hardcover-image{
  width:100% !important;
  height:auto !important;
  filter:none !important;
  background:transparent !important;
}
.hero-cover-wrap:has(.hardcover-preview){
  width:352px !important;
  max-width:352px !important;
  overflow:visible !important;
}
@media(max-width:1180px){
  .hero-cover.hardcover-preview{
    width:312px !important;
    max-width:312px !important;
    margin:-12px 0 0 -30px !important;
  }
  .hero-cover-wrap:has(.hardcover-preview){width:326px !important;max-width:326px !important}
}
@media(max-width:800px){
  .hero-cover.hardcover-preview{
    width:285px !important;
    max-width:285px !important;
    margin:0 auto !important;
  }
  .hero-cover-wrap:has(.hardcover-preview){width:100% !important;max-width:320px !important;margin:0 auto !important}
}

/* STEP 7C – enlarge hardcover upward while keeping the bottom edge fixed */
.hero-cover.hardcover-preview{
  transform:scale(1.18) !important;
  transform-origin:right bottom !important;
}
@media(max-width:1180px){
  .hero-cover.hardcover-preview{
    transform:scale(1.12) !important;
    transform-origin:right bottom !important;
  }
}
@media(max-width:800px){
  .hero-cover.hardcover-preview{
    transform:none !important;
  }
}

/* STEP 8E – fit the user's finished book+cloth artwork cleanly into the existing left stage */
.comic-hero::before,
.comic-hero::after{
  display:none !important;
  content:none !important;
}
.hero-cover-wrap:has(.hardcover-preview){
  width:370px !important;
  max-width:370px !important;
  overflow:visible !important;
  align-self:end !important;
}
.hero-cover-wrap:has(.hardcover-preview)::before,
.hero-cover-wrap:has(.hardcover-preview)::after,
.hero-cover.hardcover-preview::before,
.hero-cover.hardcover-preview::after{
  display:none !important;
  content:none !important;
}
.hero-cover.hardcover-preview{
  position:relative !important;
  width:440px !important;
  max-width:440px !important;
  height:auto !important;
  min-height:0 !important;
  margin:-14px 0 0 -70px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
}
.hero-cover.hardcover-preview .hero-hardcover-image{
  display:block !important;
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:338px !important;
    max-width:338px !important;
  }
  .hero-cover.hardcover-preview{
    width:400px !important;
    max-width:400px !important;
    margin:-10px 0 0 -62px !important;
  }
}
@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
  }
  .hero-cover.hardcover-preview{
    width:340px !important;
    max-width:340px !important;
    margin:0 auto !important;
  }
}

/* STEP 8F – finished book+cloth artwork constrained to the left column */
.hero-cover-wrap:has(.hardcover-preview){
  width:365px !important;
  max-width:365px !important;
  min-width:0 !important;
  overflow:visible !important;
  align-self:end !important;
}
.hero-cover.hardcover-preview{
  position:relative !important;
  width:365px !important;
  max-width:365px !important;
  height:auto !important;
  min-height:0 !important;
  margin:-2px 0 0 0 !important;
  padding:0 !important;
  transform:none !important;
  transform-origin:center center !important;
  overflow:visible !important;
}
.hero-cover.hardcover-preview .hero-hardcover-image{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  transform:none !important;
  object-fit:contain !important;
}
@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:330px !important;
    max-width:330px !important;
  }
  .hero-cover.hardcover-preview{
    width:330px !important;
    max-width:330px !important;
    margin:0 !important;
  }
}
@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:100% !important;
    max-width:330px !important;
    margin:0 auto !important;
  }
  .hero-cover.hardcover-preview{
    width:100% !important;
    max-width:330px !important;
    margin:0 auto !important;
  }
}

/* STEP 8I – full artwork as-is, larger and deeper for left-side size/placement check */
.hero-cover-wrap:has(.hardcover-preview){
  width:610px !important;
  max-width:610px !important;
  min-width:0 !important;
  overflow:visible !important;
  align-self:end !important;
  margin-left:-58px !important;
  margin-top:42px !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.hero-cover-wrap:has(.hardcover-preview)::before,
.hero-cover-wrap:has(.hardcover-preview)::after,
.hero-cover.hardcover-preview::before,
.hero-cover.hardcover-preview::after{
  display:none !important;
  content:none !important;
}
.hero-cover.hardcover-preview{
  position:relative !important;
  width:610px !important;
  max-width:610px !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
}
.hero-cover.hardcover-preview .hero-hardcover-image{
  display:block !important;
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:500px !important;
    max-width:500px !important;
    margin-left:-34px !important;
    margin-top:26px !important;
  }
  .hero-cover.hardcover-preview{
    width:500px !important;
    max-width:500px !important;
  }
}
@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:100% !important;
    max-width:380px !important;
    margin:18px auto 0 !important;
  }
  .hero-cover.hardcover-preview{
    width:100% !important;
    max-width:380px !important;
    margin:0 auto !important;
  }
}

/* STEP 8J – lower to stone edge, shift left, enlarge toward upper-left */
.hero-cover-wrap:has(.hardcover-preview){
  margin-left:-120px !important;
  margin-top:72px !important;
}
.hero-cover.hardcover-preview{
  transform:scale(1.10) !important;
  transform-origin:right bottom !important;
}
@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    margin-left:-78px !important;
    margin-top:46px !important;
  }
  .hero-cover.hardcover-preview{
    transform:scale(1.07) !important;
    transform-origin:right bottom !important;
  }
}
@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    margin:22px auto 0 !important;
  }
  .hero-cover.hardcover-preview{
    transform:none !important;
  }
}


/* STEP 8K – keep STEP 8J as reference; only a little farther left and a little larger */
.hero-cover-wrap:has(.hardcover-preview){
  margin-left:-145px !important;
  margin-top:72px !important;
}
.hero-cover.hardcover-preview{
  transform:scale(1.15) !important;
  transform-origin:right bottom !important;
}
@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    margin-left:-94px !important;
    margin-top:46px !important;
  }
  .hero-cover.hardcover-preview{
    transform:scale(1.10) !important;
    transform-origin:right bottom !important;
  }
}
@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    margin:22px auto 0 !important;
  }
  .hero-cover.hardcover-preview{
    transform:none !important;
  }
}

/* STEP 8L – keep STEP 8K exactly; shift the complete hero information block slightly right */
.hero-info.hero-info-elegant{
  transform:translateX(32px) !important;
}
@media(max-width:1180px){
  .hero-info.hero-info-elegant{
    transform:translateX(20px) !important;
  }
}
@media(max-width:800px){
  .hero-info.hero-info-elegant{
    transform:none !important;
  }
}


/* v2.31 – dekorative rote Zierlinie statt einfacher roter Striche */
:root{
  --ornament-divider:url("data:image/png;base64,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");
}

.comic-subtitle::after{
  width:206px !important;
  height:29px !important;
  margin-top:16px !important;
  background:var(--ornament-divider) left center / 206px 29px no-repeat !important;
  box-shadow:none !important;
}

.detail-overview .section-heading{
  align-items:center !important;
  gap:14px !important;
}

.detail-overview .section-heading span{
  display:block !important;
  flex:1 1 auto !important;
  min-width:120px;
  height:29px !important;
  background:var(--ornament-divider) left center / 170px 24px no-repeat !important;
  box-shadow:none !important;
}

.detail-overview .section-heading::after{
  display:none !important;
}


/* STEP 8N – requested Comic Detail polish, based on STEP 8K/8M */

/* 1. Longer ornamental divider under the comic subtitle */
.comic-subtitle::after{
  width:min(640px,88%) !important;
  height:29px !important;
  margin-top:16px !important;
  background:var(--ornament-divider) left center / 100% 29px no-repeat !important;
  box-shadow:none !important;
}

/* 2+3. Ornament sits below ÖZET and YAYIN BİLGİLERİ */
.detail-overview .section-heading{
  display:block !important;
  margin:0 0 18px !important;
}
.detail-overview .section-heading h2{
  display:block !important;
  width:max-content;
}
.detail-overview .section-heading span{
  display:block !important;
  width:178px !important;
  height:25px !important;
  margin:5px 0 0 !important;
  background:var(--ornament-divider) left center / 178px 25px no-repeat !important;
  box-shadow:none !important;
}
.overview-facts .section-heading span{
  width:228px !important;
  background-size:228px 25px !important;
}
.detail-overview .section-heading::after{display:none !important;content:none !important}

/* 4. PAYLAŞ and KIRIK LİNK BİLDİR use the same refined action-box language */
.share-inline,
.broken-link-text{
  min-height:40px !important;
  border:1px solid rgba(201,165,106,.28) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)) !important;
  color:#d9d1c6 !important;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 7px 20px rgba(0,0,0,.14) !important;
  transition:border-color .2s ease,background .2s ease,color .2s ease !important;
}
.share-inline{
  min-width:112px !important;
  padding:0 15px !important;
  justify-content:center !important;
}
.share-inline:hover,
.broken-link-text:hover{
  border-color:rgba(217,54,59,.52) !important;
  background:rgba(185,31,36,.07) !important;
  color:#fff !important;
}
.broken-link-text{
  width:190px !important;
  max-width:100% !important;
  margin:12px auto 0 !important;
  padding:0 13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}
.broken-link-text>span{
  width:17px !important;
  height:17px !important;
  flex:0 0 17px !important;
}

/* 6+10. Five credits, stronger refined separators */
.credit-strip{
  grid-template-columns:1fr 1fr 1.12fr .9fr .82fr !important;
}
.credit-strip-item+.credit-strip-item:before{
  width:1px !important;
  top:17% !important;
  bottom:17% !important;
  background:linear-gradient(to bottom,transparent,rgba(217,54,59,.52) 20%,rgba(201,165,106,.38) 52%,rgba(217,54,59,.52) 82%,transparent) !important;
  box-shadow:0 0 7px rgba(185,31,36,.22) !important;
}
.credit-strip-item>span{
  color:#a6947c !important;
}

/* 7. Larger series covers with proper comic proportions */
.series-track{gap:12px !important}
.series-item{
  grid-template-columns:92px 34px minmax(126px,1fr) !important;
  width:330px !important;
  min-width:330px !important;
  height:140px !important;
  padding:6px 14px 6px 6px !important;
}
.series-cover{
  width:88px !important;
  height:128px !important;
  aspect-ratio:auto !important;
}
.series-title{
  max-height:54px !important;
  font-size:10px !important;
  line-height:1.4 !important;
}
.series-number{font-size:17px !important}

/* 8. Larger covers in DİĞER ESERLER */
.related-mini-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
}
.related-mini-item{
  grid-template-columns:72px minmax(0,1fr) 18px !important;
  min-height:108px !important;
  padding:7px !important;
}
.related-mini-item .mini-cover{
  width:70px !important;
  height:100px !important;
}
.related-mini-item strong{
  font-size:12px !important;
  white-space:normal !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.related-mini-item small{font-size:10px !important}

/* 9. Restore the elegant red shimmer on ETİKETLER */
.tags-wide{
  position:relative !important;
  overflow:hidden !important;
  border-color:rgba(185,31,36,.24) !important;
  background:
    radial-gradient(circle at 12% 50%,rgba(190,13,13,.13),transparent 31%),
    linear-gradient(100deg,rgba(92,13,16,.10),rgba(255,255,255,.006) 52%,rgba(92,13,16,.06)) !important;
  box-shadow:inset 0 0 34px rgba(190,13,13,.045),0 0 24px rgba(190,13,13,.055) !important;
}
.tags-wide::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-45% auto -45% -14% !important;
  width:42% !important;
  background:radial-gradient(ellipse,rgba(214,40,43,.16),transparent 68%) !important;
  filter:blur(15px) !important;
  opacity:.9 !important;
  pointer-events:none !important;
}
.tags-wide h2,.tags-wide-list{position:relative;z-index:1}
.tags-wide-list a{
  border-color:rgba(214,40,43,.42) !important;
  color:#c8a39f !important;
  background:linear-gradient(180deg,rgba(114,18,22,.10),rgba(44,8,10,.08)) !important;
  box-shadow:inset 0 0 12px rgba(190,13,13,.045),0 0 10px rgba(190,13,13,.035) !important;
}
.tags-wide-list a:hover{
  border-color:rgba(231,62,67,.72) !important;
  background:rgba(190,13,13,.14) !important;
  box-shadow:0 0 16px rgba(190,13,13,.13) !important;
}

@media(max-width:1180px){
  .credit-strip{grid-template-columns:repeat(3,1fr) !important}
  .credit-strip-item:nth-child(3):before{display:block !important}
  .credit-strip-item:nth-child(4):before{display:none !important}
  .credit-strip-item:nth-child(n+4){border-top:1px solid rgba(201,165,106,.11)}
  .series-item{width:300px !important;min-width:300px !important}
  .related-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:800px){
  .credit-strip{grid-template-columns:1fr !important}
  .credit-strip-item:before{display:none !important}
  .series-item{width:270px !important;min-width:270px !important;grid-template-columns:82px 32px minmax(110px,1fr) !important;height:126px !important}
  .series-cover{width:78px !important;height:114px !important}
  .related-mini-grid{grid-template-columns:1fr !important}
  .comic-subtitle::after{width:min(420px,100%) !important}
}

/* STEP 8O – action row, centered overview headings, cover-dominant lower sections */

/* 1. PAYLAŞ + KIRIK LİNK BİLDİR live in the same action row */
.hero-utility-actions{display:none !important}
.hero-actions-elegant{
  grid-template-columns:minmax(150px,.9fr) minmax(190px,1.2fr) minmax(190px,1.2fr) minmax(175px,1.05fr) minmax(115px,.7fr) !important;
  gap:12px !important;
  width:100% !important;
  max-width:none !important;
}
.hero-actions-elegant .action-row-extra{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:50px !important;
  margin:0 !important;
  padding:0 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border:1px solid rgba(201,165,106,.28) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)) !important;
  color:#e6e0d7 !important;
  box-shadow:inset 0 1px rgba(255,255,255,.025) !important;
}
.hero-actions-elegant .action-row-extra:hover{
  border-color:rgba(201,165,106,.5) !important;
  background:rgba(201,165,106,.045) !important;
  color:#fff !important;
}
.hero-actions-elegant .broken-link-text>span{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(217,54,59,.65) !important;
  border-radius:50% !important;
  color:#e94b50 !important;
  font-size:10px !important;
}
.hero-actions-elegant .share-inline span{
  color:#e94b50 !important;
  font-size:17px !important;
}
.hero-actions-elegant .action-row-extra strong{
  color:inherit !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
}

/* 2. ÖZET / YAYIN BİLGİLERİ + ornament centered */
.detail-overview .section-heading{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:0 !important;
}
.detail-overview .section-heading h2{
  width:auto !important;
  margin:0 auto !important;
  text-align:center !important;
}
.detail-overview .section-heading span,
.overview-facts .section-heading span{
  margin:5px auto 0 !important;
  flex:0 0 auto !important;
}

/* 3. SERİ: large covers, minimal text below */
.series-section{
  padding:24px 26px 28px !important;
}
.series-track{
  gap:24px !important;
  align-items:flex-start !important;
}
.series-item{
  flex:0 0 208px !important;
  width:208px !important;
  min-width:208px !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  grid-template-columns:none !important;
  padding:8px 8px 12px !important;
  border:1px solid transparent !important;
  background:transparent !important;
}
.series-cover{
  width:190px !important;
  height:280px !important;
  aspect-ratio:auto !important;
  flex:0 0 auto !important;
  border-radius:4px !important;
  box-shadow:0 14px 30px rgba(0,0,0,.42) !important;
}
.series-cover.has-image img,
.series-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.series-number{
  display:block !important;
  width:100% !important;
  margin:11px 0 0 !important;
  color:#d7c8ad !important;
  font-size:11px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  letter-spacing:.12em !important;
  text-align:center !important;
}
.series-title{display:none !important}
.series-item.active{
  border-color:rgba(217,54,59,.34) !important;
  background:linear-gradient(180deg,rgba(105,16,20,.12),rgba(105,16,20,.025)) !important;
  box-shadow:0 0 18px rgba(185,31,36,.10) !important;
}
.series-item.active .series-cover{
  border-color:rgba(217,54,59,.55) !important;
  box-shadow:0 15px 32px rgba(0,0,0,.44),0 0 18px rgba(185,31,36,.14) !important;
}

/* DİĞER ESERLER: larger cover-first cards */
.related-mini-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px !important;
}
.related-mini-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:0 !important;
  padding:12px 10px 14px !important;
  text-align:center !important;
  border:1px solid rgba(201,165,106,.10) !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004)) !important;
}
.related-mini-item .mini-cover{
  width:138px !important;
  height:202px !important;
  flex:0 0 auto !important;
  border-radius:4px !important;
  box-shadow:0 12px 26px rgba(0,0,0,.38) !important;
}
.related-mini-item .mini-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.related-mini-item>div:nth-child(2){
  width:100% !important;
  margin-top:10px !important;
}
.related-mini-item strong{
  display:-webkit-box !important;
  width:100% !important;
  min-height:31px !important;
  color:#eeeae2 !important;
  font-size:11px !important;
  line-height:1.4 !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:hidden !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}
.related-mini-item small{
  display:block !important;
  margin-top:5px !important;
  color:#8f8373 !important;
  font-size:9px !important;
  line-height:1.35 !important;
  text-align:center !important;
}
.related-mini-arrow{display:none !important}
.related-mini-item:hover{
  border-color:rgba(217,54,59,.28) !important;
  background:rgba(185,31,36,.035) !important;
}

@media(max-width:1250px){
  .hero-actions-elegant{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .related-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media(max-width:900px){
  .hero-actions-elegant{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .series-item{flex-basis:184px !important;width:184px !important;min-width:184px !important}
  .series-cover{width:168px !important;height:247px !important}
  .related-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:560px){
  .hero-actions-elegant{grid-template-columns:1fr !important}
  .related-mini-grid{grid-template-columns:1fr 1fr !important;gap:14px !important}
  .related-mini-item .mini-cover{width:118px !important;height:174px !important}
}

/* STEP 8P – Hero-Inhalt weiter nach rechts + mehr Abstand zwischen ÖZET und YAYIN BİLGİLERİ */
.hero-info.hero-info-elegant{
  padding:20px 0 0 76px !important;
}
.hero-info.hero-info-elegant .hero-utility-row,
.hero-info.hero-info-elegant .eyebrow,
.hero-info.hero-info-elegant h1,
.hero-info.hero-info-elegant .localized-title,
.hero-info.hero-info-elegant .comic-subtitle,
.hero-info.hero-info-elegant .hero-meta,
.hero-info.hero-info-elegant .hero-actions-elegant,
.hero-info.hero-info-elegant .credit-strip{
  max-width:none !important;
}
.hero-info.hero-info-elegant .comic-subtitle::after{
  width:min(620px,88%) !important;
}

.detail-overview{
  grid-template-columns:minmax(0,1.32fr) minmax(420px,.94fr) !important;
  gap:98px !important;
  padding-top:52px !important;
}
.overview-summary{
  padding-right:16px !important;
}
.overview-facts{
  padding-left:34px !important;
  border-left:1px solid rgba(201,165,106,.18) !important;
}

@media (max-width:1350px){
  .hero-info.hero-info-elegant{
    padding-left:52px !important;
  }
  .detail-overview{
    grid-template-columns:minmax(0,1.3fr) minmax(360px,.9fr) !important;
    gap:74px !important;
  }
}

@media (max-width:980px){
  .hero-info.hero-info-elegant{
    padding-left:0 !important;
  }
  .detail-overview{
    grid-template-columns:1fr !important;
    gap:38px !important;
  }
  .overview-summary{
    padding-right:0 !important;
  }
  .overview-facts{
    padding-left:0 !important;
    border-left:0 !important;
  }
}

/* STEP 8Q – final universal comic detail stage: real DB cover on every comic page */
.hero-cover.hardcover-preview{
  aspect-ratio:1448 / 1086 !important;
}
.hero-hardcover-stage{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1448 / 1086 !important;
  overflow:visible !important;
}
.hero-hardcover-live-cover{
  position:absolute !important;
  z-index:1 !important;
  left:35.55% !important;
  top:10.75% !important;
  width:33.95% !important;
  height:68.85% !important;
  display:block !important;
  object-fit:fill !important;
  border:0 !important;
  border-radius:0 !important;
  background:#111 !important;
  filter:brightness(.92) contrast(1.035) saturate(.94) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;
  transform:rotate(.15deg) !important;
  transform-origin:center center !important;
}
.hero-hardcover-live-spine{
  position:absolute !important;
  z-index:2 !important;
  left:30.65% !important;
  top:11.55% !important;
  width:4.75% !important;
  height:66.05% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.55),transparent 20%,transparent 80%,rgba(0,0,0,.5)),
    linear-gradient(180deg,#28150d 0%,#17100c 48%,#2b170f 100%) !important;
  border-left:1px solid rgba(201,165,106,.18) !important;
  border-right:1px solid rgba(201,165,106,.12) !important;
  box-shadow:inset 3px 0 9px rgba(0,0,0,.38),inset -2px 0 7px rgba(0,0,0,.3) !important;
  transform:rotate(.1deg) !important;
}
.hero-hardcover-live-spine span{
  display:block !important;
  max-height:88% !important;
  overflow:hidden !important;
  color:#a77d45 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(6px,.62vw,10px) !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  writing-mode:vertical-rl !important;
  transform:rotate(180deg) !important;
  opacity:.82 !important;
}
.hero-hardcover-frame{
  position:absolute !important;
  z-index:3 !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  pointer-events:none !important;
  border:0 !important;
  background:transparent !important;
  filter:none !important;
}

/* The legacy Lancelot-only rendered asset is no longer used. */
.hero-cover.hardcover-preview .hero-hardcover-image{display:none !important}

@media(max-width:800px){
  .hero-hardcover-live-spine span{font-size:7px !important}
}

/* STEP 8R – preserve every comic cover's real proportions inside the universal hardcover */
.hero-hardcover-live-face{
  position:absolute !important;
  z-index:1 !important;
  left:35.35% !important;
  top:10.65% !important;
  width:34.25% !important;
  height:69.05% !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,#18120f,#090a0c 72%) !important;
  clip-path:polygon(0 0,100% 3.2%,97.7% 99.2%,0 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 24px rgba(0,0,0,.24) !important;
}
.hero-hardcover-cover-backdrop{
  position:absolute !important;
  z-index:0 !important;
  inset:-5% !important;
  width:110% !important;
  height:110% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  filter:blur(12px) brightness(.34) saturate(.72) !important;
  transform:scale(1.08) !important;
  opacity:.9 !important;
}
.hero-hardcover-live-cover{
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  filter:brightness(.94) contrast(1.025) saturate(.96) !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Neutralize the old fixed-size/stretch rules from STEP 8Q. */
.hero-hardcover-stage > .hero-hardcover-live-cover{
  left:auto !important;
  top:auto !important;
  width:auto !important;
  height:auto !important;
}

/* STEP 8S – real cover defines the hardcover front; no forced cover ratio */
.hero-cover.hardcover-preview{
  aspect-ratio:1448 / 1086 !important;
  overflow:visible !important;
}
.hero-hardcover-stage{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1448 / 1086 !important;
  overflow:visible !important;
}
.hero-hardcover-stage::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:27% !important;
  top:5% !important;
  width:47% !important;
  height:77% !important;
  background:radial-gradient(ellipse at center,rgba(34,7,9,.84) 0%,rgba(18,7,8,.67) 48%,rgba(9,8,9,.18) 76%,transparent 100%) !important;
  filter:blur(12px) !important;
  pointer-events:none !important;
}
.hero-hardcover-cloth-back,
.hero-hardcover-cloth-front{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  pointer-events:none !important;
  background:transparent !important;
  border:0 !important;
}
.hero-hardcover-cloth-back{z-index:1 !important}
.hero-hardcover-cloth-front{z-index:5 !important}

.hero-hardcover-book{
  position:absolute !important;
  z-index:3 !important;
  left:50.2% !important;
  bottom:18.7% !important;
  width:39.2% !important;
  height:auto !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  transform:translateX(-50%) rotate(-.35deg) !important;
  transform-origin:center bottom !important;
  filter:drop-shadow(-13px 20px 14px rgba(0,0,0,.32)) drop-shadow(7px 19px 20px rgba(0,0,0,.23)) !important;
}
.hero-hardcover-live-spine{
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  flex:0 0 11.8% !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.62),rgba(67,37,24,.9) 19%,rgba(30,19,14,.96) 67%,rgba(0,0,0,.58)),
    linear-gradient(180deg,#392115,#160f0b 55%,#311b12) !important;
  border-left:1px solid rgba(201,165,106,.22) !important;
  border-right:1px solid rgba(201,165,106,.18) !important;
  box-shadow:inset 5px 0 12px rgba(0,0,0,.42),inset -3px 0 9px rgba(0,0,0,.35) !important;
  transform:none !important;
}
.hero-hardcover-live-spine span{
  display:block !important;
  max-height:84% !important;
  overflow:hidden !important;
  color:#b58b50 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(6px,.58vw,10px) !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  writing-mode:vertical-rl !important;
  transform:rotate(180deg) !important;
  opacity:.86 !important;
}
.hero-hardcover-live-face{
  position:relative !important;
  inset:auto !important;
  z-index:3 !important;
  flex:1 1 auto !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  padding:5px !important;
  background:
    linear-gradient(135deg,#72512f 0%,#2d2017 12%,#18120f 48%,#5a3d25 88%,#957044 100%) !important;
  clip-path:none !important;
  border:1px solid rgba(198,155,94,.34) !important;
  border-radius:2px 5px 5px 2px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,233,190,.08),
    inset 0 0 14px rgba(0,0,0,.34),
    1px 0 0 rgba(255,255,255,.045) !important;
}
.hero-hardcover-live-face::after{
  content:"" !important;
  position:absolute !important;
  inset:5px !important;
  z-index:2 !important;
  pointer-events:none !important;
  border:1px solid rgba(255,239,205,.07) !important;
  box-shadow:inset 0 0 14px rgba(0,0,0,.10) !important;
}
.hero-hardcover-live-cover{
  position:relative !important;
  inset:auto !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  object-fit:initial !important;
  object-position:initial !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 2px 2px 0 !important;
  background:transparent !important;
  filter:brightness(.96) contrast(1.02) saturate(.97) !important;
  box-shadow:none !important;
  transform:none !important;
}
.hero-hardcover-cover-backdrop,
.hero-hardcover-frame{
  display:none !important;
}

@media(max-width:1180px){
  .hero-hardcover-book{width:39.5% !important;bottom:18.5% !important}
}
@media(max-width:800px){
  .hero-hardcover-book{width:42% !important;bottom:18% !important}
  .hero-hardcover-live-spine span{font-size:7px !important}
}

/* STEP 8T – clean universal hardcover: real cover IS the front, no box, no mask */
.hero-cover-wrap:has(.hardcover-preview){
  overflow:visible !important;
}
.hero-cover.hardcover-preview{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1448 / 1086 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-cover.hardcover-preview::before,
.hero-cover.hardcover-preview::after,
.hero-cover-wrap:has(.hardcover-preview)::before,
.hero-cover-wrap:has(.hardcover-preview)::after{
  display:none !important;
  content:none !important;
}
.hero-hardcover-stage{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1448 / 1086 !important;
  overflow:visible !important;
  background:transparent !important;
}
.hero-hardcover-stage::before,
.hero-hardcover-stage::after{
  display:none !important;
  content:none !important;
}
.hero-hardcover-cloth-back,
.hero-hardcover-cloth-front{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  pointer-events:none !important;
}
.hero-hardcover-cloth-back{z-index:1 !important}
.hero-hardcover-cloth-front{z-index:5 !important}

.hero-hardcover-book{
  position:absolute !important;
  z-index:3 !important;
  left:50% !important;
  bottom:18.8% !important;
  width:max-content !important;
  max-width:none !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  transform:translateX(-50%) rotate(-.35deg) !important;
  transform-origin:center bottom !important;
  filter:drop-shadow(-12px 18px 14px rgba(0,0,0,.32)) drop-shadow(8px 18px 18px rgba(0,0,0,.22)) !important;
  background:transparent !important;
}
.hero-hardcover-live-spine{
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  flex:0 0 38px !important;
  width:38px !important;
  min-width:38px !important;
  height:auto !important;
  min-height:0 !important;
  align-self:stretch !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.68),rgba(76,39,24,.92) 22%,rgba(27,17,13,.97) 68%,rgba(0,0,0,.60)),
    linear-gradient(180deg,#3c2014,#160e0a 55%,#352016) !important;
  border-left:1px solid rgba(201,165,106,.22) !important;
  border-right:1px solid rgba(201,165,106,.20) !important;
  border-radius:3px 0 0 3px !important;
  box-shadow:inset 5px 0 12px rgba(0,0,0,.45),inset -3px 0 9px rgba(0,0,0,.34) !important;
  transform:none !important;
}
.hero-hardcover-live-spine span{
  display:block !important;
  max-height:84% !important;
  overflow:hidden !important;
  color:#b88c50 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:8px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  writing-mode:vertical-rl !important;
  transform:rotate(180deg) !important;
  opacity:.88 !important;
}
.hero-hardcover-live-face{
  position:relative !important;
  inset:auto !important;
  z-index:3 !important;
  flex:0 0 auto !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  overflow:visible !important;
  padding:3px !important;
  background:linear-gradient(135deg,#6b4a2b,#231812 45%,#5a3b24) !important;
  border:1px solid rgba(202,160,99,.30) !important;
  border-radius:0 4px 4px 0 !important;
  box-shadow:inset 0 0 0 1px rgba(255,238,207,.055),inset 0 0 9px rgba(0,0,0,.24) !important;
  clip-path:none !important;
  transform:none !important;
}
.hero-hardcover-live-face::before,
.hero-hardcover-live-face::after{
  display:none !important;
  content:none !important;
}
.hero-hardcover-live-cover{
  position:relative !important;
  inset:auto !important;
  z-index:1 !important;
  display:block !important;
  width:auto !important;
  max-width:none !important;
  height:400px !important;
  max-height:400px !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:initial !important;
  object-position:initial !important;
  border:0 !important;
  border-radius:0 2px 2px 0 !important;
  background:transparent !important;
  filter:brightness(.97) contrast(1.02) saturate(.98) !important;
  box-shadow:none !important;
  transform:none !important;
}
.hero-hardcover-cover-backdrop,
.hero-hardcover-frame{display:none !important}

@media(max-width:1180px){
  .hero-hardcover-live-cover{height:360px !important;max-height:360px !important}
  .hero-hardcover-live-spine{flex-basis:34px !important;width:34px !important;min-width:34px !important}
  .hero-hardcover-book{bottom:18.6% !important}
}
@media(max-width:800px){
  .hero-hardcover-live-cover{height:310px !important;max-height:310px !important}
  .hero-hardcover-live-spine{flex-basis:30px !important;width:30px !important;min-width:30px !important}
  .hero-hardcover-live-spine span{font-size:7px !important}
  .hero-hardcover-book{bottom:18.2% !important}
}

/* STEP 8U – hardcover edge aligned to the real cover */
.hero-hardcover-live-spine{
  flex-basis:24px !important;
  width:24px !important;
  min-width:24px !important;
  margin:0 !important;
  border-left:1px solid rgba(201,165,106,.20) !important;
  border-right:1px solid rgba(201,165,106,.34) !important;
  border-radius:3px 0 0 3px !important;
  background:
    linear-gradient(90deg,#100b09 0%,#3b261b 26%,#241710 64%,#0c0907 100%) !important;
  box-shadow:
    inset 3px 0 7px rgba(0,0,0,.48),
    inset -2px 0 4px rgba(255,220,165,.06) !important;
}
.hero-hardcover-live-spine span{
  font-size:7px !important;
  letter-spacing:.09em !important;
  color:#b99059 !important;
}
.hero-hardcover-live-face{
  position:relative !important;
  padding:2px 3px 3px 2px !important;
  border:1px solid rgba(202,160,99,.42) !important;
  border-left:0 !important;
  border-radius:0 3px 3px 0 !important;
  background:linear-gradient(135deg,#5b3d26 0%,#2a1b12 48%,#6a472b 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,235,201,.07),
    2px 0 0 rgba(31,20,14,.95),
    4px 1px 6px rgba(0,0,0,.24) !important;
}
.hero-hardcover-live-face::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:4 !important;
  left:0 !important;
  right:-3px !important;
  top:-3px !important;
  height:3px !important;
  background:linear-gradient(90deg,#2b1b12,#8b6540 28%,#4d3422 72%,#1a110c) !important;
  border-radius:0 3px 0 0 !important;
  opacity:.9 !important;
  pointer-events:none !important;
}
.hero-hardcover-live-face::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:4 !important;
  left:0 !important;
  right:-3px !important;
  bottom:-3px !important;
  height:3px !important;
  background:linear-gradient(90deg,#1b120d,#624228 32%,#2d1e15 75%,#0d0907) !important;
  border-radius:0 0 3px 0 !important;
  opacity:.95 !important;
  pointer-events:none !important;
}
.hero-hardcover-live-cover{
  border-radius:0 1px 1px 0 !important;
  box-shadow:none !important;
}

@media(max-width:1180px){
  .hero-hardcover-live-spine{flex-basis:22px !important;width:22px !important;min-width:22px !important}
}
@media(max-width:800px){
  .hero-hardcover-live-spine{flex-basis:19px !important;width:19px !important;min-width:19px !important}
  .hero-hardcover-live-spine span{font-size:6px !important}
}

/* STEP 8V – echte Hardcover-Tiefe ohne Änderung von Covergröße oder Stoffposition */
.hero-hardcover-stage{
  perspective:1300px !important;
  perspective-origin:46% 44% !important;
}

.hero-hardcover-book{
  transform:translateX(-50%) rotate(-.35deg) rotateY(-2.8deg) !important;
  transform-style:preserve-3d !important;
  transform-origin:center bottom !important;
  filter:
    drop-shadow(-10px 15px 12px rgba(0,0,0,.28))
    drop-shadow(10px 20px 20px rgba(0,0,0,.24)) !important;
}

/* Rücken: leicht gerundet statt flachem braunen Streifen */
.hero-hardcover-live-spine{
  flex-basis:28px !important;
  width:28px !important;
  min-width:28px !important;
  border-left:1px solid rgba(220,181,120,.18) !important;
  border-right:1px solid rgba(222,183,121,.30) !important;
  border-radius:5px 1px 1px 5px !important;
  background:
    linear-gradient(90deg,
      #0b0807 0%,
      #21140f 14%,
      #5a3825 42%,
      #2f1d15 68%,
      #100b09 100%) !important;
  box-shadow:
    inset 4px 0 7px rgba(0,0,0,.58),
    inset -2px 0 4px rgba(255,223,169,.10),
    -2px 0 5px rgba(0,0,0,.24) !important;
}
.hero-hardcover-live-spine::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:2.5% !important;
  right:2px !important;
  bottom:2.5% !important;
  width:2px !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,transparent,rgba(210,165,101,.30) 12%,rgba(24,13,9,.85) 50%,rgba(210,165,101,.22) 88%,transparent) !important;
  box-shadow:-2px 0 3px rgba(0,0,0,.34) !important;
  pointer-events:none !important;
}

/* Vorderdeckel: dünne harte Kante, oben und rechts sichtbar */
.hero-hardcover-live-face{
  padding:3px 5px 6px 3px !important;
  border:1px solid rgba(194,151,94,.42) !important;
  border-left:0 !important;
  border-radius:0 4px 4px 0 !important;
  background:linear-gradient(135deg,#5e4028 0%,#2a1c14 46%,#765236 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,236,205,.06),
    3px 2px 0 rgba(44,29,20,.92),
    7px 7px 0 rgba(108,91,68,.52),
    11px 13px 18px rgba(0,0,0,.30) !important;
  transform:translateZ(1px) !important;
}

/* obere Buchkante */
.hero-hardcover-live-face::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:6 !important;
  left:1px !important;
  right:-7px !important;
  top:-6px !important;
  height:6px !important;
  border-radius:0 4px 1px 0 !important;
  background:
    linear-gradient(180deg,#8e6b45 0%,#4a3424 42%,#21170f 100%) !important;
  border-top:1px solid rgba(225,192,139,.24) !important;
  box-shadow:0 2px 3px rgba(0,0,0,.22) !important;
  transform:skewX(-24deg) !important;
  transform-origin:left bottom !important;
  opacity:.92 !important;
  pointer-events:none !important;
}

/* sichtbarer Seitenblock an der rechten Kante */
.hero-hardcover-live-face::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:5 !important;
  top:5px !important;
  right:-9px !important;
  bottom:6px !important;
  width:9px !important;
  border-right:1px solid rgba(59,43,31,.92) !important;
  border-radius:0 3px 3px 0 !important;
  background:
    repeating-linear-gradient(
      0deg,
      #c7b99f 0px,
      #c7b99f 1px,
      #887b68 1px,
      #887b68 2px,
      #b1a38c 2px,
      #b1a38c 4px
    ) !important;
  box-shadow:
    inset 2px 0 3px rgba(255,245,220,.16),
    3px 2px 5px rgba(0,0,0,.24) !important;
  transform:skewY(-1.8deg) !important;
  transform-origin:left center !important;
  opacity:.78 !important;
  pointer-events:none !important;
}

/* Cover bleibt unverändert – nur eine feine Deckelkante */
.hero-hardcover-live-cover{
  position:relative !important;
  z-index:4 !important;
  border-radius:0 2px 2px 0 !important;
  box-shadow:
    inset -1px 0 rgba(255,255,255,.08),
    inset 0 -1px rgba(0,0,0,.20) !important;
}

@media(max-width:1180px){
  .hero-hardcover-live-spine{flex-basis:25px !important;width:25px !important;min-width:25px !important}
  .hero-hardcover-live-face::after{right:-7px !important;width:7px !important}
}
@media(max-width:800px){
  .hero-hardcover-live-spine{flex-basis:22px !important;width:22px !important;min-width:22px !important}
  .hero-hardcover-book{transform:translateX(-50%) rotate(-.35deg) rotateY(-2deg) !important}
  .hero-hardcover-live-face::before{top:-4px !important;height:4px !important}
  .hero-hardcover-live-face::after{right:-6px !important;width:6px !important}
}

/* STEP 8W – user-supplied hardcover frame as real overlay; live cover behind transparent opening */
.hero-cover-wrap:has(.hardcover-preview){
  overflow:visible !important;
}
.hero-cover.hardcover-preview{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1448 / 1086 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
.hero-cover.hardcover-preview::before,
.hero-cover.hardcover-preview::after,
.hero-cover-wrap:has(.hardcover-preview)::before,
.hero-cover-wrap:has(.hardcover-preview)::after{
  display:none !important;
  content:none !important;
}

.hero-frame-stage{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:1448 / 1086 !important;
  overflow:visible !important;
  background:transparent !important;
}
.hero-frame-scaler{
  --frame-scale-x:1;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  transform:scaleX(var(--frame-scale-x)) !important;
  transform-origin:100% 50% !important;
  overflow:visible !important;
  background:transparent !important;
}
.hero-frame-live-cover{
  position:absolute !important;
  z-index:1 !important;
  left:37.707182% !important;
  top:11.602210% !important;
  width:31.353591% !important;
  height:68.139963% !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:fill !important;
  object-position:center !important;
  background:#090909 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
.hero-frame-overlay{
  position:absolute !important;
  z-index:2 !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:fill !important;
  border:0 !important;
  background:transparent !important;
  pointer-events:none !important;
  filter:drop-shadow(0 15px 13px rgba(0,0,0,.20)) !important;
}

/* Retire all previous generated hardcover pieces. */
.hero-hardcover-stage,
.hero-hardcover-cloth-back,
.hero-hardcover-cloth-front,
.hero-hardcover-book,
.hero-hardcover-live-spine,
.hero-hardcover-live-face,
.hero-hardcover-live-cover,
.hero-hardcover-cover-backdrop,
.hero-hardcover-frame{
  display:none !important;
}

@media(max-width:1180px){
  .hero-frame-stage{width:100% !important}
}
@media(max-width:800px){
  .hero-frame-scaler{transform-origin:50% 50% !important}
}

/* STEP 8X – restore larger stage + subtle edge blend so live cover sits naturally in user frame */
.hero-cover.hardcover-preview{
  transform:scale(1.15) !important;
  transform-origin:right bottom !important;
}

/* Fine edge vignette over the live cover opening; the supplied frame stays untouched above it. */
.hero-frame-scaler::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:37.707182% !important;
  top:11.602210% !important;
  width:31.353591% !important;
  height:68.139963% !important;
  pointer-events:none !important;
  border-radius:1px !important;
  background:
    linear-gradient(90deg,rgba(20,12,8,.34),transparent 4.5%,transparent 95.5%,rgba(20,12,8,.30)),
    linear-gradient(180deg,rgba(20,12,8,.30),transparent 4%,transparent 96%,rgba(20,12,8,.36)) !important;
  box-shadow:
    inset 0 0 10px rgba(18,10,7,.34),
    inset 0 0 3px rgba(201,165,106,.12) !important;
}

.hero-frame-live-cover{
  filter:brightness(.975) contrast(1.015) saturate(.985) !important;
}
.hero-frame-overlay{
  z-index:3 !important;
}

@media(max-width:1180px){
  .hero-cover.hardcover-preview{
    transform:scale(1.11) !important;
    transform-origin:right bottom !important;
  }
}
@media(max-width:800px){
  .hero-cover.hardcover-preview{
    transform:none !important;
  }
}


/* STEP 8Y – ALIENS is the fixed reference cover format for every comic */
.hero-frame-scaler{
  --frame-scale-x:1 !important;
  transform:none !important;
}
.hero-frame-live-cover{
  /* Fixed ALIENS opening: 454 x 740. Preserve source proportions; never stretch. */
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
}

/* STEP 8Z – very subtle soft fade at live-cover edges */
.hero-frame-scaler::after{
  left:37.707182% !important;
  top:11.602210% !important;
  width:31.353591% !important;
  height:68.139963% !important;
  border-radius:1px !important;
  background:
    linear-gradient(90deg,
      rgba(18,10,7,.20) 0%,
      rgba(18,10,7,.08) 1.2%,
      transparent 2.1%,
      transparent 97.9%,
      rgba(18,10,7,.08) 98.8%,
      rgba(18,10,7,.20) 100%),
    linear-gradient(180deg,
      rgba(18,10,7,.18) 0%,
      rgba(18,10,7,.07) 1.1%,
      transparent 2%,
      transparent 98%,
      rgba(18,10,7,.08) 98.9%,
      rgba(18,10,7,.22) 100%) !important;
  box-shadow:
    inset 0 0 5px rgba(16,9,6,.20),
    inset 0 0 2px rgba(201,165,106,.08) !important;
}

/* STEP 8AA – live cover follows the perspective of the supplied hardcover opening */
.hero-frame-live-cover{
  /* The frame opening drops slightly toward the right. Give the artwork the same plane,
     so horizontal cover typography no longer looks pasted onto a tilted book. */
  transform-origin:left center !important;
  transform:perspective(1200px) rotateY(-1.15deg) skewY(4.15deg) scale(1.018,1.008) !important;
  backface-visibility:hidden !important;
  will-change:transform !important;
}

/* Keep enough artwork beneath the frame lip so the perspective never exposes a seam. */
.hero-frame-live-cover{
  left:37.45% !important;
  top:10.92% !important;
  width:31.72% !important;
  height:69.05% !important;
}

/* The soft edge blend must stay on the frame opening, not inherit the cover tilt. */
.hero-frame-scaler::after{
  left:37.707182% !important;
  top:11.602210% !important;
  width:31.353591% !important;
  height:68.139963% !important;
}

@media(max-width:800px){
  .hero-frame-live-cover{
    transform:perspective(1000px) rotateY(-.8deg) skewY(3.7deg) scale(1.016,1.006) !important;
  }
}

/* STEP 8AB – top cloth aligned with TAMAMLANDI + richer editorial overview */

/* 1. Lift the complete supplied book/cloth stage so the upper cloth reaches the TAMAMLANDI level. */
.hero-cover.hardcover-preview{
  transform:translateY(-34px) scale(1.15) !important;
  transform-origin:right bottom !important;
}

/* 2. ÖZET / YAYIN BİLGİLERİ: keep headings + ornament, replace simple boxes with editorial panels. */
.detail-overview{
  align-items:stretch !important;
}
.detail-overview .content-section{
  position:relative !important;
  overflow:hidden !important;
  min-height:100% !important;
  padding:30px 32px 32px !important;
  border:1px solid rgba(201,165,106,.15) !important;
  border-radius:4px !important;
  background:
    radial-gradient(circle at 10% 0%,rgba(185,31,36,.075),transparent 34%),
    linear-gradient(145deg,rgba(21,20,20,.78),rgba(10,11,13,.86) 58%,rgba(8,9,11,.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 42px rgba(0,0,0,.20),
    0 18px 40px rgba(0,0,0,.16) !important;
  transform:none !important;
}
.detail-overview .content-section:hover{
  transform:none !important;
  border-color:rgba(201,165,106,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 42px rgba(0,0,0,.20),
    0 18px 40px rgba(0,0,0,.18) !important;
}
.detail-overview .content-section::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent 0%,rgba(217,54,59,.72) 17%,rgba(201,165,106,.50) 48%,rgba(201,165,106,.08) 82%,transparent 100%) !important;
  opacity:1 !important;
  pointer-events:none !important;
}
.detail-overview .content-section::after{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  width:190px !important;
  height:190px !important;
  right:-90px !important;
  bottom:-105px !important;
  border:1px solid rgba(201,165,106,.055) !important;
  border-radius:50% !important;
  box-shadow:0 0 0 24px rgba(201,165,106,.018),0 0 0 50px rgba(185,31,36,.012) !important;
  pointer-events:none !important;
}
.detail-overview .section-heading,
.detail-overview .lead-text,
.detail-overview .fact-grid{
  position:relative !important;
  z-index:1 !important;
}
.detail-overview .section-heading{
  margin-bottom:24px !important;
}

/* ÖZET: calm reading surface with a refined book-like left accent. */
.overview-summary .lead-text{
  max-width:none !important;
  margin:0 !important;
  padding:20px 24px 20px 28px !important;
  border-left:2px solid rgba(217,54,59,.52) !important;
  background:linear-gradient(90deg,rgba(185,31,36,.055),rgba(255,255,255,.010) 38%,transparent 82%) !important;
  color:#c8c4bd !important;
  text-shadow:0 1px 0 rgba(0,0,0,.28) !important;
}

/* YAYIN BİLGİLERİ: no individual boxes; clean premium rows in two columns. */
.overview-facts{
  padding-left:32px !important;
  border-left:1px solid rgba(201,165,106,.18) !important;
}
.overview-facts .fact-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 28px !important;
  padding:4px 4px 0 !important;
  border:0 !important;
}
.overview-facts .fact-grid>div{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(92px,.72fr) minmax(0,1fr) !important;
  align-items:center !important;
  gap:16px !important;
  min-height:54px !important;
  padding:11px 8px 11px 18px !important;
  border:0 !important;
  border-bottom:1px solid rgba(201,165,106,.105) !important;
  background:transparent !important;
}
.overview-facts .fact-grid>div::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:5px !important;
  height:18px !important;
  border-radius:1px !important;
  background:linear-gradient(180deg,rgba(217,54,59,.78),rgba(201,165,106,.42)) !important;
  box-shadow:0 0 10px rgba(185,31,36,.16) !important;
  transform:translateY(-50%) !important;
}
.overview-facts .fact-grid span{
  color:#928777 !important;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
}
.overview-facts .fact-grid strong{
  color:#ebe5dc !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  text-align:left !important;
}

@media(max-width:1350px){
  .hero-cover.hardcover-preview{
    transform:translateY(-24px) scale(1.11) !important;
    transform-origin:right bottom !important;
  }
  .detail-overview .content-section{padding:26px 26px 28px !important}
  .overview-facts{padding-left:26px !important}
}
@media(max-width:980px){
  .overview-facts{
    padding-left:26px !important;
    border-left:0 !important;
  }
}
@media(max-width:800px){
  .hero-cover.hardcover-preview{transform:none !important}
  .detail-overview .content-section{padding:24px 20px 26px !important}
  .overview-facts{padding-left:20px !important}
  .overview-facts .fact-grid{grid-template-columns:1fr !important}
}


/* STEP 8AC – split country/language in YAYIN BİLGİLERİ + hero label GÖRSEL UYARLAMA */
.credit-strip-item.credit-editor > span{font-size:8px !important;letter-spacing:.08em !important;white-space:nowrap !important;}
@media(max-width:1180px){.credit-strip-item.credit-editor > span{white-space:normal !important;}}

/* Long translator/editor names stay readable without splitting individual names. */
@media(min-width:981px){
  .credit-strip-item.credit-translator,
  .credit-strip-item.credit-editor{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .credit-strip-item.credit-translator strong,
  .credit-strip-item.credit-editor strong{
    font-size:clamp(10px,.72vw,13px) !important;
    line-height:1.35 !important;
    letter-spacing:-.015em !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }
  .credit-strip-item.credit-translator .people-links a,
  .credit-strip-item.credit-editor .people-links a{
    white-space:nowrap !important;
  }
}

/* STEP 8AD – steiniger Seitenhintergrund unterhalb des Hero, weich bis SERİ auslaufend */
.page-layout{
  position:relative !important;
  isolation:isolate !important;
  background:linear-gradient(180deg,rgba(9,10,12,.42),rgba(9,10,12,.84) 48%,#090a0c 100%) !important;
}
.page-layout::after{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  left:50%;
  width:100vw;
  height:760px;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(9,10,12,.20) 0%,rgba(9,10,12,.04) 20%,rgba(9,10,12,.04) 80%,rgba(9,10,12,.20) 100%),
    linear-gradient(180deg,rgba(7,8,10,.10) 0%,rgba(7,8,10,.16) 45%,rgba(9,10,12,.94) 100%),
    url("assets/comic-detail-bg.png") center top / cover no-repeat;
  opacity:.58;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.36) 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.36) 82%,transparent 100%);
}
.page-layout > *{
  position:relative;
  z-index:1;
}
@media(max-width:980px){
  .page-layout::after{
    height:900px;
    opacity:.48;
    background-position:center top;
  }
}


/* STEP 8AF – separate user-supplied cloth from the book; restore the proven 8AA book geometry */
.hero-frame-stage{
  isolation:isolate !important;
  background:
    url("assets/hero-cloth-new.png") center center / 100% 100% no-repeat !important;
}

/* Book/cover stay above the rear cloth. */
.hero-frame-live-cover{z-index:2 !important;}
.hero-frame-overlay{z-index:3 !important;}
.hero-frame-scaler::after{z-index:2 !important;}

/* Re-use the same cloth only at the very bottom as a foreground fold.
   This makes the book appear planted in the fabric rather than pasted over it. */
.hero-frame-stage::after{
  content:"" !important;
  position:absolute !important;
  z-index:4 !important;
  inset:0 !important;
  display:block !important;
  pointer-events:none !important;
  background:url("assets/hero-cloth-new.png") center center / 100% 100% no-repeat !important;
  clip-path:inset(75% 0 0 0) !important;
  filter:drop-shadow(0 -2px 4px rgba(0,0,0,.12)) !important;
}

/* The supplied cloth already has its own silhouette and transparent outer area. */
.hero-frame-stage::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:0 !important;
  pointer-events:none !important;
  background:radial-gradient(ellipse at 46% 76%,rgba(0,0,0,.22),transparent 48%) !important;
}

/* Keep the current approved size/position and cover perspective. */
.hero-cover.hardcover-preview{
  transform:translateY(-34px) scale(1.15) !important;
  transform-origin:right bottom !important;
}

@media(max-width:1180px){
  .hero-frame-stage::after{clip-path:inset(76% 0 0 0) !important;}
}
@media(max-width:800px){
  .hero-frame-stage::after{clip-path:inset(78% 0 0 0) !important;}
  .hero-cover.hardcover-preview{transform:none !important;}
}

/* STEP 8AG – clean rebuild of the hardcover presentation. No legacy frame geometry is used here. */
.hero-cover-wrap:has(.hardcover-preview){
  width:610px !important;
  max-width:610px !important;
  min-width:610px !important;
  margin-left:-145px !important;
  margin-top:72px !important;
  padding:0 !important;
  overflow:visible !important;
  align-self:end !important;
  perspective:none !important;
}
.hero-cover.hardcover-preview{
  position:relative !important;
  display:block !important;
  width:610px !important;
  max-width:610px !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:4 / 3 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:translateY(-34px) scale(1.15) !important;
  transform-origin:right bottom !important;
}
.hero-cover.hardcover-preview::before,
.hero-cover.hardcover-preview::after,
.hero-cover-wrap:has(.hardcover-preview)::before,
.hero-cover-wrap:has(.hardcover-preview)::after{
  display:none !important;
  content:none !important;
}

.hero-book-stage-v2{
  --book-spine-color:#39251f;
  position:relative !important;
  display:block !important;
  width:610px !important;
  height:457.5px !important;
  isolation:isolate !important;
  overflow:visible !important;
  background:transparent !important;
}
.hero-book-cloth-v2{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  pointer-events:none !important;
}
.hero-book-cloth-back-v2{
  z-index:1 !important;
  filter:brightness(.82) saturate(.91) contrast(1.04) !important;
}

.hero-book-object-v2{
  position:absolute !important;
  z-index:2 !important;
  left:139px !important;
  top:-2px !important;
  width:337px !important;
  height:449px !important;
  filter:drop-shadow(12px 19px 16px rgba(0,0,0,.42)) drop-shadow(-3px 8px 8px rgba(0,0,0,.18)) !important;
}
.hero-book-base-v2{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:1086px !important;
  height:1448px !important;
  transform:scale(.31) !important;
  transform-origin:0 0 !important;
  overflow:visible !important;
}

/* ALIENS remains the normalization ratio. It is then mapped exactly into the four corners of the book front. */
.hero-book-cover-v2,
.hero-book-cover-fade-v2{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:454px !important;
  height:740px !important;
  transform-origin:0 0 !important;
  transform:matrix3d(
    1.72808036,-.371605028,0,.000161617818,
    .0434883254,1.54049243,0,.0000591481513,
    0,0,1,0,
    306,290,0,1
  ) !important;
  backface-visibility:hidden !important;
}
.hero-book-cover-v2{
  z-index:2 !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:0 !important;
  background:#080808 !important;
  filter:brightness(.985) contrast(1.015) saturate(.985) !important;
}
.hero-book-cover-fade-v2{
  z-index:3 !important;
  display:block !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(20,12,8,.24),transparent 2.6%,transparent 97.4%,rgba(20,12,8,.24)),
    linear-gradient(180deg,rgba(20,12,8,.20),transparent 2.3%,transparent 97.5%,rgba(20,12,8,.26)) !important;
  box-shadow:inset 0 0 8px rgba(10,6,4,.20) !important;
}
.hero-book-template-v2{
  position:absolute !important;
  z-index:4 !important;
  inset:0 !important;
  width:1086px !important;
  height:1448px !important;
  display:block !important;
  object-fit:contain !important;
  pointer-events:none !important;
}
.hero-book-spine-tint-v2{
  position:absolute !important;
  z-index:5 !important;
  inset:0 !important;
  display:block !important;
  pointer-events:none !important;
  background:var(--book-spine-color) !important;
  opacity:.48 !important;
  mix-blend-mode:color !important;
  clip-path:polygon(8.7% 12.1%,28.2% 20.0%,29.8% 94.6%,9.8% 96.7%) !important;
}

/* The lower folds are the only foreground cloth layer; a soft mask prevents any hard horizontal cut. */
.hero-book-cloth-front-v2{
  z-index:6 !important;
  filter:brightness(.88) saturate(.94) contrast(1.035) drop-shadow(0 -2px 4px rgba(0,0,0,.12)) !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 69%,rgba(0,0,0,.16) 73%,rgba(0,0,0,.72) 80%,#000 86%,#000 100%) !important;
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 69%,rgba(0,0,0,.16) 73%,rgba(0,0,0,.72) 80%,#000 86%,#000 100%) !important;
}

/* Permanently retire the accumulated legacy book pieces. */
.hero-frame-stage,
.hero-frame-scaler,
.hero-frame-live-cover,
.hero-frame-overlay,
.hero-hardcover-stage,
.hero-hardcover-cloth-back,
.hero-hardcover-cloth-front,
.hero-hardcover-book,
.hero-hardcover-live-spine,
.hero-hardcover-live-face,
.hero-hardcover-live-cover,
.hero-hardcover-cover-backdrop,
.hero-hardcover-frame{
  display:none !important;
}

@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:520px !important;
    max-width:520px !important;
    min-width:520px !important;
    margin-left:-94px !important;
    margin-top:46px !important;
  }
  .hero-cover.hardcover-preview{
    width:520px !important;
    max-width:520px !important;
    transform:translateY(-24px) scale(1.10) !important;
  }
  .hero-book-stage-v2{width:520px !important;height:390px !important}
  .hero-book-object-v2{left:119px !important;top:-2px !important;width:287px !important;height:382px !important}
  .hero-book-base-v2{transform:scale(.264) !important}
}
@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:100% !important;
    max-width:380px !important;
    min-width:0 !important;
    margin:22px auto 0 !important;
  }
  .hero-cover.hardcover-preview{
    width:100% !important;
    max-width:380px !important;
    transform:none !important;
  }
  .hero-book-stage-v2{width:360px !important;height:270px !important;margin:0 auto !important}
  .hero-book-object-v2{left:83px !important;top:-1px !important;width:199px !important;height:265px !important}
  .hero-book-base-v2{transform:scale(.183) !important}
}

/* STEP 8AH – slightly more frontal book + matte cover integration (no glossy fade) */
.hero-book-object-v2{
  transform:perspective(2200px) rotateY(-1.8deg) rotateZ(.10deg) !important;
  transform-origin:52% 100% !important;
}

.hero-book-cover-v2{
  filter:brightness(.955) contrast(1.04) saturate(.92) !important;
}

/* Retire the translucent/gradient fade that read like glass. Keep only a dry, matte edge seat. */
.hero-book-cover-fade-v2{
  display:block !important;
  background:rgba(8,5,4,.035) !important;
  box-shadow:
    inset 0 0 16px rgba(5,3,2,.58),
    inset 0 0 3px rgba(0,0,0,.72) !important;
  mix-blend-mode:multiply !important;
  opacity:.72 !important;
  filter:none !important;
}

@media(max-width:1180px){
  .hero-book-object-v2{
    transform:perspective(2200px) rotateY(-1.4deg) rotateZ(.08deg) !important;
  }
}
@media(max-width:800px){
  .hero-book-object-v2{transform:none !important;}
}

/* STEP 8AI – cloth removed so the book position can be optimized cleanly */
.hero-book-cloth-v2,
.hero-book-cloth-back-v2,
.hero-book-cloth-front-v2,
.hero-frame-stage,
.hero-frame-overlay,
.hero-frame-scaler,
.hero-frame-live-cover{
  display:none !important;
}

.hero-book-stage-v2{
  background:transparent !important;
}

/* Use the left hero area as a clean positioning stage without fabric noise. */
.hero-cover-wrap:has(.hardcover-preview){
  width:610px !important;
  max-width:610px !important;
  min-width:610px !important;
  margin-left:-118px !important;
  margin-top:40px !important;
  align-self:end !important;
}

.hero-cover.hardcover-preview{
  width:610px !important;
  max-width:610px !important;
  transform:none !important;
}

.hero-book-stage-v2::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  left:126px !important;
  bottom:12px !important;
  width:278px !important;
  height:48px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.46) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,0) 76%) !important;
  pointer-events:none !important;
}

/* Neutral baseline position: a little larger, a little more left, almost frontal. */
.hero-book-object-v2{
  left:114px !important;
  top:-4px !important;
  width:358px !important;
  height:477px !important;
  filter:drop-shadow(10px 18px 16px rgba(0,0,0,.34)) drop-shadow(-2px 7px 7px rgba(0,0,0,.14)) !important;
  transform:perspective(2400px) rotateY(-1.15deg) rotateZ(.04deg) !important;
  transform-origin:52% 100% !important;
}

/* Keep the cover seated dry inside the frame, no glossy/glass feeling. */
.hero-book-cover-v2{
  filter:brightness(.965) contrast(1.035) saturate(.94) !important;
}
.hero-book-cover-fade-v2{
  background:rgba(8,5,4,.03) !important;
  box-shadow:inset 0 0 12px rgba(5,3,2,.46), inset 0 0 2px rgba(0,0,0,.58) !important;
  mix-blend-mode:multiply !important;
  opacity:.66 !important;
}

@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:520px !important;
    max-width:520px !important;
    min-width:520px !important;
    margin-left:-82px !important;
    margin-top:28px !important;
  }
  .hero-cover.hardcover-preview{width:520px !important;max-width:520px !important;}
  .hero-book-stage-v2{width:520px !important;height:390px !important;}
  .hero-book-stage-v2::after{left:107px !important;bottom:10px !important;width:236px !important;height:40px !important;}
  .hero-book-object-v2{
    left:97px !important;
    top:-4px !important;
    width:304px !important;
    height:405px !important;
    transform:perspective(2400px) rotateY(-.95deg) rotateZ(.03deg) !important;
  }
}

@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:100% !important;
    max-width:380px !important;
    min-width:0 !important;
    margin:18px auto 0 !important;
  }
  .hero-cover.hardcover-preview{width:100% !important;max-width:380px !important;}
  .hero-book-stage-v2{width:360px !important;height:270px !important;margin:0 auto !important;}
  .hero-book-stage-v2::after{left:75px !important;bottom:6px !important;width:164px !important;height:28px !important;}
  .hero-book-object-v2{
    left:68px !important;
    top:-3px !important;
    width:212px !important;
    height:282px !important;
    transform:none !important;
  }
}

/* STEP 8AJ – book much more frontal, cover reaches the outer front edges, top rises toward TAMAMLANDI, spine title enabled where a title attribute exists */

/* clean stage remains without cloth while the book position is tuned */
.hero-book-cloth-v2,
.hero-book-cloth-back-v2,
.hero-book-cloth-front-v2,
.hero-frame-stage,
.hero-frame-overlay,
.hero-frame-scaler,
.hero-frame-live-cover{
  display:none !important;
}

.hero-cover-wrap:has(.hardcover-preview){
  width:620px !important;
  max-width:620px !important;
  min-width:620px !important;
  margin-left:-118px !important;
  margin-top:40px !important;
  align-self:end !important;
}

.hero-cover.hardcover-preview{
  width:620px !important;
  max-width:620px !important;
  transform:none !important;
}

.hero-book-stage-v2{
  background:transparent !important;
}

.hero-book-stage-v2::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  left:124px !important;
  bottom:10px !important;
  width:286px !important;
  height:50px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.44) 0%, rgba(0,0,0,.23) 46%, rgba(0,0,0,0) 77%) !important;
  pointer-events:none !important;
}

/* bigger and higher, but with the bottom visually staying seated on the stone line */
.hero-book-object-v2{
  left:96px !important;
  top:-72px !important;
  width:404px !important;
  height:538px !important;
  filter:drop-shadow(8px 18px 16px rgba(0,0,0,.32)) drop-shadow(-2px 7px 8px rgba(0,0,0,.13)) !important;
  transform:perspective(2600px) rotateY(-0.34deg) rotateZ(.015deg) !important;
  transform-origin:52% 100% !important;
}

/* front cover must start from the real visible cover edges and feel less inset */
.hero-book-cover-v2,
.hero-book-cover-fade-v2{
  width:492px !important;
  height:806px !important;
  transform-origin:0 0 !important;
  transform:matrix3d(
    1.785,-0.245,0,.00012,
    0.016,1.596,0,.00004,
    0,0,1,0,
    286,270,0,1
  ) !important;
}

.hero-book-cover-v2{
  object-fit:cover !important;
  object-position:center center !important;
  background:#080808 !important;
  filter:brightness(.972) contrast(1.03) saturate(.95) !important;
}

/* very light seat only, no mirror / no glass look */
.hero-book-cover-fade-v2{
  display:block !important;
  background:rgba(8,5,4,.018) !important;
  box-shadow:
    inset 0 0 10px rgba(6,4,3,.36),
    inset 0 0 2px rgba(0,0,0,.48) !important;
  mix-blend-mode:multiply !important;
  opacity:.54 !important;
  filter:none !important;
}

/* darker aged outer edge */
.hero-book-spine-tint-v2{
  opacity:.58 !important;
  clip-path:polygon(8.0% 11.4%,28.4% 19.2%,29.8% 95.0%,8.9% 97.0%) !important;
}

/* If the live element carries a title attribute, render a subtle vertical spine title. */
.hero-book-object-v2::before{
  content:"";
  position:absolute !important;
  z-index:7 !important;
  left:17px !important;
  top:52px !important;
  bottom:42px !important;
  width:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  transform:rotate(180deg) !important;
  color:rgba(214,176,116,.92) !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
  pointer-events:none !important;
  overflow:hidden !important;
}
.hero-book-object-v2[data-title]::before{content:attr(data-title) !important;}
.hero-book-object-v2[data-comic-title]::before{content:attr(data-comic-title) !important;}
.hero-book-object-v2[aria-label]::before{content:attr(aria-label) !important;}

@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:540px !important;
    max-width:540px !important;
    min-width:540px !important;
    margin-left:-80px !important;
    margin-top:30px !important;
  }
  .hero-cover.hardcover-preview{width:540px !important;max-width:540px !important;}
  .hero-book-stage-v2{width:540px !important;height:405px !important;}
  .hero-book-stage-v2::after{left:108px !important;bottom:10px !important;width:246px !important;height:42px !important;}
  .hero-book-object-v2{
    left:84px !important;
    top:-60px !important;
    width:332px !important;
    height:442px !important;
    transform:perspective(2600px) rotateY(-0.26deg) rotateZ(.015deg) !important;
  }
  .hero-book-object-v2::before{
    left:14px !important;
    top:44px !important;
    bottom:34px !important;
    width:19px !important;
    font-size:10px !important;
  }
}

@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:100% !important;
    max-width:390px !important;
    min-width:0 !important;
    margin:18px auto 0 !important;
  }
  .hero-cover.hardcover-preview{width:100% !important;max-width:390px !important;}
  .hero-book-stage-v2{width:372px !important;height:279px !important;margin:0 auto !important;}
  .hero-book-stage-v2::after{left:74px !important;bottom:6px !important;width:170px !important;height:29px !important;}
  .hero-book-object-v2{
    left:58px !important;
    top:-40px !important;
    width:228px !important;
    height:304px !important;
    transform:none !important;
  }
  .hero-book-object-v2::before{
    left:10px !important;
    top:31px !important;
    bottom:26px !important;
    width:14px !important;
    font-size:7px !important;
    letter-spacing:.7px !important;
  }
}

/* STEP 8AK – correct the actual geometry instead of stretching the cover independently */
.hero-book-cloth-v2,
.hero-book-cloth-back-v2,
.hero-book-cloth-front-v2{
  display:none !important;
}

.hero-cover-wrap:has(.hardcover-preview){
  width:610px !important;
  max-width:610px !important;
  min-width:610px !important;
  margin-left:-118px !important;
  margin-top:40px !important;
  align-self:end !important;
}
.hero-cover.hardcover-preview{
  width:610px !important;
  max-width:610px !important;
  transform:none !important;
}
.hero-book-stage-v2{
  width:610px !important;
  height:457.5px !important;
  background:transparent !important;
  overflow:visible !important;
}

/* Bottom edge stays fixed. Scaling now happens through the actual 1086x1448 book base. */
.hero-book-object-v2{
  left:96px !important;
  right:auto !important;
  top:auto !important;
  bottom:0 !important;
  width:391px !important;
  height:521px !important;
  transform:none !important;
  transform-origin:center bottom !important;
  filter:drop-shadow(8px 17px 15px rgba(0,0,0,.34)) drop-shadow(-2px 7px 7px rgba(0,0,0,.13)) !important;
}
.hero-book-base-v2{
  width:1086px !important;
  height:1448px !important;
  transform:scale(.36) !important;
  transform-origin:0 0 !important;
}

/* Exact four-corner mapping to the newly corrected front plane. No overshoot. */
.hero-book-cover-v2{
  z-index:3 !important;
  left:0 !important;
  top:0 !important;
  width:454px !important;
  height:740px !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform-origin:0 0 !important;
  transform:matrix3d(
    1.69495074,-.17937036,0,.00012164,
    .02771720,1.50056220,0,.00004877,
    0,0,1,0,
    331.23868,224.09540,0,1
  ) !important;
  filter:brightness(.972) contrast(1.025) saturate(.96) !important;
  background:#080808 !important;
}

/* No glossy/fade layer while geometry is being finalized. */
.hero-book-cover-fade-v2{display:none !important;}

/* New template is already darker and more frontal; keep it above the live cover. */
.hero-book-template-v2{
  z-index:4 !important;
  width:1086px !important;
  height:1448px !important;
}
.hero-book-spine-tint-v2{display:none !important;}

/* Real dynamic comic title on the spine. */
.hero-book-object-v2::before{
  content:attr(data-title) !important;
  position:absolute !important;
  z-index:8 !important;
  left:31px !important;
  top:112px !important;
  height:300px !important;
  width:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  transform:rotate(180deg) !important;
  overflow:hidden !important;
  color:rgba(207,166,104,.91) !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:1.1px !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  pointer-events:none !important;
}

/* simple grounding shadow only */
.hero-book-stage-v2::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  left:121px !important;
  bottom:-2px !important;
  width:302px !important;
  height:50px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.42) 0%,rgba(0,0,0,.22) 48%,transparent 78%) !important;
  pointer-events:none !important;
}

@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){width:520px !important;max-width:520px !important;min-width:520px !important;margin-left:-82px !important;margin-top:30px !important;}
  .hero-cover.hardcover-preview{width:520px !important;max-width:520px !important;}
  .hero-book-stage-v2{width:520px !important;height:390px !important;}
  .hero-book-object-v2{left:82px !important;bottom:0 !important;width:333px !important;height:444px !important;}
  .hero-book-base-v2{transform:scale(.307) !important;}
  .hero-book-object-v2::before{left:26px !important;top:95px !important;height:256px !important;width:21px !important;font-size:8.5px !important;}
  .hero-book-stage-v2::after{left:103px !important;bottom:-2px !important;width:258px !important;height:43px !important;}
}
@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){width:100% !important;max-width:390px !important;min-width:0 !important;margin:18px auto 0 !important;}
  .hero-cover.hardcover-preview{width:100% !important;max-width:390px !important;}
  .hero-book-stage-v2{width:372px !important;height:279px !important;margin:0 auto !important;}
  .hero-book-object-v2{left:58px !important;bottom:0 !important;width:239px !important;height:319px !important;}
  .hero-book-base-v2{transform:scale(.22) !important;}
  .hero-book-object-v2::before{left:19px !important;top:69px !important;height:183px !important;width:15px !important;font-size:6px !important;letter-spacing:.7px !important;}
  .hero-book-stage-v2::after{left:74px !important;bottom:-1px !important;width:185px !important;height:31px !important;}
}

/* STEP 8AL – final master-book baseline: perspective is baked into the template itself */

/* No fabric while book geometry is being approved. */
.hero-book-cloth-v2,
.hero-book-cloth-back-v2,
.hero-book-cloth-front-v2{
  display:none !important;
}

.hero-cover-wrap:has(.hardcover-preview){
  width:610px !important;
  max-width:610px !important;
  min-width:610px !important;
  margin-left:-118px !important;
  margin-top:40px !important;
  align-self:end !important;
  overflow:visible !important;
}
.hero-cover.hardcover-preview{
  width:610px !important;
  max-width:610px !important;
  transform:none !important;
  overflow:visible !important;
}
.hero-book-stage-v2{
  width:610px !important;
  height:457.5px !important;
  background:transparent !important;
  overflow:visible !important;
}

/* Bottom stays visually planted. The larger master grows upward toward TAMAMLANDI. */
.hero-book-object-v2{
  left:70px !important;
  right:auto !important;
  top:auto !important;
  bottom:-53px !important;
  width:462px !important;
  height:616px !important;
  transform:none !important;
  transform-origin:center bottom !important;
  filter:
    drop-shadow(8px 18px 15px rgba(0,0,0,.31))
    drop-shadow(-2px 7px 7px rgba(0,0,0,.12)) !important;
}
.hero-book-base-v2{
  width:1086px !important;
  height:1448px !important;
  transform:scale(.425) !important;
  transform-origin:0 0 !important;
}

/* The live cover fills the complete front opening of the new nearly-frontal master. */
.hero-book-cover-v2{
  z-index:3 !important;
  left:0 !important;
  top:0 !important;
  width:454px !important;
  height:740px !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform-origin:0 0 !important;
  transform:matrix3d(
    1.58674068,-.0415252632,0,.00001444343,
    .0063971888,1.47239827,0,.00000377104,
    0,0,1,0,
    259,195,0,1
  ) !important;
  filter:brightness(.975) contrast(1.025) saturate(.96) !important;
  background:#080808 !important;
  border:0 !important;
  border-radius:0 !important;
}

/* No glass/fade layer. */
.hero-book-cover-fade-v2{
  display:none !important;
}

/* New template already contains the dark aged edge and the flattened book geometry. */
.hero-book-template-v2{
  z-index:4 !important;
  inset:0 !important;
  width:1086px !important;
  height:1448px !important;
  object-fit:contain !important;
  pointer-events:none !important;
}

/* Let the sampled cover colour subtly live on the narrow spine only. */
.hero-book-spine-tint-v2{
  display:block !important;
  position:absolute !important;
  z-index:5 !important;
  inset:0 !important;
  background:var(--book-spine-color,#39251f) !important;
  opacity:.38 !important;
  mix-blend-mode:color !important;
  clip-path:polygon(12.5% 9%,24.8% 13%,24.8% 89.5%,12.8% 92.2%) !important;
  pointer-events:none !important;
}

/* Dynamic comic title on the now narrower spine. */
.hero-book-object-v2::before{
  content:attr(data-title) !important;
  position:absolute !important;
  z-index:8 !important;
  left:73px !important;
  top:92px !important;
  width:20px !important;
  height:382px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  transform:rotate(180deg) !important;
  overflow:hidden !important;
  color:rgba(215,176,115,.92) !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:1px !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 2px rgba(0,0,0,.68) !important;
  pointer-events:none !important;
}

/* Only a dry contact shadow on the stone. */
.hero-book-stage-v2::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  left:121px !important;
  bottom:-3px !important;
  width:330px !important;
  height:48px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.40) 0%,rgba(0,0,0,.20) 50%,transparent 79%) !important;
  pointer-events:none !important;
}

@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:520px !important;max-width:520px !important;min-width:520px !important;
    margin-left:-82px !important;margin-top:30px !important;
  }
  .hero-cover.hardcover-preview{width:520px !important;max-width:520px !important;}
  .hero-book-stage-v2{width:520px !important;height:390px !important;}
  .hero-book-object-v2{left:60px !important;bottom:-45px !important;width:393px !important;height:524px !important;}
  .hero-book-base-v2{transform:scale(.362) !important;}
  .hero-book-object-v2::before{left:62px !important;top:78px !important;width:17px !important;height:325px !important;font-size:8.5px !important;}
  .hero-book-stage-v2::after{left:103px !important;bottom:-3px !important;width:281px !important;height:41px !important;}
}

@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:100% !important;max-width:390px !important;min-width:0 !important;margin:18px auto 0 !important;
  }
  .hero-cover.hardcover-preview{width:100% !important;max-width:390px !important;}
  .hero-book-stage-v2{width:372px !important;height:279px !important;margin:0 auto !important;}
  .hero-book-object-v2{left:43px !important;bottom:-32px !important;width:281px !important;height:375px !important;}
  .hero-book-base-v2{transform:scale(.259) !important;}
  .hero-book-object-v2::before{left:44px !important;top:56px !important;width:13px !important;height:232px !important;font-size:6px !important;letter-spacing:.7px !important;}
  .hero-book-stage-v2::after{left:74px !important;bottom:-2px !important;width:201px !important;height:29px !important;}
}


/* STEP 8AM – cover becomes the actual front face; moderate unified book angle; refined spine typography */

/* Keep fabric out until the book itself is approved. */
.hero-book-cloth-v2,
.hero-book-cloth-back-v2,
.hero-book-cloth-front-v2{
  display:none !important;
}

/* Keep the approved bottom position and overall size from 8AL. */
.hero-cover-wrap:has(.hardcover-preview){
  width:610px !important;
  max-width:610px !important;
  min-width:610px !important;
  margin-left:-118px !important;
  margin-top:40px !important;
  align-self:end !important;
  overflow:visible !important;
}
.hero-cover.hardcover-preview{
  width:610px !important;
  max-width:610px !important;
  transform:none !important;
  overflow:visible !important;
}
.hero-book-stage-v2{
  width:610px !important;
  height:457.5px !important;
  background:transparent !important;
  overflow:visible !important;
}

/* Moderate angle: not flat, not excessively twisted. Entire book + cover rotate together. */
.hero-book-object-v2{
  left:70px !important;
  right:auto !important;
  top:auto !important;
  bottom:-53px !important;
  width:462px !important;
  height:616px !important;
  transform:perspective(2300px) rotateY(-3.8deg) rotateZ(-.18deg) !important;
  transform-style:preserve-3d !important;
  transform-origin:52% 100% !important;
  filter:
    drop-shadow(9px 18px 15px rgba(0,0,0,.31))
    drop-shadow(-3px 7px 7px rgba(0,0,0,.12)) !important;
}
.hero-book-base-v2{
  width:1086px !important;
  height:1448px !important;
  transform:scale(.425) !important;
  transform-origin:0 0 !important;
}

/* The comic artwork IS the hardcover front now. It extends to the outer front edge,
   so there is no visible thick frame around it and no pasted-in inset appearance. */
.hero-book-cover-v2{
  z-index:6 !important;
  left:0 !important;
  top:0 !important;
  width:454px !important;
  height:740px !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform-origin:0 0 !important;
  transform:matrix3d(
    1.70543908,-.033285366,0,-.0000016272745,
    .010232787,1.54759751,0,.000015872283,
    0,0,1,0,
    214,166,0,1
  ) !important;
  background:#080808 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:
    brightness(.978)
    contrast(1.025)
    saturate(.965)
    drop-shadow(0 0 1px rgba(0,0,0,.72)) !important;
  backface-visibility:hidden !important;
}

/* Template remains BELOW the cover: only spine/top/depth are visible outside the front face. */
.hero-book-template-v2{
  z-index:4 !important;
  inset:0 !important;
  width:1086px !important;
  height:1448px !important;
  object-fit:contain !important;
  pointer-events:none !important;
}

/* Never place a translucent layer over the cover. */
.hero-book-cover-fade-v2{display:none !important;}

/* Colour tint stays restricted to the physical spine. */
.hero-book-spine-tint-v2{
  z-index:5 !important;
  opacity:.34 !important;
  clip-path:polygon(12.4% 8.8%,24.9% 12.7%,24.8% 90.2%,12.6% 92.6%) !important;
}

/* Refined spine title: editorial serif instead of tiny machine/typewriter lettering. */
.hero-book-object-v2::before{
  content:attr(data-title) !important;
  position:absolute !important;
  z-index:9 !important;
  left:68px !important;
  top:95px !important;
  width:28px !important;
  height:378px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  transform:rotate(180deg) !important;
  overflow:hidden !important;
  color:rgba(224,191,137,.94) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:2px !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 5px rgba(0,0,0,.30) !important;
  pointer-events:none !important;
}

/* Dry contact shadow only. */
.hero-book-stage-v2::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  left:121px !important;
  bottom:-3px !important;
  width:330px !important;
  height:48px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.39) 0%,rgba(0,0,0,.20) 50%,transparent 79%) !important;
  pointer-events:none !important;
}

@media(max-width:1180px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:520px !important;max-width:520px !important;min-width:520px !important;
    margin-left:-82px !important;margin-top:30px !important;
  }
  .hero-cover.hardcover-preview{width:520px !important;max-width:520px !important;}
  .hero-book-stage-v2{width:520px !important;height:390px !important;}
  .hero-book-object-v2{
    left:60px !important;bottom:-45px !important;width:393px !important;height:524px !important;
    transform:perspective(2300px) rotateY(-3.2deg) rotateZ(-.15deg) !important;
  }
  .hero-book-base-v2{transform:scale(.362) !important;}
  .hero-book-object-v2::before{left:58px !important;top:81px !important;width:24px !important;height:322px !important;font-size:11px !important;letter-spacing:1.7px !important;}
  .hero-book-stage-v2::after{left:103px !important;bottom:-3px !important;width:281px !important;height:41px !important;}
}

@media(max-width:800px){
  .hero-cover-wrap:has(.hardcover-preview){
    width:100% !important;max-width:390px !important;min-width:0 !important;margin:18px auto 0 !important;
  }
  .hero-cover.hardcover-preview{width:100% !important;max-width:390px !important;}
  .hero-book-stage-v2{width:372px !important;height:279px !important;margin:0 auto !important;}
  .hero-book-object-v2{
    left:43px !important;bottom:-32px !important;width:281px !important;height:375px !important;
    transform:perspective(1800px) rotateY(-2.3deg) rotateZ(-.10deg) !important;
  }
  .hero-book-base-v2{transform:scale(.259) !important;}
  .hero-book-object-v2::before{left:42px !important;top:58px !important;width:17px !important;height:230px !important;font-size:8px !important;letter-spacing:1.1px !important;}
  .hero-book-stage-v2::after{left:74px !important;bottom:-2px !important;width:201px !important;height:29px !important;}
}

/* STEP 9B – Premium Collector Cover: no book, no cloth, no fake 3D mockup.
   The real comic cover is presented as a slightly angled, aged collector plate with
   restrained depth, rim light and grounded shadow. */
.hero-cover-wrap{
  position:relative !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  min-width:0 !important;
  overflow:visible !important;
}

.hero-cover.hero-cover-showcase{
  position:relative !important;
  width:390px !important;
  max-width:390px !important;
  height:585px !important;
  min-height:585px !important;
  margin:0 0 -2px -26px !important;
  padding:0 !important;
  overflow:visible !important;
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
.hero-cover.hero-cover-showcase::before,
.hero-cover.hero-cover-showcase::after,
.hero-cover-wrap:has(.hero-cover-showcase)::before,
.hero-cover-wrap:has(.hero-cover-showcase)::after{
  display:none !important;
  content:none !important;
}

.hero-showcase-stage{
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
  perspective:1600px !important;
  perspective-origin:48% 44% !important;
}

/* soft red halo, mostly behind the left half of the cover */
.hero-showcase-rimlight{
  position:absolute !important;
  z-index:0 !important;
  left:18px !important;
  top:86px !important;
  width:305px !important;
  height:390px !important;
  border-radius:46% !important;
  background:radial-gradient(ellipse at center,
    rgba(187,18,21,.30) 0%,
    rgba(187,18,21,.16) 34%,
    rgba(112,8,10,.07) 54%,
    transparent 74%) !important;
  filter:blur(34px) !important;
  opacity:.72 !important;
  pointer-events:none !important;
}

/* grounded contact shadow: narrow and dark directly beneath the object */
.hero-showcase-ground{
  position:absolute !important;
  z-index:0 !important;
  left:52px !important;
  bottom:4px !important;
  width:276px !important;
  height:44px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.44) 43%,
    rgba(0,0,0,.12) 66%,
    transparent 80%) !important;
  filter:blur(7px) !important;
  transform:skewX(-8deg) !important;
  pointer-events:none !important;
}

.hero-showcase-object{
  position:absolute !important;
  z-index:2 !important;
  left:45px !important;
  bottom:26px !important;
  width:304px !important;
  margin:0 !important;
  transform-style:preserve-3d !important;
  transform:rotateY(-4.2deg) rotateX(.55deg) rotateZ(-.18deg) !important;
  transform-origin:50% 100% !important;
  filter:drop-shadow(14px 20px 20px rgba(0,0,0,.42)) drop-shadow(-3px 8px 9px rgba(0,0,0,.18)) !important;
}

/* aged dark backing visible only a few pixels around the cover */
.hero-showcase-mount{
  position:absolute !important;
  z-index:0 !important;
  inset:-4px -5px -6px -4px !important;
  border-radius:5px !important;
  background:
    linear-gradient(135deg, rgba(85,64,42,.88), rgba(25,19,15,.98) 26%, rgba(58,43,29,.90) 68%, rgba(13,10,8,.98)) !important;
  border:1px solid rgba(164,127,79,.38) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,170,.035),
    inset 0 0 18px rgba(0,0,0,.48) !important;
}

/* a small tangible thickness on right/bottom, not a book spine */
.hero-showcase-depth{
  position:absolute !important;
  z-index:-1 !important;
  top:7px !important;
  right:-10px !important;
  bottom:-10px !important;
  left:7px !important;
  border-radius:4px !important;
  background:linear-gradient(135deg,#2b2118 0%,#17120e 60%,#080706 100%) !important;
  box-shadow:inset -2px 0 0 rgba(141,105,65,.18), inset 0 -2px 0 rgba(141,105,65,.12) !important;
  transform:translateZ(-9px) !important;
}

.hero-showcase-image{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:3px !important;
  background:#0a0a0b !important;
  box-shadow:none !important;
  filter:saturate(1.025) contrast(1.015) brightness(.985) !important;
}

/* extremely thin matte edge integration – no mirror/fade overlay */
.hero-showcase-edge{
  position:absolute !important;
  z-index:3 !important;
  inset:0 !important;
  border-radius:3px !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(225,198,148,.11),
    inset 0 0 7px rgba(8,6,4,.28),
    inset 0 -2px 3px rgba(0,0,0,.22) !important;
}

/* Disable every previous book/frame presentation if old markup survives in cache. */
.hero-book-stage-v2,
.hero-book-object-v2,
.hero-book-base-v2,
.hero-book-cloth-v2,
.hero-book-cloth-back-v2,
.hero-book-cloth-front-v2,
.hero-book-cover-v2,
.hero-book-cover-fade-v2,
.hero-book-template-v2,
.hero-book-spine-tint-v2,
.hero-frame-stage,
.hero-frame-scaler,
.hero-frame-live-cover,
.hero-frame-overlay,
.hero-hardcover-stage,
.hero-hardcover-book,
.hero-hardcover-cloth-back,
.hero-hardcover-cloth-front,
.hero-hardcover-live-spine,
.hero-hardcover-live-face,
.hero-hardcover-live-cover,
.hero-hardcover-cover-backdrop,
.hero-hardcover-frame{
  display:none !important;
}

@media(max-width:1180px){
  .hero-cover.hero-cover-showcase{
    width:350px !important;
    max-width:350px !important;
    height:535px !important;
    min-height:535px !important;
    margin-left:-12px !important;
  }
  .hero-showcase-object{left:39px !important;bottom:24px !important;width:274px !important;}
  .hero-showcase-rimlight{left:14px !important;top:78px !important;width:276px !important;height:355px !important;}
  .hero-showcase-ground{left:47px !important;width:250px !important;}
}

@media(max-width:800px){
  .hero-cover.hero-cover-showcase{
    width:100% !important;
    max-width:340px !important;
    height:510px !important;
    min-height:510px !important;
    margin:0 auto !important;
  }
  .hero-showcase-object{
    left:50% !important;
    bottom:24px !important;
    width:min(78vw,270px) !important;
    transform:translateX(-50%) rotateY(-2.2deg) rotateX(.3deg) !important;
  }
  .hero-showcase-rimlight{left:50% !important;transform:translateX(-50%) !important;}
  .hero-showcase-ground{left:50% !important;transform:translateX(-50%) !important;width:235px !important;}
}


/* STEP 9C – Cinematic Gallery. A deliberately different direction:
   no book, no collector frame, no mount. The real cover floats as artwork
   inside a cinematic composition built from the same cover itself. */
.hero-cover-wrap{
  position:relative !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  overflow:visible !important;
}
.hero-cover.hero-cover-cinematic{
  position:relative !important;
  width:410px !important;
  max-width:410px !important;
  height:585px !important;
  min-height:585px !important;
  margin:0 0 -2px -35px !important;
  padding:0 !important;
  overflow:visible !important;
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-cover.hero-cover-cinematic::before,
.hero-cover.hero-cover-cinematic::after,
.hero-cover-wrap:has(.hero-cover-cinematic)::before,
.hero-cover-wrap:has(.hero-cover-cinematic)::after{
  display:none !important;
  content:none !important;
}
.hero-cinematic-stage{
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
  isolation:isolate !important;
}
/* Large ghosted fragment from the real cover: atmosphere, not a second poster. */
.hero-cinematic-atmosphere{
  position:absolute !important;
  z-index:0 !important;
  left:95px !important;
  top:30px !important;
  width:330px !important;
  height:470px !important;
  overflow:hidden !important;
  opacity:.17 !important;
  filter:blur(15px) saturate(.78) contrast(1.08) !important;
  transform:scale(1.12) !important;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.82) 22%, rgba(0,0,0,.9) 60%, transparent 100%),linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%) !important;
  -webkit-mask-composite:source-in !important;
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.82) 22%, rgba(0,0,0,.9) 60%, transparent 100%),linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%) !important;
  mask-composite:intersect !important;
  pointer-events:none !important;
}
.hero-cinematic-atmosphere img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transform:scale(1.16) translateX(5%) !important;
}
.hero-cinematic-redwash{
  position:absolute !important;
  z-index:1 !important;
  left:18px !important;
  top:92px !important;
  width:285px !important;
  height:390px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(196,18,22,.30) 0%, rgba(125,8,11,.14) 42%, transparent 74%) !important;
  filter:blur(38px) !important;
  opacity:.82 !important;
  pointer-events:none !important;
}
.hero-cinematic-floor{
  position:absolute !important;
  z-index:1 !important;
  left:58px !important;
  bottom:10px !important;
  width:270px !important;
  height:42px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.74) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,.10) 67%, transparent 82%) !important;
  filter:blur(8px) !important;
  transform:skewX(-6deg) !important;
  pointer-events:none !important;
}
.hero-cinematic-cover{
  position:absolute !important;
  z-index:3 !important;
  left:42px !important;
  bottom:28px !important;
  width:300px !important;
  margin:0 !important;
  padding:0 !important;
  transform:rotate(-.45deg) !important;
  transform-origin:50% 100% !important;
  filter:drop-shadow(0 26px 27px rgba(0,0,0,.48)) drop-shadow(12px 10px 18px rgba(0,0,0,.20)) !important;
}
.hero-cinematic-cover::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:-1px !important;
  background:#0b0b0d !important;
  box-shadow:-5px 0 20px rgba(196,18,22,.24), 0 0 0 1px rgba(255,255,255,.08) !important;
}
.hero-cinematic-cover img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#0a0a0b !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
  filter:saturate(1.045) contrast(1.018) brightness(.99) !important;
}
/* Disable all previous book/showcase layers. */
.hero-showcase-stage,
.hero-showcase-rimlight,
.hero-showcase-ground,
.hero-showcase-object,
.hero-showcase-depth,
.hero-showcase-mount,
.hero-showcase-image,
.hero-showcase-edge,
.hero-book-stage-v2,
.hero-book-object-v2,
.hero-book-base-v2,
.hero-book-cloth-v2,
.hero-book-cover-v2,
.hero-book-cover-fade-v2,
.hero-book-template-v2,
.hero-book-spine-tint-v2,
.hero-hardcover-stage,
.hero-hardcover-book,
.hero-hardcover-frame{
  display:none !important;
}
@media(max-width:1180px){
  .hero-cover.hero-cover-cinematic{width:360px !important;max-width:360px !important;height:535px !important;margin-left:-18px !important;}
  .hero-cinematic-cover{left:40px !important;bottom:26px !important;width:270px !important;}
  .hero-cinematic-atmosphere{left:82px !important;top:32px !important;width:295px !important;height:420px !important;}
  .hero-cinematic-redwash{left:15px !important;top:85px !important;width:260px !important;height:355px !important;}
  .hero-cinematic-floor{left:50px !important;width:240px !important;}
}
@media(max-width:800px){
  .hero-cover.hero-cover-cinematic{width:100% !important;max-width:340px !important;height:510px !important;margin:0 auto !important;}
  .hero-cinematic-cover{left:50% !important;bottom:24px !important;width:min(76vw,270px) !important;transform:translateX(-50%) rotate(-.35deg) !important;}
  .hero-cinematic-atmosphere{left:50% !important;transform:translateX(-50%) scale(1.08) !important;width:min(92vw,315px) !important;}
  .hero-cinematic-redwash{left:50% !important;transform:translateX(-50%) !important;}
  .hero-cinematic-floor{left:50% !important;transform:translateX(-50%) !important;width:235px !important;}
}

/* STEP 9C-FIX1 – restore exact grounding and horizontal placement.
   This patch intentionally changes ONLY the position/contact of the existing 9C cover. */
.hero-cover.hero-cover-cinematic{
  margin:0 0 -2px -18px !important;
}
.hero-cinematic-cover{
  left:55px !important;
  bottom:-2px !important;
  transform:none !important;
}
.hero-cinematic-floor{
  left:65px !important;
  bottom:-7px !important;
}
@media(max-width:1180px){
  .hero-cover.hero-cover-cinematic{margin-left:-8px !important;}
  .hero-cinematic-cover{left:48px !important;bottom:-2px !important;transform:none !important;}
  .hero-cinematic-floor{left:58px !important;bottom:-7px !important;}
}
@media(max-width:800px){
  .hero-cover.hero-cover-cinematic{margin:0 auto -2px !important;}
  .hero-cinematic-cover{left:50% !important;bottom:-2px !important;transform:translateX(-50%) !important;}
  .hero-cinematic-floor{left:50% !important;bottom:-7px !important;transform:translateX(-50%) !important;}
}


/* STEP 9D – editorial exhibition stage.
   9C is discarded. This is a new composition: artwork field + archive rail +
   real cover + physical plinth aligned to the visible stone ridge. */
.hero-cover-wrap{
  position:relative !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  overflow:visible !important;
  perspective:none !important;
}
.hero-cover.hero-cover-editorial{
  position:relative !important;
  width:410px !important;
  max-width:410px !important;
  height:585px !important;
  min-height:585px !important;
  margin:0 0 0 -18px !important;
  padding:0 !important;
  overflow:visible !important;
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
.hero-cover.hero-cover-editorial::before,
.hero-cover.hero-cover-editorial::after,
.hero-cover-wrap:has(.hero-cover-editorial)::before,
.hero-cover-wrap:has(.hero-cover-editorial)::after{
  display:none !important;
  content:none !important;
}
.hero-editorial-stage{
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
  isolation:isolate !important;
}
/* A cropped echo of the real artwork creates atmosphere without becoming a second poster. */
.hero-editorial-artfield{
  position:absolute !important;
  z-index:0 !important;
  left:112px !important;
  top:28px !important;
  width:296px !important;
  height:430px !important;
  overflow:hidden !important;
  opacity:.32 !important;
  filter:grayscale(.28) sepia(.12) brightness(.42) contrast(1.16) saturate(.82) !important;
  transform:translateZ(0) !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 13%,#000 76%,transparent 100%) !important;
  -webkit-mask-composite:source-in !important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 13%,#000 76%,transparent 100%) !important;
  mask-composite:intersect !important;
  pointer-events:none !important;
}
.hero-editorial-artfield::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg,rgba(151,14,18,.24),transparent 30%,rgba(0,0,0,.30) 100%) !important;
  mix-blend-mode:screen !important;
}
.hero-editorial-artfield img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transform:scale(1.42) translate(8%,2%) !important;
}
/* Thin archive rail: deliberate editorial structure, not a frame around the cover. */
.hero-editorial-rail{
  position:absolute !important;
  z-index:1 !important;
  left:41px !important;
  top:82px !important;
  width:2px !important;
  height:350px !important;
  background:linear-gradient(180deg,transparent,rgba(214,40,43,.88) 15%,rgba(201,165,106,.38) 72%,transparent) !important;
  box-shadow:0 0 20px rgba(190,13,13,.24) !important;
  pointer-events:none !important;
}
/* The actual stone-contact point. It sits ~40px above the hero bottom, where the visible stone ridge is. */
.hero-editorial-plinth{
  position:absolute !important;
  z-index:2 !important;
  left:45px !important;
  bottom:38px !important;
  width:322px !important;
  height:11px !important;
  border-top:1px solid rgba(214,195,157,.24) !important;
  border-bottom:1px solid rgba(0,0,0,.74) !important;
  border-radius:2px !important;
  background:linear-gradient(180deg,rgba(72,65,55,.82) 0%,rgba(31,27,23,.96) 38%,rgba(12,10,9,.99) 100%) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.46),0 2px 7px rgba(0,0,0,.55) !important;
  pointer-events:none !important;
}
.hero-editorial-cover{
  position:absolute !important;
  z-index:4 !important;
  left:55px !important;
  bottom:48px !important;
  width:300px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.48)) drop-shadow(-8px 9px 18px rgba(118,9,13,.16)) !important;
}
.hero-editorial-cover::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),inset 0 -18px 28px rgba(0,0,0,.05) !important;
}
.hero-editorial-cover img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:1px !important;
  background:#09090a !important;
  box-shadow:none !important;
  filter:saturate(1.025) contrast(1.015) brightness(.995) !important;
}
.hero-editorial-mark{
  position:absolute !important;
  z-index:3 !important;
  left:18px !important;
  bottom:92px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:9px !important;
  color:rgba(222,222,226,.50) !important;
  writing-mode:vertical-rl !important;
  transform:rotate(180deg) !important;
  pointer-events:none !important;
}
.hero-editorial-mark span{
  font-size:7px !important;
  font-weight:800 !important;
  letter-spacing:.22em !important;
}
.hero-editorial-mark strong{
  color:rgba(201,165,106,.72) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:11px !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
}
/* Remove every previous 9C / 9B visual layer. */
.hero-cinematic-stage,
.hero-cinematic-atmosphere,
.hero-cinematic-redwash,
.hero-cinematic-floor,
.hero-cinematic-cover,
.hero-showcase-stage,
.hero-showcase-rimlight,
.hero-showcase-ground,
.hero-showcase-object,
.hero-showcase-depth,
.hero-showcase-mount,
.hero-showcase-image,
.hero-showcase-edge,
.hero-book-stage-v2,
.hero-book-object-v2,
.hero-book-base-v2,
.hero-book-cloth-v2,
.hero-book-cover-v2,
.hero-book-cover-fade-v2,
.hero-book-template-v2,
.hero-book-spine-tint-v2,
.hero-hardcover-stage,
.hero-hardcover-book,
.hero-hardcover-frame{
  display:none !important;
}
@media(max-width:1180px){
  .hero-cover.hero-cover-editorial{width:360px !important;max-width:360px !important;height:535px !important;margin-left:-8px !important;}
  .hero-editorial-cover{left:48px !important;bottom:45px !important;width:270px !important;}
  .hero-editorial-plinth{left:38px !important;bottom:35px !important;width:290px !important;}
  .hero-editorial-artfield{left:92px !important;top:32px !important;width:268px !important;height:395px !important;}
  .hero-editorial-rail{left:35px !important;top:78px !important;height:320px !important;}
  .hero-editorial-mark{left:11px !important;bottom:84px !important;}
}
@media(max-width:800px){
  .hero-cover.hero-cover-editorial{width:100% !important;max-width:340px !important;height:510px !important;margin:0 auto !important;}
  .hero-editorial-cover{left:50% !important;bottom:43px !important;width:min(76vw,270px) !important;transform:translateX(-50%) !important;}
  .hero-editorial-plinth{left:50% !important;bottom:33px !important;width:min(82vw,292px) !important;transform:translateX(-50%) !important;}
  .hero-editorial-artfield{left:50% !important;top:30px !important;width:min(92vw,300px) !important;transform:translateX(-50%) !important;}
  .hero-editorial-rail,.hero-editorial-mark{display:none !important;}
}


/* STEP 9E – user-requested correction only:
   remove the duplicate background cover and enlarge the real cover upward/rightward. */
.hero-editorial-artfield{
  display:none !important;
}
.hero-cover.hero-cover-editorial{
  width:430px !important;
  max-width:430px !important;
  height:590px !important;
  min-height:590px !important;
  margin-left:-18px !important;
}
.hero-editorial-cover{
  left:43px !important;
  bottom:39px !important;
  width:360px !important;
  transform:none !important;
}
.hero-editorial-plinth{
  left:37px !important;
  bottom:29px !important;
  width:373px !important;
}
.hero-editorial-rail{
  left:30px !important;
  top:55px !important;
  height:420px !important;
}
.hero-editorial-mark{
  left:7px !important;
  bottom:82px !important;
}
@media(max-width:1180px){
  .hero-cover.hero-cover-editorial{width:390px !important;max-width:390px !important;height:555px !important;margin-left:-10px !important;}
  .hero-editorial-cover{left:38px !important;bottom:36px !important;width:325px !important;}
  .hero-editorial-plinth{left:32px !important;bottom:27px !important;width:337px !important;}
  .hero-editorial-rail{left:25px !important;top:60px !important;height:380px !important;}
  .hero-editorial-mark{left:3px !important;bottom:76px !important;}
}
@media(max-width:800px){
  .hero-cover.hero-cover-editorial{width:100% !important;max-width:360px !important;height:520px !important;margin:0 auto !important;}
  .hero-editorial-cover{left:50% !important;bottom:35px !important;width:min(88vw,310px) !important;transform:translateX(-50%) !important;}
  .hero-editorial-plinth{left:50% !important;bottom:26px !important;width:min(92vw,322px) !important;transform:translateX(-50%) !important;}
  .hero-editorial-rail,.hero-editorial-mark{display:none !important;}
}

/* STEP 9F – premium gallery object: clean, restrained, no duplicate artwork */
.hero-editorial-rail,
.hero-editorial-mark{
  display:none !important;
}

.hero-editorial-cover{
  isolation:isolate !important;
  filter:none !important;
}

/* shallow dark backing plate: gives depth without turning the cover into a fake book */
.hero-editorial-cover::before{
  content:"" !important;
  position:absolute !important;
  z-index:-2 !important;
  left:7px !important;
  top:7px !important;
  width:100% !important;
  height:100% !important;
  border-radius:2px !important;
  background:linear-gradient(145deg,rgba(41,37,31,.98),rgba(8,8,9,.99) 55%,rgba(26,21,16,.98)) !important;
  box-shadow:
    0 28px 42px rgba(0,0,0,.58),
    10px 12px 26px rgba(0,0,0,.34),
    0 0 0 1px rgba(184,145,87,.18) !important;
  pointer-events:none !important;
}

/* very restrained warm gallery rim – not a visible picture frame */
.hero-editorial-cover::after{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  inset:-1px !important;
  border-radius:2px !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(210,176,116,.28),
    inset 0 0 0 2px rgba(0,0,0,.42),
    0 0 18px rgba(190,13,13,.06) !important;
}

.hero-editorial-cover img{
  position:relative !important;
  z-index:1 !important;
  border-radius:1px !important;
  filter:saturate(1.015) contrast(1.025) brightness(.99) !important;
}

/* museum-plinth instead of the previous brown strip */
.hero-editorial-plinth{
  left:34px !important;
  bottom:24px !important;
  width:386px !important;
  height:16px !important;
  border:0 !important;
  border-radius:2px !important;
  background:
    linear-gradient(180deg,rgba(204,171,111,.34) 0,rgba(204,171,111,.12) 1px,transparent 1px),
    linear-gradient(180deg,#202023 0%,#0d0d0f 48%,#050506 100%) !important;
  box-shadow:
    0 18px 28px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.9) !important;
}
.hero-editorial-plinth::before{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:-8px !important;
  height:14px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.44) 0%,rgba(0,0,0,.20) 48%,transparent 78%) !important;
  filter:blur(3px) !important;
}

/* a soft warm highlight from upper left integrates the cover with the red hero lighting */
.hero-editorial-stage::after{
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;
  left:28px !important;
  top:20px !important;
  width:405px !important;
  height:165px !important;
  pointer-events:none !important;
  background:linear-gradient(118deg,rgba(190,13,13,.09),rgba(214,179,116,.045) 38%,transparent 62%) !important;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent) !important;
  mask-image:linear-gradient(180deg,#000,transparent) !important;
}

@media(max-width:1180px){
  .hero-editorial-plinth{left:29px !important;width:350px !important;}
  .hero-editorial-stage::after{left:24px !important;width:360px !important;}
}
@media(max-width:800px){
  .hero-editorial-plinth{left:50% !important;width:min(94vw,330px) !important;transform:translateX(-50%) !important;}
  .hero-editorial-stage::after{left:50% !important;width:min(96vw,345px) !important;transform:translateX(-50%) !important;}
}

/* STEP 9G – red cloth placed behind the premium gallery cover */
.hero-cover.hero-cover-editorial{
  overflow:visible !important;
}
.hero-editorial-stage{
  isolation:isolate !important;
}
.hero-editorial-stage::before{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  left:-72px !important;
  bottom:18px !important;
  width:540px !important;
  height:470px !important;
  display:block !important;
  pointer-events:none !important;
  background:url("assets/hero-cloth-backdrop.png") left bottom / contain no-repeat !important;
  filter:
    drop-shadow(0 24px 30px rgba(0,0,0,.34))
    drop-shadow(-10px 10px 18px rgba(109,10,14,.20)) !important;
  opacity:.97 !important;
}
.hero-editorial-plinth{
  z-index:2 !important;
}
.hero-editorial-cover{
  z-index:4 !important;
}
.hero-editorial-cover::before{
  z-index:3 !important;
}
.hero-editorial-cover::after{
  z-index:5 !important;
}
.hero-editorial-stage::after{
  z-index:3 !important;
}

@media(max-width:1180px){
  .hero-editorial-stage::before{
    left:-58px !important;
    bottom:16px !important;
    width:486px !important;
    height:420px !important;
  }
}
@media(max-width:800px){
  .hero-editorial-stage::before{
    left:50% !important;
    bottom:22px !important;
    width:min(100vw,420px) !important;
    height:360px !important;
    transform:translateX(-50%) !important;
    background-position:center bottom !important;
  }
}

/* STEP 9G FIX – use the real transparent cloth asset, larger, strictly behind the cover */
.hero-editorial-stage::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:-118px !important;
  bottom:-2px !important;
  width:650px !important;
  height:555px !important;
  display:block !important;
  pointer-events:none !important;
  background:url("assets/hero-cloth-new.png") center bottom / contain no-repeat !important;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.30)) !important;
  opacity:.96 !important;
  transform:none !important;
}

/* The backing plate must remain behind the real cover image. */
.hero-editorial-cover::before{
  z-index:-2 !important;
}
.hero-editorial-cover img{
  position:relative !important;
  z-index:2 !important;
  opacity:1 !important;
  filter:saturate(1.015) contrast(1.025) brightness(.99) !important;
}
.hero-editorial-cover::after{
  z-index:3 !important;
}
.hero-editorial-cover{
  z-index:5 !important;
}
.hero-editorial-plinth{
  z-index:2 !important;
}

@media(max-width:1180px){
  .hero-editorial-stage::before{
    left:-98px !important;
    bottom:0 !important;
    width:585px !important;
    height:505px !important;
  }
}
@media(max-width:800px){
  .hero-editorial-stage::before{
    left:50% !important;
    bottom:10px !important;
    width:min(128vw,520px) !important;
    height:430px !important;
    transform:translateX(-50%) !important;
    background-position:center bottom !important;
  }
}

/* STEP 9G FINAL TUNE – cloth larger, cover slightly higher, cover size unchanged */
.hero-editorial-stage::before{
  left:-140px !important;
  bottom:-6px !important;
  width:720px !important;
  height:620px !important;
  background-position:center bottom !important;
}

.hero-editorial-cover{
  bottom:58px !important;
}

.hero-editorial-plinth{
  bottom:43px !important;
}

@media(max-width:1180px){
  .hero-editorial-stage::before{
    left:-116px !important;
    bottom:-4px !important;
    width:640px !important;
    height:552px !important;
  }
  .hero-editorial-cover{
    bottom:52px !important;
  }
  .hero-editorial-plinth{
    bottom:39px !important;
  }
}

@media(max-width:800px){
  .hero-editorial-stage::before{
    left:50% !important;
    bottom:10px !important;
    width:min(138vw,560px) !important;
    height:460px !important;
    transform:translateX(-50%) !important;
  }
  .hero-editorial-cover{
    bottom:46px !important;
  }
  .hero-editorial-plinth{
    bottom:33px !important;
  }
}

/* STEP 9H – shift the complete hero foreground to the right, keep background fixed */
.comic-hero{
  padding-left:max(128px, calc((100vw - 1540px) / 2 + 128px)) !important;
  padding-right:max(40px, calc((100vw - 1540px) / 2 + 40px)) !important;
}
@media(max-width:1540px){
  .comic-hero{
    padding-left:128px !important;
    padding-right:40px !important;
  }
}
@media(max-width:1180px){
  .comic-hero{
    padding-left:72px !important;
    padding-right:28px !important;
  }
}
@media(max-width:800px){
  .comic-hero{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

/* STEP 10A – ÖZET + YAYIN BİLGİLERİ as one premium editorial panel */
.detail-overview{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.62fr) minmax(340px,.88fr) !important;
  gap:0 !important;
  margin:0 0 58px !important;
  padding:42px 46px 44px !important;
  overflow:hidden !important;
  border:1px solid rgba(201,165,106,.15) !important;
  border-radius:3px !important;
  background:
    radial-gradient(circle at 12% 12%,rgba(190,13,13,.055),transparent 31%),
    linear-gradient(112deg,rgba(18,18,21,.82) 0%,rgba(11,11,13,.88) 52%,rgba(8,9,11,.93) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 70px rgba(0,0,0,.22),
    0 24px 52px rgba(0,0,0,.18) !important;
}
.detail-overview::before{
  content:"" !important;
  position:absolute !important;
  left:46px !important;
  right:46px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(214,40,43,.55) 20%,rgba(201,165,106,.38) 50%,rgba(214,40,43,.18) 78%,transparent) !important;
  opacity:.85 !important;
  pointer-events:none !important;
}
.detail-overview::after{
  content:"" !important;
  position:absolute !important;
  right:-120px !important;
  bottom:-155px !important;
  width:300px !important;
  height:300px !important;
  border:1px solid rgba(201,165,106,.035) !important;
  border-radius:50% !important;
  box-shadow:0 0 0 34px rgba(201,165,106,.012),0 0 0 72px rgba(190,13,13,.008) !important;
  pointer-events:none !important;
}

.detail-overview .content-section{
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.detail-overview .content-section::before,
.detail-overview .content-section::after{
  display:none !important;
  content:none !important;
}

.overview-summary{
  padding-right:52px !important;
}
.overview-facts{
  padding-left:48px !important;
  border-left:1px solid rgba(201,165,106,.14) !important;
}

.detail-overview .section-heading{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:13px !important;
  margin:0 0 32px !important;
  min-height:54px !important;
}
.detail-overview .section-heading h2{
  margin:0 !important;
  color:#f1ede5 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:.055em !important;
  line-height:1 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.65) !important;
}
.detail-overview .section-heading span{
  display:block !important;
  position:relative !important;
  width:176px !important;
  height:1px !important;
  flex:none !important;
  background:linear-gradient(90deg,transparent,rgba(190,13,13,.62) 30%,rgba(201,165,106,.30) 50%,rgba(190,13,13,.62) 70%,transparent) !important;
  box-shadow:0 0 10px rgba(190,13,13,.10) !important;
}
.detail-overview .section-heading span::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:7px !important;
  height:7px !important;
  border:1px solid rgba(190,13,13,.62) !important;
  background:#0d0d0f !important;
  transform:translate(-50%,-50%) rotate(45deg) !important;
  box-shadow:0 0 0 2px rgba(201,165,106,.035),0 0 8px rgba(190,13,13,.14) !important;
}
.detail-overview .section-heading::after{
  display:none !important;
  content:none !important;
}

.overview-summary .lead-text{
  position:relative !important;
  max-width:860px !important;
  margin:0 !important;
  padding:4px 10px 4px 24px !important;
  border-left:1px solid rgba(214,40,43,.48) !important;
  background:linear-gradient(90deg,rgba(190,13,13,.028),transparent 32%) !important;
  color:#d0cbc2 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:15.5px !important;
  line-height:1.9 !important;
  letter-spacing:.005em !important;
  text-shadow:0 1px 0 rgba(0,0,0,.35) !important;
}

.overview-facts .fact-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 28px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.overview-facts .fact-grid>div{
  position:relative !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:18px !important;
  min-height:56px !important;
  padding:10px 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(201,165,106,.10) !important;
  background:transparent !important;
}
.overview-facts .fact-grid>div::before{
  display:none !important;
  content:none !important;
}
.overview-facts .fact-grid span{
  color:#a99678 !important;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  white-space:nowrap !important;
}
.overview-facts .fact-grid strong{
  margin:0 !important;
  color:#f0ece4 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  text-align:right !important;
  white-space:nowrap !important;
}

@media(max-width:1180px){
  .detail-overview{
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr) !important;
    padding:36px 34px 38px !important;
  }
  .overview-summary{padding-right:36px !important;}
  .overview-facts{padding-left:34px !important;}
}

@media(max-width:900px){
  .detail-overview{
    grid-template-columns:1fr !important;
    gap:38px !important;
    padding:34px 28px 36px !important;
  }
  .overview-summary{
    padding-right:0 !important;
  }
  .overview-facts{
    padding:36px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(201,165,106,.14) !important;
  }
}

@media(max-width:600px){
  .detail-overview{
    padding:28px 20px 30px !important;
  }
  .detail-overview::before{left:20px !important;right:20px !important;}
  .overview-summary .lead-text{padding-left:18px !important;font-size:14.5px !important;}
  .overview-facts .fact-grid{grid-template-columns:1fr !important;}
  .overview-facts .fact-grid>div{min-height:52px !important;}
}

/* STEP 10B – restrained editorial spread: no card/dashboard look */
.detail-overview{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.7fr) minmax(330px,.82fr) !important;
  gap:0 !important;
  margin:0 0 72px !important;
  padding:54px 8px 56px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
/* only two quiet rules hold the spread together */
.detail-overview::before,
.detail-overview::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  width:auto !important;
  height:1px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
.detail-overview::before{
  top:0 !important;
  bottom:auto !important;
  background:linear-gradient(90deg,transparent 0%,rgba(201,165,106,.16) 12%,rgba(255,255,255,.075) 50%,rgba(201,165,106,.12) 88%,transparent 100%) !important;
}
.detail-overview::after{
  top:auto !important;
  bottom:0 !important;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 14%,rgba(190,13,13,.20) 50%,rgba(255,255,255,.05) 86%,transparent 100%) !important;
}

.detail-overview .content-section{
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.detail-overview .content-section::before,
.detail-overview .content-section::after{
  display:none !important;
  content:none !important;
}
.overview-summary{
  padding-left:0 !important;
  padding-right:70px !important;
}
.overview-facts{
  padding-left:56px !important;
  padding-right:0 !important;
  border-left:1px solid rgba(201,165,106,.16) !important;
  border-top:0 !important;
}

/* editorial headings: left aligned, no decorative diamond */
.detail-overview .section-heading{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:13px !important;
  min-height:0 !important;
  margin:0 0 30px !important;
  padding:0 !important;
}
.detail-overview .section-heading h2{
  margin:0 !important;
  color:#eee9df !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:19px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.07em !important;
  text-shadow:0 1px 0 rgba(0,0,0,.7) !important;
}
.detail-overview .section-heading span{
  position:relative !important;
  display:block !important;
  flex:none !important;
  width:62px !important;
  height:1px !important;
  margin:0 !important;
  background:linear-gradient(90deg,rgba(214,40,43,.82),rgba(201,165,106,.42) 58%,transparent 100%) !important;
  box-shadow:0 0 8px rgba(190,13,13,.12) !important;
}
.detail-overview .section-heading span::before,
.detail-overview .section-heading span::after,
.detail-overview .section-heading::before,
.detail-overview .section-heading::after{
  display:none !important;
  content:none !important;
}

/* summary: pure typography; no card, no side bar */
.overview-summary .lead-text{
  max-width:760px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#cfc9bf !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.92 !important;
  letter-spacing:.004em !important;
  text-shadow:0 1px 0 rgba(0,0,0,.32) !important;
}

/* publication data: six calm typographic facts, not form rows */
.overview-facts .fact-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:26px 44px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.overview-facts .fact-grid>div{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:7px !important;
  min-height:66px !important;
  margin:0 !important;
  padding:0 0 16px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.075) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.overview-facts .fact-grid>div::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  bottom:-1px !important;
  top:auto !important;
  width:26px !important;
  height:1px !important;
  border:0 !important;
  border-radius:0 !important;
  background:rgba(190,13,13,.62) !important;
  box-shadow:none !important;
  transform:none !important;
}
.overview-facts .fact-grid span{
  display:block !important;
  margin:0 !important;
  color:#9f8d72 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:8px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.18em !important;
  white-space:nowrap !important;
}
.overview-facts .fact-grid strong{
  display:block !important;
  margin:0 !important;
  color:#f1ede5 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  letter-spacing:.01em !important;
  text-align:left !important;
  white-space:nowrap !important;
}

@media(max-width:1180px){
  .detail-overview{
    grid-template-columns:minmax(0,1.45fr) minmax(310px,.8fr) !important;
    padding:46px 4px 48px !important;
  }
  .overview-summary{padding-right:48px !important;}
  .overview-facts{padding-left:42px !important;}
  .overview-facts .fact-grid{gap:22px 30px !important;}
}
@media(max-width:900px){
  .detail-overview{
    grid-template-columns:1fr !important;
    gap:42px !important;
    padding:42px 0 44px !important;
  }
  .overview-summary{padding-right:0 !important;}
  .overview-facts{
    padding:38px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(201,165,106,.14) !important;
  }
  .overview-summary .lead-text{max-width:none !important;}
}
@media(max-width:600px){
  .detail-overview{padding:34px 0 36px !important;}
  .detail-overview .section-heading{margin-bottom:24px !important;}
  .overview-summary .lead-text{font-size:15px !important;line-height:1.82 !important;}
  .overview-facts .fact-grid{grid-template-columns:1fr !important;gap:18px !important;}
  .overview-facts .fact-grid>div{min-height:58px !important;}
}

/* STEP 10B FIX – restore ONLY the original ornamental underline beneath ÖZET / YAYIN BİLGİLERİ */
.detail-overview .section-heading span{
  display:block !important;
  position:relative !important;
  flex:none !important;
  width:176px !important;
  height:1px !important;
  margin:0 !important;
  background:linear-gradient(90deg,transparent,rgba(190,13,13,.62) 30%,rgba(201,165,106,.30) 50%,rgba(190,13,13,.62) 70%,transparent) !important;
  box-shadow:0 0 10px rgba(190,13,13,.10) !important;
}
.detail-overview .section-heading span::before{
  display:none !important;
  content:none !important;
}
.detail-overview .section-heading span::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:7px !important;
  height:7px !important;
  border:1px solid rgba(190,13,13,.62) !important;
  background:#0d0d0f !important;
  transform:translate(-50%,-50%) rotate(45deg) !important;
  box-shadow:0 0 0 2px rgba(201,165,106,.035),0 0 8px rgba(190,13,13,.14) !important;
}
.detail-overview .section-heading::before,
.detail-overview .section-heading::after{
  display:none !important;
  content:none !important;
}

/* STEP 10C – centered premium overview blocks with clearer separation */
.detail-overview{
  width:min(1280px,calc(100% - 96px)) !important;
  margin:12px auto 70px !important;
  padding:0 0 62px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.82fr) !important;
  gap:92px !important;
  align-items:start !important;
}
.detail-overview .content-section{
  min-height:100% !important;
}
.overview-summary,
.overview-facts{
  align-self:start !important;
}
.overview-summary{
  max-width:100% !important;
}
.overview-facts{
  margin-left:12px !important;
  padding-left:44px !important;
  border-left:1px solid rgba(201,165,106,.24) !important;
}
.overview-summary .lead-text{
  max-width:unset !important;
}
@media (max-width: 1400px){
  .detail-overview{
    width:min(1220px,calc(100% - 72px)) !important;
    gap:74px !important;
  }
  .overview-facts{
    margin-left:0 !important;
    padding-left:34px !important;
  }
}
@media (max-width: 1180px){
  .detail-overview{
    width:min(1100px,calc(100% - 56px)) !important;
    grid-template-columns:minmax(0,1fr) minmax(340px,.88fr) !important;
    gap:52px !important;
  }
  .overview-facts{
    padding-left:28px !important;
  }
}
@media (max-width: 980px){
  .detail-overview{
    width:min(100%,calc(100% - 40px)) !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .overview-facts{
    margin-left:0 !important;
    padding-left:0 !important;
    border-left:0 !important;
  }
}

/* STEP 10D – exact orientation/spacing correction for ÖZET + YAYIN BİLGİLERİ */
.detail-overview{
  width:100% !important;
  margin:0 auto 46px !important;
  padding:56px 42px 56px !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:160px !important;
  align-items:start !important;
}

/* Headings centered precisely over their existing ornamental underline. */
.detail-overview .section-heading{
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  margin:0 0 28px !important;
}
.detail-overview .section-heading h2{
  width:176px !important;
  text-align:center !important;
}
.detail-overview .section-heading span{
  width:176px !important;
  margin:0 auto !important;
}

/* Keep the two editorial blocks visually independent instead of welded together. */
.overview-summary,
.overview-facts{
  margin:0 !important;
  padding:0 !important;
  border-left:0 !important;
  min-width:0 !important;
}
.overview-summary .lead-text{
  width:100% !important;
  max-width:650px !important;
  margin:0 auto !important;
}
.overview-facts .fact-grid{
  width:100% !important;
  max-width:470px !important;
  margin:0 auto !important;
  gap:16px 44px !important;
}
.overview-facts .fact-grid>div{
  min-height:52px !important;
  padding:0 0 10px !important;
}

@media(max-width:1400px){
  .detail-overview{
    width:100% !important;
    padding:54px 30px 54px !important;
    gap:125px !important;
  }
}
@media(max-width:1180px){
  .detail-overview{
    width:100% !important;
    padding:48px 18px 48px !important;
    gap:76px !important;
  }
  .overview-facts .fact-grid{gap:16px 30px !important;}
}
@media(max-width:980px){
  .detail-overview{
    width:100% !important;
    padding:42px 0 42px !important;
    grid-template-columns:1fr !important;
    gap:48px !important;
  }
  .overview-summary .lead-text,
  .overview-facts .fact-grid{max-width:680px !important;}
}

/* STEP 10E – horizontal alignment only: spread both blocks across the full lower rule */
.detail-overview{
  width:min(1400px,calc(100% - 72px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:240px !important;
}

/* Each complete block gets its own visual half and is centered over that half. */
.overview-summary,
.overview-facts{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  border-left:0 !important;
}

.detail-overview .section-heading{
  width:100% !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}
.detail-overview .section-heading h2{
  width:auto !important;
  min-width:0 !important;
  text-align:center !important;
}
.detail-overview .section-heading span{
  margin-left:auto !important;
  margin-right:auto !important;
}

.overview-summary .lead-text{
  width:100% !important;
  max-width:570px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.overview-facts .fact-grid{
  width:100% !important;
  max-width:470px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:1400px){
  .detail-overview{
    width:min(1320px,calc(100% - 60px)) !important;
    column-gap:190px !important;
  }
}
@media(max-width:1180px){
  .detail-overview{
    width:min(1080px,calc(100% - 44px)) !important;
    column-gap:110px !important;
  }
}
@media(max-width:980px){
  .detail-overview{
    width:min(100%,calc(100% - 40px)) !important;
    grid-template-columns:1fr !important;
    column-gap:0 !important;
  }
}

/* STEP 10F – REAL alignment fix: overview must span the same full page grid as the lower section */
.detail-overview{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  grid-template-columns:minmax(0,600px) minmax(0,470px) !important;
  justify-content:space-between !important;
  column-gap:0 !important;
}

.overview-summary{
  width:600px !important;
  max-width:100% !important;
}
.overview-facts{
  width:470px !important;
  max-width:100% !important;
}

.overview-summary .lead-text{
  width:100% !important;
  max-width:570px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.overview-facts .fact-grid{
  width:100% !important;
  max-width:470px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.detail-overview .section-heading{
  width:100% !important;
  align-items:center !important;
  text-align:center !important;
}
.detail-overview .section-heading h2{
  text-align:center !important;
}
.detail-overview .section-heading span{
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:1180px){
  .detail-overview{
    grid-template-columns:minmax(0,1fr) minmax(0,420px) !important;
    column-gap:90px !important;
  }
  .overview-summary,
  .overview-facts{
    width:100% !important;
  }
}

@media(max-width:980px){
  .detail-overview{
    grid-template-columns:1fr !important;
    justify-content:stretch !important;
    column-gap:0 !important;
  }
  .overview-summary,
  .overview-facts{
    width:100% !important;
  }
}


/* STEP 10G – vertical separators before ÖZET, between both blocks, and after YAYIN BİLGİLERİ */
.detail-overview{
  position:relative !important;
  overflow:visible !important;
}

.overview-divider{
  position:absolute !important;
  top:18px !important;
  bottom:18px !important;
  width:1px !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(190,13,13,.10) 4%,
    rgba(190,13,13,.60) 18%,
    rgba(201,165,106,.22) 50%,
    rgba(190,13,13,.60) 82%,
    rgba(190,13,13,.10) 96%,
    transparent 100%) !important;
  box-shadow:0 0 10px rgba(190,13,13,.10) !important;
  opacity:.95 !important;
  z-index:1 !important;
}

.overview-divider::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:7px !important;
  height:7px !important;
  border:1px solid rgba(190,13,13,.62) !important;
  background:#0d0d0f !important;
  transform:translate(-50%,-50%) rotate(45deg) !important;
  box-shadow:0 0 0 2px rgba(201,165,106,.035),0 0 8px rgba(190,13,13,.14) !important;
}

.overview-divider-left{
  left:0 !important;
}
.overview-divider-center{
  left:50% !important;
  transform:translateX(-50%) !important;
}
.overview-divider-right{
  right:0 !important;
}

.detail-overview .content-section{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:980px){
  .overview-divider{display:none !important;}
}

/* Preserve the paragraph breaks entered in the comic dashboard summary. */
.overview-summary .lead-text{
  white-space:pre-line !important;
}

/* Series status colors: ongoing is red, completed is green. */
.series-status-badge.ongoing{
  border-color:rgba(214,40,43,.72) !important;
  background:rgba(190,13,13,.16) !important;
  color:#ff4a4d !important;
}
.series-status-badge.completed{
  border-color:rgba(91,211,139,.62) !important;
  background:rgba(34,112,65,.18) !important;
  color:#75d29a !important;
}

/* Series carousel: keep six full covers visible on desktop. */
@media(min-width:901px){
  .series-track{gap:18px !important}
  .series-item{
    flex-basis:190px !important;
    width:190px !important;
    min-width:190px !important;
  }
  .series-cover{
    width:174px !important;
    height:256px !important;
  }
}

/* TEST v3 – merge the optional banner and the existing detail hero. */
.detail-cinematic-banner{
  height:clamp(260px,30vw,450px) !important;
  box-shadow:none !important;
}
.detail-cinematic-banner::after{
  background:linear-gradient(180deg,rgba(0,0,0,.02) 46%,rgba(9,10,12,.30) 72%,rgba(9,10,12,.96) 100%) !important;
}
main.cinematic-detail-page{
  position:relative;
  z-index:2;
  overflow:visible;
  background:transparent !important;
}
.cinematic-detail-page .comic-hero{
  margin-top:-86px !important;
  padding-top:34px !important;
  padding-bottom:58px !important;
  overflow:visible !important;
  background:linear-gradient(180deg,rgba(9,10,12,0) 0,rgba(9,10,12,.76) 92px,#090a0c 205px) !important;
  border-top:0 !important;
  box-shadow:none !important;
}
.cinematic-detail-page .comic-hero::before,
.cinematic-detail-page .comic-hero::after{
  display:none !important;
}
.cinematic-detail-page .hero-cover-wrap{
  position:relative !important;
  z-index:3 !important;
}
.cinematic-detail-page .hero-info{
  padding-top:142px !important;
}
.cinematic-detail-page .hero-info h1{
  display:none !important;
}
.cinematic-detail-page .hero-info .eyebrow{
  margin-top:0 !important;
}
@media(max-width:800px){
  .detail-cinematic-banner{
    height:230px !important;
  }
  .cinematic-detail-page .comic-hero{
    margin-top:0 !important;
    padding-top:30px !important;
    overflow:hidden !important;
    background:#090a0c !important;
  }
  .cinematic-detail-page .hero-info{
    padding-top:0 !important;
  }
}

/* TEST – cinematic detail banner, currently enabled only for 10 Years to Death. */
.detail-cinematic-banner{
  position:relative;
  width:100%;
  height:clamp(230px,30vw,450px);
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid rgba(214,40,43,.34);
  background:#09090b;
  box-shadow:0 24px 70px rgba(0,0,0,.48);
}
.detail-cinematic-banner::before,
.detail-cinematic-banner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.detail-cinematic-banner::before{
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 24%,transparent 76%,rgba(0,0,0,.18));
}
.detail-cinematic-banner::after{
  background:linear-gradient(180deg,rgba(0,0,0,.05) 52%,rgba(13,13,15,.82) 100%);
}
.detail-cinematic-banner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 34%;
}
@media(max-width:760px){
  .detail-cinematic-banner{
    height:230px;
  }
  .detail-cinematic-banner img{
    object-position:center 34%;
  }
}

/* TEST v4 – preserve the approved hero and present the banner as framed artwork. */
.detail-artwork-block{
  position:relative;
  max-width:1360px;
  margin:58px auto 4px;
  padding:0 48px;
}
.detail-artwork-heading{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 0 16px;
}
.detail-artwork-heading span{
  color:#c9a56a;
  font-size:9px;
  font-weight:850;
  letter-spacing:.22em;
  white-space:nowrap;
}
.detail-artwork-heading i{
  display:block;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,rgba(201,165,106,.42),rgba(190,13,13,.42) 42%,transparent 100%);
}
.detail-artwork-block .detail-cinematic-banner{
  width:100%;
  height:auto !important;
  aspect-ratio:1713/918;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(201,165,106,.30);
  border-radius:5px;
  background:#08090b;
  box-shadow:
    0 28px 70px rgba(0,0,0,.52),
    0 0 0 1px rgba(190,13,13,.10),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
}
.detail-artwork-block .detail-cinematic-banner::before{
  background:linear-gradient(90deg,rgba(0,0,0,.10),transparent 22%,transparent 78%,rgba(0,0,0,.10));
}
.detail-artwork-block .detail-cinematic-banner::after{
  background:linear-gradient(180deg,transparent 72%,rgba(8,9,11,.28) 100%) !important;
}
.detail-artwork-block .detail-cinematic-banner img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
@media(max-width:800px){
  .detail-artwork-block{
    margin-top:38px;
    padding:0 18px;
  }
  .detail-artwork-heading{
    margin-bottom:12px;
  }
}

/* TEST v5 – restrained premium glow for pointer devices. */
.detail-artwork-block .detail-cinematic-banner{
  transition:
    border-color .34s ease,
    box-shadow .34s ease,
    filter .34s ease;
}
.detail-artwork-block .detail-cinematic-banner::before,
.detail-artwork-block .detail-cinematic-banner::after,
.detail-artwork-block .detail-cinematic-banner img{
  transition:opacity .34s ease, filter .34s ease;
}
@media(hover:hover) and (pointer:fine){
  .detail-artwork-block .detail-cinematic-banner:hover{
    border-color:rgba(214,40,43,.72);
    box-shadow:
      0 30px 78px rgba(0,0,0,.58),
      0 0 22px rgba(190,13,13,.28),
      0 0 54px rgba(190,13,13,.16),
      inset 0 0 0 1px rgba(255,225,190,.07) !important;
    filter:saturate(1.06);
  }
  .detail-artwork-block .detail-cinematic-banner:hover::before{
    background:
      linear-gradient(90deg,rgba(190,13,13,.13),transparent 20%,transparent 80%,rgba(190,13,13,.13)),
      radial-gradient(circle at 50% 50%,rgba(255,255,255,.055),transparent 58%);
  }
  .detail-artwork-block .detail-cinematic-banner:hover::after{
    opacity:.74;
  }
  .detail-artwork-block .detail-cinematic-banner:hover img{
    filter:brightness(1.055) contrast(1.025);
  }
}
@media(prefers-reduced-motion:reduce){
  .detail-artwork-block .detail-cinematic-banner,
  .detail-artwork-block .detail-cinematic-banner::before,
  .detail-artwork-block .detail-cinematic-banner::after,
  .detail-artwork-block .detail-cinematic-banner img{
    transition:none;
  }
}

/* v8 – seamless ambient backdrop derived from each comic banner. */
.detail-artwork-block{
  isolation:isolate;
  z-index:0;
}
.detail-artwork-backdrop{
  position:absolute;
  z-index:-1;
  top:-120px;
  left:50%;
  width:100vw;
  height:calc(100% + 240px);
  max-width:none;
  transform:translateX(-50%) scale(1.06);
  object-fit:cover;
  object-position:center;
  opacity:.46;
  filter:blur(42px) brightness(.27) saturate(.82);
  pointer-events:none;
  user-select:none;
  -webkit-mask-image:radial-gradient(ellipse 76% 72% at 50% 50%,#000 40%,rgba(0,0,0,.94) 57%,rgba(0,0,0,.48) 76%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 72% at 50% 50%,#000 40%,rgba(0,0,0,.94) 57%,rgba(0,0,0,.48) 76%,transparent 100%);
}
.detail-artwork-heading,
.detail-artwork-block .detail-cinematic-banner{
  position:relative;
  z-index:1;
}
@media(max-width:800px){
  .detail-artwork-backdrop{
    top:-78px;
    height:calc(100% + 156px);
    transform:translateX(-50%) scale(1.08);
    opacity:.40;
    filter:blur(30px) brightness(.25) saturate(.78);
    -webkit-mask-image:radial-gradient(ellipse 88% 76% at 50% 50%,#000 36%,rgba(0,0,0,.9) 58%,transparent 100%);
    mask-image:radial-gradient(ellipse 88% 76% at 50% 50%,#000 36%,rgba(0,0,0,.9) 58%,transparent 100%);
  }
}

/* v9 – softly blend the artwork stage into the following detail background. */
.detail-artwork-block + .page-layout::after{
  top:-120px;
  height:880px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 7%,rgba(0,0,0,.72) 15%,#000 23%,#000 51%,rgba(0,0,0,.82) 66%,rgba(0,0,0,.36) 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 7%,rgba(0,0,0,.72) 15%,#000 23%,#000 51%,rgba(0,0,0,.82) 66%,rgba(0,0,0,.36) 84%,transparent 100%);
}
@media(max-width:980px){
  .detail-artwork-block + .page-layout::after{
    top:-82px;
    height:982px;
  }
}


/* v10 – requested polish: larger hero action boxes + brighter metallic cover edge. */
.hero-actions-elegant button{
  min-height:56px !important;
  padding-left:21px !important;
  padding-right:21px !important;
}
.hero-actions-elegant .action-row-extra{
  min-height:56px !important;
  padding-left:18px !important;
  padding-right:18px !important;
}

/* Keep the gallery-cover treatment restrained; only strengthen the fine rim/light. */
.hero-editorial-cover::after{
  inset:-2px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(232,205,151,.52) !important;
  background:transparent !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,247,224,.16),
    inset 0 0 0 2px rgba(64,45,26,.38),
    0 0 0 1px rgba(92,64,32,.22),
    -2px -1px 9px rgba(255,222,164,.10),
    2px 3px 13px rgba(190,13,13,.08),
    0 0 20px rgba(214,178,108,.10) !important;
}

/* v11 – user correction: wider (not taller) hero action boxes + clearly visible metallic/light cover rim. */
@media(min-width:1181px){
  .hero-actions-elegant{
    grid-template-columns:minmax(160px,.98fr) minmax(205px,1.24fr) minmax(205px,1.24fr) minmax(185px,1.10fr) minmax(125px,.74fr) !important;
  }
}
.hero-actions-elegant button{
  min-height:50px !important;
  padding-left:20px !important;
  padding-right:20px !important;
}
.hero-actions-elegant .action-row-extra{
  min-height:50px !important;
  padding-left:18px !important;
  padding-right:18px !important;
}

/* v12 – FIX: the rim must never paint over the cover image. */
.hero-editorial-cover::after{
  inset:-3px !important;
  box-sizing:border-box !important;
  border:2px solid rgba(224,196,139,.82) !important;
  border-radius:2px !important;
  background:none !important;
  box-shadow:
    0 0 0 1px rgba(91,61,31,.72),
    0 0 7px rgba(255,225,167,.34),
    0 0 17px rgba(218,178,105,.18),
    inset 0 0 0 1px rgba(255,250,234,.18) !important;
  pointer-events:none !important;
}


/* FILMISTIK MIAMI VICE CHARACTER PILOT */
.comic-character-pilot{
  margin:0 0 48px;
}

.comic-character-pilot-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

.comic-character-pilot-head>div>span{
  display:block;
  margin-bottom:6px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  color:#c82b35;
}

.comic-character-pilot-head h2{
  margin:0;
  font-size:25px;
  line-height:1;
  letter-spacing:.02em;
}

.comic-character-pilot-head>a{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-decoration:none;
  color:inherit;
  opacity:.72;
  transition:opacity .2s ease;
}

.comic-character-pilot-head>a:hover{
  opacity:1;
}

.comic-character-pilot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.comic-character-pilot-card{
  position:relative;
  display:block;
  min-height:265px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:#101012;
  color:#fff;
  text-decoration:none;
  isolation:isolate;
}

.comic-character-pilot-card>img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.comic-character-pilot-shade{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(5,5,7,.92) 0%,rgba(5,5,7,.66) 42%,rgba(5,5,7,.16) 78%),
    linear-gradient(0deg,rgba(5,5,7,.62),transparent 58%);
}

.comic-character-pilot-copy{
  position:absolute;
  left:28px;
  right:28px;
  bottom:26px;
  max-width:72%;
}

.comic-character-pilot-copy small{
  display:block;
  margin-bottom:7px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
  color:#d5d5d7;
}

.comic-character-pilot-copy h3{
  margin:0 0 14px;
  font-size:25px;
  line-height:1.05;
  letter-spacing:.015em;
  text-transform:uppercase;
}

.comic-character-pilot-copy strong{
  font-size:10px;
  letter-spacing:.12em;
  color:#fff;
}

.comic-character-pilot-card:hover>img{
  transform:scale(1.035);
}

.comic-character-pilot-card:hover .comic-character-pilot-copy strong{
  color:#e34a53;
}

@media(max-width:760px){
  .comic-character-pilot-grid{
    grid-template-columns:1fr;
  }

  .comic-character-pilot-card{
    min-height:230px;
  }

  .comic-character-pilot-head{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .comic-character-pilot-copy{
    left:22px;
    right:22px;
    bottom:22px;
    max-width:82%;
  }
}