*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#0d0d0f;color:#fff}
.top{display:flex;justify-content:space-between;align-items:center;padding:22px 50px;background:#111}
.logo{font-size:30px;font-weight:bold;color:#d62828}
nav a{color:#ddd;text-decoration:none;margin-left:24px}
nav a:hover{color:#fff}
.hero{height:auto;background:linear-gradient(135deg,#181818,#450808);display:flex;align-items:center}
.overlay{padding:70px}
h1{font-size:58px;line-height:1.1}
p{margin:25px 0;color:#ccc;font-size:20px}
button{padding:14px 28px;border:none;background:#be0d0d;color:#fff;border-radius:6px;cursor:pointer}
.ghost{background:transparent;border:1px solid #be0d0d;margin-left:12px}
.cards{padding:60px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:30px}
.card{background:#191919;border-radius:12px;overflow:hidden;transition:.3s}
.card:hover{transform:translateY(-8px)}
.cover{height:300px;background:linear-gradient(#444,#222)}
.card h3{padding:16px}
.footer{display:flex;justify-content:space-between;padding:40px 60px;background:#111;color:#999;margin-top:60px}
.card{cursor:pointer}
.card:hover{box-shadow:0 12px 30px rgba(214,40,40,.25)}

.card{cursor:pointer}.card:hover{box-shadow:0 12px 30px rgba(214,40,40,.25)}h2{margin-bottom:20px}
.logo{display:flex;align-items:center;gap:14px}
.logo img{height:58px}
.logo span{font-size:30px;font-weight:700;color:#fff}
.footer{padding:40px;text-align:center;background:#111;color:#888}


.logo{display:flex;align-items:center}
.logo img{
height:64px;
width:auto;
display:block;
}

.top{position:sticky;top:0;z-index:10;border-bottom:1px solid #2b0b0b}
nav{display:flex;align-items:center;gap:24px;font-weight:600}
nav a{margin-left:0;text-transform:uppercase;font-size:14px}
.lang{margin-left:30px;color:#aaa;font-size:13px}
.logo img{height:78px}
.hero{min-height:auto}


.slider{display:flex;gap:22px;overflow-x:auto;padding:10px 0 20px}
.comic{min-width:180px;background:#181818;border-radius:12px;padding:12px;transition:.3s}
.comic:hover{transform:translateY(-8px)}
.comic .cover{height:250px;border-radius:8px;background:linear-gradient(180deg,#555,#222);margin-bottom:12px}
.comic span{color:#b7b7b7;font-size:14px}
.feature{padding:60px}
.featuregrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.featurecard{background:#171717;padding:28px;border-left:4px solid #be0d0d;border-radius:10px}
.featurecard p{font-size:15px;line-height:1.6}


.section{padding:70px 60px}
.glow-title{
font-size:28px;
margin-bottom:28px;
padding-bottom:10px;
border-bottom:1px solid rgba(190,13,13,.45);
text-shadow:0 0 12px rgba(214,40,40,.85),0 0 30px rgba(190,13,13,.35);
box-shadow:0 18px 35px -28px rgba(214,40,40,.9);
}
.card{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 15px 35px rgba(190,13,13,.28);
}

.searchbox,.newsletter{display:flex;gap:12px;max-width:700px}
.searchbox input,.newsletter input{flex:1;padding:14px;border-radius:8px;border:1px solid #333;background:#171717;color:#fff}
.searchbox button,.newsletter button{padding:14px 22px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:#181818;padding:28px;border-radius:12px;text-align:center}
.stat strong{display:block;font-size:34px;color:#d62828}
.stat span{color:#bbb}
.footer{margin-top:60px;padding:35px 60px;border-top:1px solid #333;display:flex;justify-content:space-between;color:#999}

.slider{display:flex;gap:20px;overflow:auto;padding-bottom:10px}
.slider::-webkit-scrollbar{height:8px}
.slider::-webkit-scrollbar-thumb{background:#7a1111;border-radius:20px}
.comic{min-width:180px}
.featuregrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.featurecard{background:#171717;border:1px solid #2d2d2d;border-radius:12px;padding:24px;transition:.3s}
.featurecard:hover{border-color:#be0d0d;box-shadow:0 0 30px rgba(190,13,13,.25)}

.cover{position:relative;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#666,#222)}


/* Hero content */
.hero > .overlay{
position:relative;
inset:auto;
display:block;
opacity:1;
background:transparent;
padding:70px;
}

/* Clean cover hover — no badges and no ratings */
.cover-info{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
padding:18px;
background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.18) 58%,transparent 100%);
opacity:0;
transform:translateY(8px);
transition:opacity .25s ease,transform .25s ease;
}
.cover:hover .cover-info{
opacity:1;
transform:translateY(0);
}
.cover-meta{
margin-bottom:12px;
font-size:13px;
letter-spacing:.04em;
color:#ddd;
}
.cover-info button{
padding:9px 16px;
border:1px solid rgba(255,255,255,.24);
border-radius:6px;
background:rgba(190,13,13,.92);
color:#fff;
font-size:12px;
font-weight:700;
letter-spacing:.06em;
}


/* v2.6 premium posters */
.poster-row{display:flex;gap:22px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin}
.poster-row::-webkit-scrollbar{height:8px}
.poster-row::-webkit-scrollbar-thumb{background:#6d1010;border-radius:20px}
.comic,.card{position:relative}
.comic .cover,.card .cover{
border-radius:12px;
overflow:hidden;
box-shadow:0 18px 40px rgba(0,0,0,.45);
transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.comic:nth-child(2n) .cover{height:330px}
.comic:nth-child(2n+1) .cover{height:360px}
.comic .cover::after,.card .cover::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.10) 45%,transparent 70%);
opacity:.35;
pointer-events:none;
}
.comic:hover .cover,.card:hover .cover{
transform:translateY(-10px) scale(1.03);
filter:brightness(1.05);
box-shadow:0 26px 55px rgba(0,0,0,.6),0 0 24px rgba(190,13,13,.18);
}


/* 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;}

.authors-page{background:#0d0d0f}.wrap{max-width:1540px;margin:auto;padding:0 60px}
.hero{padding:76px 60px 52px;background:linear-gradient(135deg,#111,#191114,#0d0d0f)}
.eyebrow{color:#d6282b;font-size:11px;font-weight:900;letter-spacing:.18em}
.hero h1{font-size:72px;margin:10px 0}.hero p{color:#aaa}
.toolbar{padding:35px 60px}.search{width:100%;height:56px;background:#141418;border:1px solid #2a2a30;color:#fff;padding:0 18px;border-radius:6px}
.alphabet{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.alphabet button{width:36px;height:36px;background:#17171b;border:1px solid #2b2b31;color:#999;border-radius:4px}.alphabet button:hover{background:#d6282b;color:#fff}
.author-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:40px 60px 80px}
.author-card{background:#151518;border:1px solid rgba(255,255,255,.08);padding:28px;border-radius:8px;text-align:center;transition:.25s}
.author-card:hover{transform:translateY(-6px);border-color:#d6282b}
.avatar{width:92px;height:92px;border-radius:50%;margin:0 auto 18px;background:linear-gradient(135deg,#d6282b,#5a1114);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900}
.author-card h3{margin:8px 0}.author-card p{color:#999;margin-bottom:20px}.author-card button{padding:11px 18px}
@media(max-width:1000px){.author-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wrap,.toolbar,.author-grid{padding-left:20px;padding-right:20px}.author-grid{grid-template-columns:1fr}.hero h1{font-size:48px}}

.catalog-hero{position:relative;overflow:hidden}

















/* YAZARLAR Hero – definitive layout */
.hero{
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
  height:auto !important;
  min-height:0 !important;
  padding:76px 60px 52px !important;
  box-sizing:border-box !important;
}

.hero > .wrap{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  max-width:1540px !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
  text-align:left !important;
}

.hero h1{
  text-align:left !important;
  margin:10px 0 !important;
}

.hero-name-cloud{
  position:absolute !important;
  z-index:1 !important;
  top:18px !important;
  right:4% !important;
  bottom:18px !important;
  width:42% !important;
  height:auto !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

.hero-name-cloud span{
  position:absolute !important;
  color:#fff !important;
  opacity:.08 !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
}

.hero-name-cloud span:nth-child(1){top:4%;left:12%;font-size:34px}
.hero-name-cloud span:nth-child(2){top:7%;left:56%;font-size:19px}
.hero-name-cloud span:nth-child(3){top:31%;left:1%;font-size:25px}
.hero-name-cloud span:nth-child(4){top:52%;left:39%;font-size:28px}
.hero-name-cloud span:nth-child(5){top:71%;left:8%;font-size:18px}
.hero-name-cloud span:nth-child(6){top:82%;left:46%;font-size:18px}
.hero-name-cloud span:nth-child(7){top:38%;left:65%;font-size:17px}
.hero-name-cloud span:nth-child(8){top:20%;left:70%;font-size:16px}
.hero-name-cloud span:nth-child(9){top:68%;left:70%;font-size:16px}
.hero-name-cloud span:nth-child(10){top:45%;left:13%;font-size:15px}

@media(max-width:900px){
  .hero-name-cloud{display:none !important}
}


/* 06_Publisher */
:root{--red:#be0d0d;--red-bright:#d6282b;--panel:#17171a;--line:rgba(255,255,255,.09)}
.wrap{width:min(1540px,calc(100% - 80px));margin-inline:auto}
.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}
.publishers-page{min-height:70vh}
.publishers-page .hero{
  position:relative;min-height:410px;overflow:hidden;display:flex;align-items:center;
  background:
    radial-gradient(circle at 76% 45%,rgba(190,13,13,.24),transparent 34%),
    linear-gradient(112deg,#111114 0%,#161214 48%,#350708 100%);
  border-bottom:1px solid rgba(214,40,43,.22)
}
.hero-copy{position:relative;z-index:2}
.eyebrow{display:block;margin-bottom:15px;color:#d7d7dc;font-size:12px;font-weight:900;letter-spacing:.2em}
.publishers-page .hero h1{margin:0;font-size:76px;line-height:.95;letter-spacing:-.045em}
.publishers-page .hero p{max-width:590px;margin:22px 0 0;color:#b3b3bb;font-size:18px;line-height:1.6}
.publisher-cloud{position:absolute;inset:0 2% 0 45%;z-index:1;opacity:.92}
.cloud-name{position:absolute;color:#fff;font-weight:950;letter-spacing:-.04em;white-space:nowrap;text-shadow:0 12px 34px rgba(0,0,0,.45)}
.c1{top:15%;left:18%;font-size:54px}.c2{top:42%;left:5%;font-size:86px;color:#d6282b}.c3{top:66%;left:24%;font-size:42px}
.c4{top:21%;right:2%;font-size:31px;color:#b8b8bf}.c5{bottom:12%;right:5%;font-size:48px}.c6{top:7%;right:27%;font-size:58px;color:#d6282b}
.c7{bottom:8%;left:2%;font-size:28px;color:#a7a7ae}.c8{top:52%;right:7%;font-size:38px}.c9{top:33%;left:48%;font-size:24px;color:#aaa}
.publisher-cloud::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#121113 0%,rgba(18,17,19,.72) 8%,transparent 32%)}

.toolbar{padding-top:46px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.search-row{display:flex;gap:12px;margin-bottom:24px}
.search{flex:1;height:54px;padding:0 18px;border:1px solid #34343a;border-radius:8px;background:#151518;color:#fff;font-size:15px;outline:none}
.search:focus{border-color:var(--red-bright);box-shadow:0 0 0 3px rgba(214,40,43,.12)}
.clear-filter{height:54px;padding:0 24px;border:1px solid rgba(214,40,43,.4);background:rgba(190,13,13,.13);font-weight:900}
.alphabet{display:flex;flex-wrap:wrap;gap:8px}
.alphabet button{width:38px;height:36px;padding:0;border:1px solid #303036;border-radius:6px;background:#151518;color:#aaa;font-weight:800}
.alphabet button:hover,.alphabet button.active{border-color:var(--red-bright);background:var(--red);color:#fff}

.publisher-section{padding-top:45px;padding-bottom:80px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px}
.section-heading h2{margin:0;font-size:28px;letter-spacing:.02em}
.result-count{color:#8e8e96;font-size:13px}
.publisher-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.publisher-card{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#19191d,#141416);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.publisher-card:hover{transform:translateY(-7px);border-color:rgba(214,40,43,.55);box-shadow:0 20px 40px rgba(0,0,0,.34),0 0 25px rgba(190,13,13,.10)}
.publisher-mark{height:150px;display:flex;align-items:center;justify-content:center;padding:20px;border-bottom:1px solid var(--line);background:
 radial-gradient(circle at 75% 25%,rgba(214,40,43,.12),transparent 31%),#101012;
 color:#f4f4f6;font-size:31px;font-weight:950;letter-spacing:-.04em;text-align:center}
.publisher-card:hover .publisher-mark{background:radial-gradient(circle at 70% 20%,rgba(214,40,43,.21),transparent 36%),#111113}
.publisher-mark.wide{font-size:28px;letter-spacing:.12em}.publisher-mark.image-mark{font-family:Georgia,serif;font-size:74px;font-style:italic}
.publisher-mark.block{background:#bd1118;font-size:34px}.publisher-mark.script{font-style:italic;letter-spacing:.02em}
.publisher-mark.stacked{font-size:27px;line-height:.82}.publisher-mark.circle{width:82px;height:82px;margin:34px auto;border:5px solid #fff;border-radius:50%;padding:0;font-size:33px}
.publisher-mark.outlined{font-size:24px;letter-spacing:.1em;-webkit-text-stroke:1px #fff;color:transparent}
.publisher-mark.serif{font-family:Georgia,serif;font-size:24px;letter-spacing:.08em}.publisher-mark.boom{font-size:39px;transform:skew(-8deg)}
.publisher-mark.minimal{font-size:25px;letter-spacing:.18em}.publisher-mark.italic{font-size:48px;font-style:italic}
.publisher-mark.sun{font-size:25px;letter-spacing:.15em}
.publisher-body{padding:22px}
.publisher-body h3{margin:0;font-size:20px}
.publisher-body .country{margin:8px 0 18px;color:var(--red-bright);font-size:11px;font-weight:900;letter-spacing:.14em}
.meta{display:flex;justify-content:space-between;gap:10px;min-height:38px;margin-bottom:20px;color:#96969e;font-size:12px}
.meta strong{color:#fff}
.publisher-body button{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#ddd;font-size:11px;font-weight:900;letter-spacing:.08em}
.publisher-card:hover .publisher-body button{border-color:var(--red-bright);background:var(--red)}
.empty-state{padding:70px 20px;text-align:center;border:1px dashed #333;border-radius:12px;color:#8c8c94}
.empty-state strong,.empty-state span{display:block}.empty-state strong{margin-bottom:10px;color:#fff;font-size:20px}

@media(max-width:1200px){.publisher-grid{grid-template-columns:repeat(3,1fr)}.publisher-cloud{left:42%}.c1{font-size:44px}.c2{font-size:68px}}
@media(max-width:900px){.top{padding-inline:24px}.top nav a{display:none}.wrap{width:min(100% - 40px,1540px)}.publishers-page .hero{min-height:360px}.publishers-page .hero h1{font-size:58px}.publisher-cloud{inset:0 -15% 0 35%;opacity:.45}.publisher-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.wrap{width:min(100% - 28px,1540px)}.publishers-page .hero{min-height:320px}.publishers-page .hero h1{font-size:46px}.publishers-page .hero p{font-size:16px}.publisher-cloud{left:10%;right:-75%;opacity:.22}.search-row{flex-direction:column}.clear-filter{width:100%}.publisher-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;gap:14px}.publisher-mark{height:135px}}


/* 07_Profile */
:root{
  --red:#be0d0d;
  --red-bright:#d6282b;
  --bg:#0d0d0f;
  --panel:#161619;
  --panel-2:#1b1b1f;
  --line:rgba(255,255,255,.09);
  --muted:#96969f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#fff;font-family:Arial,Helvetica,sans-serif}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
.wrap{width:min(1540px,calc(100% - 80px));margin-inline:auto}
.eyebrow{display:block;margin-bottom:12px;color:#b7b7bf;font-size:11px;font-weight:900;letter-spacing:.2em}

.profile-page{min-height:75vh}
.profile-hero{
  position:relative;
  min-height:420px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 76% 40%,rgba(190,13,13,.27),transparent 31%),
    linear-gradient(120deg,#101013 0%,#151216 52%,#310708 100%);
  border-bottom:1px solid rgba(214,40,43,.22);
}
.hero-grid{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:70px;
}
.profile-identity{display:flex;align-items:center;gap:36px;max-width:960px}
.avatar-wrap{position:relative;flex:0 0 auto}
.avatar{
  width:164px;height:164px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),transparent 42%),
    linear-gradient(135deg,#2d0a0c,#101013);
  box-shadow:0 25px 60px rgba(0,0,0,.38),0 0 0 10px rgba(255,255,255,.025);
  font-size:48px;font-weight:950;letter-spacing:-.06em;
}
.online-dot{
  position:absolute;right:12px;bottom:17px;width:22px;height:22px;border:5px solid #151216;border-radius:50%;background:#39c56a
}
.identity-copy h1{margin:0;font-size:68px;line-height:.96;letter-spacing:-.055em}
.username{margin:12px 0 0;color:var(--red-bright);font-size:16px;font-weight:900}
.bio{max-width:680px;margin:20px 0 0;color:#b8b8c0;font-size:16px;line-height:1.65}
.profile-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.profile-tags span{padding:8px 11px;border:1px solid rgba(214,40,43,.3);border-radius:999px;background:rgba(190,13,13,.11);color:#d8d8de;font-size:10px;font-weight:900;letter-spacing:.1em}

.profile-actions{min-width:225px;display:grid;grid-template-columns:1fr 54px;gap:10px}
.primary-action,.icon-action{height:50px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:#161619;font-size:11px;font-weight:950;letter-spacing:.08em}
.primary-action{background:var(--red);border-color:var(--red-bright)}
.primary-action:hover{background:var(--red-bright)}
.icon-action:hover{border-color:var(--red-bright)}
.member-card{grid-column:1/-1;margin-top:10px;padding:18px;border:1px solid var(--line);border-radius:8px;background:rgba(13,13,15,.52)}
.member-card span,.member-card strong{display:block}
.member-card span{margin-bottom:7px;color:#898991;font-size:9px;font-weight:900;letter-spacing:.18em}
.member-card strong{font-size:13px}

.hero-pattern{position:absolute;right:-30px;bottom:-20px;display:flex;flex-direction:column;align-items:flex-end;opacity:.055;transform:rotate(-5deg);pointer-events:none}
.hero-pattern span{font-size:92px;font-weight:950;line-height:.76;letter-spacing:-.08em}

.profile-nav-wrap{position:sticky;top:0;z-index:9;border-bottom:1px solid var(--line);background:rgba(13,13,15,.93);backdrop-filter:blur(14px)}
.profile-nav{display:flex;gap:2px;overflow-x:auto}
.profile-tab{position:relative;padding:22px 20px;border:0;background:transparent;color:#85858e;font-size:11px;font-weight:950;letter-spacing:.1em;white-space:nowrap}
.profile-tab::after{content:"";position:absolute;right:20px;bottom:-1px;left:20px;height:2px;background:transparent}
.profile-tab:hover,.profile-tab.active{color:#fff}
.profile-tab.active::after{background:var(--red-bright)}

.dashboard{padding-top:42px;padding-bottom:85px}
.tab-panel{display:none}
.tab-panel.active{display:block}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat-card{
  position:relative;min-height:122px;display:flex;align-items:center;gap:18px;padding:22px;
  overflow:hidden;border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(145deg,#19191d,#131315);
}
.stat-card::after{content:"";position:absolute;right:-35px;bottom:-50px;width:110px;height:110px;border-radius:50%;background:rgba(190,13,13,.08)}
.stat-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:8px;background:rgba(190,13,13,.14);color:var(--red-bright);font-size:22px}
.stat-card div strong,.stat-card div span{display:block}
.stat-card div strong{font-size:30px;line-height:1}
.stat-card div span{margin-top:7px;color:#a1a1aa;font-size:9px;font-weight:900;letter-spacing:.15em}
.stat-card small{position:absolute;right:18px;bottom:16px;color:#6f6f78;font-size:10px}

.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr);gap:22px;margin-bottom:22px}
.panel{border:1px solid var(--line);border-radius:11px;background:linear-gradient(150deg,#18181c,#131315)}
.panel-heading{display:flex;justify-content:space-between;align-items:end;padding:25px 26px 20px;border-bottom:1px solid var(--line)}
.panel-heading.compact{border-bottom:0}
.panel-heading h2{margin:0;font-size:24px}
.text-button{padding:0;border:0;background:transparent;color:#9b9ba4;font-size:10px;font-weight:950;letter-spacing:.1em}
.text-button:hover{color:var(--red-bright)}

.timeline{padding:4px 26px 18px}
.timeline-item{position:relative;display:flex;gap:16px;padding:19px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.timeline-item:last-child{border-bottom:0}
.timeline-icon{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(214,40,43,.23);border-radius:50%;background:rgba(190,13,13,.09);color:var(--red-bright)}
.timeline-item p{margin:1px 0 7px;color:#c8c8cf;font-size:13px}
.timeline-item p strong{color:#fff}
.timeline-item time{color:#707079;font-size:10px}

.taste-list{padding:4px 26px 20px}
.taste-row{display:grid;grid-template-columns:90px 1fr 38px;gap:12px;align-items:center;margin:17px 0}
.taste-row span{color:#b0b0b8;font-size:11px}
.taste-row strong{text-align:right;font-size:10px}
.bar{height:6px;overflow:hidden;border-radius:999px;background:#2a2a2f}
.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),var(--red-bright))}
.taste-note{margin:0 26px 26px;padding:18px;border-left:3px solid var(--red-bright);background:rgba(190,13,13,.08)}
.taste-note span,.taste-note strong{display:block}
.taste-note span{margin-bottom:7px;color:#898991;font-size:9px;font-weight:900;letter-spacing:.14em}
.taste-note strong{font-size:15px}

.favorites-panel,.collections-panel{margin-bottom:22px}
.comic-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:17px;padding:24px 26px 28px}
.comic-card{min-width:0}
.comic-cover{position:relative;aspect-ratio:2/3;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:18px;border-radius:7px;box-shadow:0 16px 28px rgba(0,0,0,.32);transition:transform .25s ease}
.comic-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.82))}
.comic-cover span,.comic-cover small{position:relative;z-index:1;display:block}
.comic-cover span{font-size:19px;font-weight:950;line-height:.9;letter-spacing:-.04em}
.comic-cover small{margin-top:8px;color:#ddd;font-size:7px;letter-spacing:.08em}
.comic-card:hover .comic-cover{transform:translateY(-6px)}
.cover-a{background:linear-gradient(145deg,#7c4a23,#16100d 55%,#040404)}
.cover-b{background:linear-gradient(145deg,#b7a36c,#302316 52%,#0b0805)}
.cover-c{background:linear-gradient(145deg,#a8a04f,#4b4724 47%,#101009)}
.cover-d{background:linear-gradient(145deg,#813031,#231113 50%,#080607)}
.cover-e{background:linear-gradient(145deg,#4e6b72,#1b2a2f 48%,#080d0e)}
.comic-info{padding-top:13px}
.comic-info h3{margin:0 0 6px;font-size:14px}
.comic-info p{margin:0;color:#85858e;font-size:10px}

.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;padding:24px 26px 28px}
.collection-card{position:relative;display:grid;grid-template-columns:86px 1fr;align-items:center;gap:18px;min-height:125px;padding:20px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#141417;transition:border-color .25s ease,transform .25s ease}
.collection-card:hover{transform:translateY(-4px);border-color:rgba(214,40,43,.45)}
.collection-card h3{margin:0 0 8px;font-size:15px}
.collection-card p{margin:0;color:#83838c;font-size:11px}
.collection-stack{position:relative;width:72px;height:86px}
.collection-stack i{position:absolute;inset:0;border-radius:3px;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.collection-stack i:nth-child(1){transform:rotate(-8deg) translate(-5px,2px)}
.collection-stack i:nth-child(2){transform:rotate(5deg) translate(5px,1px)}
.collection-stack i:nth-child(3){transform:translateY(3px)}
.stack-one i:nth-child(1){background:#6b211f}.stack-one i:nth-child(2){background:#9b602e}.stack-one i:nth-child(3){background:#251416}
.stack-two i:nth-child(1){background:#3c4b28}.stack-two i:nth-child(2){background:#7a7140}.stack-two i:nth-child(3){background:#24271a}
.stack-three i:nth-child(1){background:#2c4355}.stack-three i:nth-child(2){background:#5a2d42}.stack-three i:nth-child(3){background:#171d29}
.visibility{position:absolute;right:15px;bottom:14px;color:#686870;font-size:8px;font-weight:900;letter-spacing:.1em}

.placeholder-panel{min-height:420px;padding:55px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(145deg,#18181c,#121214)}
.placeholder-panel h2{margin:0 0 15px;font-size:42px}
.placeholder-panel p{max-width:680px;color:#9999a2;line-height:1.6}

@media(max-width:1180px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-grid{grid-template-columns:1fr}
  .comic-strip{grid-template-columns:repeat(3,1fr)}
  .comic-card:nth-child(n+4){display:none}
  .collection-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .wrap{width:min(100% - 40px,1540px)}
  .profile-hero{min-height:500px}
  .hero-grid{align-items:flex-start;flex-direction:column;gap:30px;padding-block:60px}
  .profile-actions{width:100%;max-width:360px}
  .hero-pattern{opacity:.035}
}
@media(max-width:680px){
  .wrap{width:min(100% - 28px,1540px)}
  .profile-identity{align-items:flex-start;flex-direction:column;gap:24px}
  .avatar{width:116px;height:116px;font-size:36px}
  .identity-copy h1{font-size:46px}
  .bio{font-size:14px}
  .stats-grid{grid-template-columns:1fr}
  .comic-strip{grid-template-columns:repeat(2,1fr)}
  .comic-card:nth-child(3){display:none}
  .panel-heading{align-items:flex-start;gap:16px}
  .taste-row{grid-template-columns:78px 1fr 34px}
  .collection-card{grid-template-columns:70px 1fr;padding:16px}
}


/* 08_Login */
:root{
  --red:#be0d0d;
  --red-bright:#d6282b;
  --bg:#0d0d0f;
  --panel:#17171a;
  --line:rgba(255,255,255,.10);
  --muted:#96969f;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
button,input{font:inherit}
button{cursor:pointer}
.eyebrow{
  display:block;
  margin-bottom:13px;
  color:#bcbcc4;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2em;
}
.login-top{
  position:fixed;
  inset:0 0 auto 0;
  z-index:20;
  background:linear-gradient(180deg,rgba(13,13,15,.96),rgba(13,13,15,.78),transparent);
  border-bottom:0;
}
.login-top .logo{display:flex;align-items:center}
.login-page{min-height:100vh}
.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(470px,.75fr);
}
.login-visual{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:150px 7vw 82px;
  background:
    radial-gradient(circle at 72% 28%,rgba(214,40,43,.28),transparent 24%),
    linear-gradient(145deg,#141015 0%,#221013 45%,#09090b 100%);
}
.login-visual::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000);
}
.visual-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 55%,rgba(13,13,15,.32) 78%,rgba(13,13,15,.86)),
    linear-gradient(180deg,rgba(13,13,15,.1),transparent 38%,rgba(13,13,15,.58));
}
.visual-content{
  position:relative;
  z-index:4;
  max-width:760px;
}
.visual-content .eyebrow{
  margin-bottom:24px;
}
.visual-content h1{
  margin:0;
  font-size:clamp(62px,6.3vw,108px);
  line-height:.90;
  letter-spacing:-.065em;
}
.visual-content p{
  max-width:620px;
  margin:26px 0 0;
  color:#c2c2c9;
  font-size:17px;
  line-height:1.65;
}
.visual-stats{
  display:flex;
  gap:44px;
  margin-top:36px;
}
.visual-stats div{position:relative}
.visual-stats div:not(:last-child)::after{
  content:"";
  position:absolute;
  top:2px;
  right:-22px;
  width:1px;
  height:39px;
  background:rgba(255,255,255,.12);
}
.visual-stats strong,.visual-stats span{display:block}
.visual-stats strong{font-size:24px}
.visual-stats span{
  margin-top:7px;
  color:#8f8f98;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}
.comic-panels{
  position:absolute;
  inset:115px 4vw auto auto;
  width:min(48vw,690px);
  height:470px;
  opacity:.7;
  transform:rotate(-3deg);
}
.panel-card{
  position:absolute;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  box-shadow:0 24px 50px rgba(0,0,0,.36);
}
.panel-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 35%,rgba(0,0,0,.76)),
    repeating-linear-gradient(125deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px);
}
.panel-card span{
  position:relative;
  z-index:1;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
}
.p1{left:4%;top:8%;width:30%;height:61%;background:linear-gradient(145deg,#7d2a22,#241112 60%,#090708)}
.p2{left:31%;top:0;width:31%;height:46%;background:linear-gradient(145deg,#4b6469,#19272b 58%,#090d0e)}
.p3{right:3%;top:17%;width:34%;height:64%;background:linear-gradient(145deg,#9a7d39,#332b16 58%,#0b0a06)}
.p4{left:27%;bottom:0;width:38%;height:42%;background:linear-gradient(145deg,#53334f,#211521 60%,#090709)}

.login-panel-wrap{
  position:relative;
  z-index:8;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:130px 58px 60px;
  background:
    radial-gradient(circle at 100% 0,rgba(190,13,13,.11),transparent 28%),
    #0f0f12;
  border-left:1px solid rgba(255,255,255,.07);
}
.login-panel{
  width:min(100%,510px);
  padding:44px;
  border:1px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.028),transparent 42%),
    #17171a;
  box-shadow:0 32px 80px rgba(0,0,0,.42);
}
.panel-head h2{
  margin:0;
  font-size:46px;
  letter-spacing:-.04em;
}
.panel-head p{
  margin:14px 0 0;
  color:#9999a2;
  font-size:14px;
  line-height:1.55;
}
.login-form{margin-top:34px}
.field{margin-bottom:21px}
.field label{
  display:block;
  margin-bottom:9px;
  color:#c5c5cc;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.input-wrap{position:relative}
.input-wrap input{
  width:100%;
  height:56px;
  padding:0 90px 0 48px;
  border:1px solid #34343a;
  border-radius:8px;
  outline:none;
  background:#111114;
  color:#fff;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.input-wrap input::placeholder{color:#65656d}
.input-wrap input:focus{
  border-color:var(--red-bright);
  background:#141417;
  box-shadow:0 0 0 4px rgba(214,40,43,.10);
}
.input-wrap input.invalid{border-color:#ed5457}
.field-icon{
  position:absolute;
  left:17px;
  top:50%;
  z-index:1;
  transform:translateY(-50%);
  color:#6e6e77;
  font-size:17px;
}
.lock-icon{font-size:11px}
.password-toggle{
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  padding:6px;
  border:0;
  background:transparent;
  color:#8b8b94;
  font-size:9px;
  font-weight:950;
  letter-spacing:.1em;
}
.password-toggle:hover{color:#fff}
.field-error{
  min-height:14px;
  display:block;
  margin-top:7px;
  color:#ef6a6d;
  font-size:10px;
}
.form-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:4px 0 24px;
}
.remember{
  display:flex;
  align-items:center;
  gap:9px;
  color:#aaaab2;
  font-size:11px;
  cursor:pointer;
}
.remember input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.custom-check{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border:1px solid #3c3c43;
  border-radius:4px;
  background:#111114;
}
.remember input:checked + .custom-check{
  border-color:var(--red-bright);
  background:var(--red);
}
.remember input:checked + .custom-check::after{
  content:"✓";
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.forgot-link,.register-copy a{
  color:var(--red-bright);
  font-size:10px;
  font-weight:950;
  letter-spacing:.07em;
  text-decoration:none;
}
.forgot-link:hover,.register-copy a:hover{color:#ff4a4d}
.submit-button{
  width:100%;
  height:56px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 21px;
  border:1px solid var(--red-bright);
  border-radius:8px;
  background:linear-gradient(90deg,var(--red),#9f0b0d);
  color:#fff;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
  box-shadow:0 14px 30px rgba(190,13,13,.17);
}
.submit-button:hover{background:linear-gradient(90deg,var(--red-bright),var(--red))}
.submit-button b{font-size:21px}
.separator{
  position:relative;
  margin:27px 0;
  text-align:center;
}
.separator::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:var(--line);
}
.separator span{
  position:relative;
  padding:0 12px;
  background:#17171a;
  color:#696972;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.social-login{
  width:100%;
  height:52px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  border:1px solid #35353b;
  border-radius:8px;
  background:#111114;
  color:#d4d4da;
  font-size:11px;
  font-weight:800;
}
.social-login:hover{border-color:#5a5a63;background:#151518}
.social-mark{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#1d1d20;
  font-weight:950;
}
.register-copy{
  margin:25px 0 0;
  text-align:center;
  color:#8d8d96;
  font-size:11px;
}
.register-copy a{margin-left:6px}
.form-message{
  min-height:18px;
  margin-top:16px;
  text-align:center;
  color:#72d492;
  font-size:11px;
}
.form-message.show-error{display:block;color:#ff989a;border-color:rgba(214,40,43,.35);background:rgba(190,13,13,.09)}
.form-message.show-success{display:block;color:#72d492;border-color:rgba(114,212,146,.3);background:rgba(114,212,146,.07)}
.security-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:23px;
  padding-top:21px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#686870;
}
.security-note span{font-size:8px}
.security-note p{margin:0;font-size:9px}

@media(max-width:1120px){
  .login-shell{grid-template-columns:1fr 500px}
  .login-visual{padding-left:5vw;padding-right:5vw}
  .visual-content h1{font-size:68px}
  .comic-panels{right:-8%;opacity:.5}
}
@media(max-width:900px){
  .login-shell{display:block}
  .login-visual{
    min-height:520px;
    padding:150px 32px 60px;
  }
  .login-panel-wrap{
    min-height:auto;
    padding:60px 24px 70px;
    border-left:0;
    border-top:1px solid var(--line);
  }
  .comic-panels{right:-20%;width:75vw;opacity:.35}
  .visual-content h1{font-size:60px}
}
@media(max-width:620px){
  .login-top{padding-inline:20px}
  .login-top nav a{display:none}
  .login-visual{min-height:470px;padding:135px 22px 48px}
  .visual-content h1{font-size:46px}
  .visual-content p{font-size:14px}
  .visual-stats{gap:25px}
  .visual-stats div:not(:last-child)::after{right:-13px}
  .comic-panels{right:-52%;width:110vw;opacity:.22}
  .login-panel-wrap{padding:42px 14px 55px}
  .login-panel{padding:30px 22px}
  .panel-head h2{font-size:38px}
  .form-options{align-items:flex-start;flex-direction:column}
}