/* === CIVILIZATIONS NEW — CRYSTAL FRAME EDITION === */
.civ-main { min-height:100vh; overflow-x:hidden; }

/* ── Nav scroll ── */
.nav { transition:background .3s,box-shadow .3s; }
.nav.scrolled {
  background:rgba(5,8,18,.88);
  backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 4px 28px rgba(0,0,0,.4);
}

/* ── Crystal Frame Section ── */
.cnew-top { padding:40px 0 0; }
.cnew-frame-wrap { width:min(1240px,100vw); margin:0 auto; }

.cnew-frame-bg { position: relative; isolation:isolate; }
.cnew-frame-img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  filter:none !important;
  box-shadow:none !important;

  position: relative;
  z-index: 20;   /* FRAME ÖNDE */
}


/* Window inside the frame — pixel-tuned to match the black area in the image */
.cnew-window{
  left: 16% !important;
  right: 15% !important;
  top: 20% !important;
  bottom: 28% !important;
}



/* Slider track */
.cnew-track {
  display:flex;
  height:100%;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

/* Individual slide */
.cnew-slide {
  flex:0 0 100%;
  height:100%;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.cnew-slide-img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s ease;
}
.cnew-slide:hover .cnew-slide-img { transform:scale(1.04); }

.cnew-slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.3) 45%,rgba(0,8,28,.12) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(14px,3%,32px) clamp(16px,3.5%,36px);
}
.cnew-slide-title {
  font-size:clamp(15px,2.5vw,28px);
  font-weight:800;
  color:#fff;
  margin:0 0 5px;
  letter-spacing:-.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.cnew-slide-period {
  font-size:clamp(11px,1.5vw,15px);
  color:rgba(100,200,255,.9);
  font-weight:600;
}

/* Arrows */
.cnew-arrow {
  position:absolute;
  top:50%; transform:translateY(-66%);
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(0,20,60,.65);
  border:2px solid rgba(100,200,255,.45);
  color:rgba(100,200,255,.95);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10;
  backdrop-filter:blur(8px);
  box-shadow:0 0 20px rgba(50,140,255,.3),0 0 40px rgba(50,140,255,.12);
  transition:all .25s;
}
.cnew-arrow:hover {
  background:rgba(0,50,150,.75);
  border-color:rgba(100,200,255,.9);
  box-shadow:0 0 32px rgba(50,140,255,.55),0 0 64px rgba(50,140,255,.2);
  transform:translateY(-66%) scale(1.08);
}
.cnew-prev { left:4.5%; }
.cnew-next { right:4.5%; }

/* Slide counter */
.cnew-counter {
  position:absolute;
  bottom:25.5%; left:50%; transform:translateX(-50%);
  padding:5px 14px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(100,200,255,.25);
  border-radius:16px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.85);
  z-index:5;
  pointer-events:none;
  letter-spacing:.5px;
}

/* ── Crystal Timeline ── */
.cnew-timeline { padding:0 5% 4px; }
.cnew-tl-inner {
  display:flex;
  align-items:center;
  gap:0;
  padding:10px 0;
}
.cnew-tl-dot {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  background:none; border:none;
  cursor:pointer; padding:4px 10px;
  border-radius:8px;
  transition:all .25s;
  flex-shrink:0;
}
.cnew-tl-dot:hover { transform:translateY(-3px); }
.cnew-tl-crystal {
  width:13px; height:13px;
  background:rgba(100,200,255,.3);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  transition:all .25s;
  display:block;
}
.cnew-tl-dot.active .cnew-tl-crystal {
  background:rgba(100,200,255,.95);
  box-shadow:0 0 14px rgba(100,200,255,.75);
  transform:scale(1.5);
}
.cnew-tl-label {
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.5);
  letter-spacing:.4px;
  white-space:nowrap;
  transition:color .25s;
}
.cnew-tl-dot.active .cnew-tl-label,
.cnew-tl-dot:hover .cnew-tl-label { color:rgba(100,200,255,.95); }
.cnew-tl-line {
  flex:1;
  height:2px;
  background:linear-gradient(90deg,rgba(100,200,255,.15),rgba(100,200,255,.45),rgba(100,200,255,.15));
  min-width:20px;
}

/* ── Era Header ── */
.cnew-era-header { padding:48px 0 28px; }
.cnew-era-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.cnew-era-left { flex:1; min-width:0; }
.cnew-era-pill {
  display:inline-block;
  padding:4px 14px;
  background:rgba(100,200,255,.1);
  border:1px solid rgba(100,200,255,.25);
  border-radius:16px;
  font-size:12px;
  font-weight:700;
  color:rgba(100,200,255,.9);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:12px;
}
.cnew-era-title {
  font-size:clamp(24px,3.5vw,40px);
  font-weight:800;
  color:#fff;
  margin:0 0 8px;
  letter-spacing:-.02em;
}
.cnew-era-period {
  font-size:15px;
  color:rgba(100,200,255,.85);
  font-weight:600;
  margin:0 0 10px;
}
.cnew-era-blurb {
  font-size:16px;
  color:rgba(255,255,255,.7);
  line-height:1.65;
  margin:0;
  max-width:640px;
}
.cnew-cta-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  background:linear-gradient(135deg,#4f8fff,#5b5eff);
  border-radius:12px;
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  box-shadow:0 8px 28px rgba(80,120,255,.38);
  transition:all .25s;
}
.cnew-cta-btn:hover {
  background:linear-gradient(135deg,#6fa3ff,#7475ff);
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(80,120,255,.5);
}

/* ── Civs Grid ── */
.cnew-civs-section { padding:0 0 72px; }
.cnew-civs-title {
  font-size:20px;
  font-weight:700;
  color:rgba(255,255,255,.88);
  margin:0 0 24px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}
.cnew-civs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:18px;
}

/* Civ cards */
.cnew-civ-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  transition:all .3s;
  position:relative;
}
.cnew-civ-card:hover {
  border-color:rgba(100,200,255,.35);
  transform:translateY(-4px);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}
.cnew-card-img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  transition:transform .4s;
  background:rgba(0,0,0,.3);
}
.cnew-civ-card:hover .cnew-card-img { transform:scale(1.07); }
.cnew-card-body { padding:15px 16px 18px; }
.cnew-card-name {
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:0 0 5px;
}
.cnew-card-when {
  font-size:12px;
  color:rgba(100,200,255,.85);
  font-weight:600;
  margin:0 0 8px;
}

.cnew-card-summary {
  font-size:13px;
  color:rgba(255,255,255,.62);
  line-height:1.5;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cnew-card-cta {
  position:absolute;
  bottom:14px; right:14px;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(100,150,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(100,200,255,.8);
  opacity:0;
  transform:translateX(-6px);
  transition:all .28s;
}
.cnew-civ-card:hover .cnew-card-cta { opacity:1; transform:translateX(0); }

/* ── Bottom CTA ── */
.cnew-bottom-cta { padding:0 0 96px; }
.cnew-bcta-card {
  padding:56px 64px;
  background:linear-gradient(135deg,rgba(80,120,255,.13),rgba(100,60,200,.07));
  border:2px solid rgba(100,150,255,.25);
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cnew-bcta-text h3 {
  font-size:clamp(22px,3vw,34px);
  font-weight:800;
  color:#fff;
  margin:0 0 10px;
  letter-spacing:-.02em;
}
.cnew-bcta-text h3 em { font-style:normal; color:rgba(100,200,255,.95); }
.cnew-bcta-text p { font-size:16px; color:rgba(255,255,255,.65); margin:0; max-width:540px; }
.cnew-bcta-btns { display:flex; gap:14px; flex-wrap:wrap; }
.cnew-cta-btn-ghost {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:15px 24px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:rgba(255,255,255,.9);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:all .25s;
  white-space:nowrap;
}
.cnew-cta-btn-ghost:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }

/* ── Detail Panel ── */
.cnew-overlay {
  position:fixed; inset:0;
  z-index:200;
  pointer-events:none;
  background:rgba(0,0,0,0);
  transition:background .3s;
}
.cnew-overlay.open {
  pointer-events:all;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
}
.cnew-panel {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%) scale(.92);
  width:min(620px, 94vw);
  max-height:88vh;
  background:rgba(6,9,20,.97);
  border:1px solid rgba(100,200,255,.18);
  border-radius:20px;
  opacity:0;
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .3s;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(100,200,255,.2) transparent;
}
.cnew-overlay.open .cnew-panel { transform:translate(-50%, -50%) scale(1); opacity:1; }
.cnew-panel-close {
  position:sticky;
  top:14px; float:right; margin:14px 14px 0 0;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.75);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5; transition:all .2s;
}
.cnew-panel-close:hover { background:rgba(255,60,60,.2); border-color:rgba(255,60,60,.4); color:#fff; }
#cnewPanelBody { padding:22px 26px 56px; clear:both; }

/* Panel content styles */
.pd-img {
  width:100%; aspect-ratio:16/9;
  object-fit:cover; border-radius:12px;
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,.1);
}
.pd-name { font-size:26px; font-weight:800; color:#fff; margin:0 0 8px; letter-spacing:-.02em; }
.pd-when { font-size:13px; color:rgba(100,200,255,.9); font-weight:600; margin:0 0 4px; }
.pd-where { font-size:13px; color:rgba(255,255,255,.6); margin:0 0 22px; line-height:1.5; }
.pd-label {
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  color:rgba(100,200,255,.65);
  margin:20px 0 8px;
}
.pd-text { font-size:14px; line-height:1.7; color:rgba(255,255,255,.75); margin:0; white-space:pre-line; }
.pd-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.pd-list li {
  display:flex; align-items:flex-start; gap:9px;
  font-size:13px; color:rgba(255,255,255,.77); line-height:1.5;
}
.pd-list li::before { content:'◆'; color:rgba(100,200,255,.65); font-size:9px; margin-top:5px; flex-shrink:0; }
.pd-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.pd-gallery img {
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:8px; border:1px solid rgba(255,255,255,.1);
  transition:transform .3s; cursor:pointer;
}
.pd-gallery img:hover { transform:scale(1.05); }
.pd-cta { margin-top:28px; display:flex; flex-direction:column; gap:10px; }
.pd-cta-main {
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:15px;
  background:linear-gradient(135deg,#4f8fff,#5b5eff);
  border-radius:12px; color:#fff;
  font-size:15px; font-weight:700;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(80,120,255,.3);
  transition:all .25s;
}
.pd-cta-main:hover { background:linear-gradient(135deg,#6fa3ff,#7475ff); transform:translateY(-2px); }
.pd-cta-sec {
  display:flex; align-items:center; justify-content:center;
  padding:13px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  color:rgba(255,255,255,.82);
  font-size:14px; font-weight:600;
  text-decoration:none; transition:all .25s;
}
.pd-cta-sec:hover { background:rgba(255,255,255,.09); }

/* ── Responsive ── */
@media (max-width:900px){
  .cnew-window { left:11%; right:11%; top:23.5%; bottom:22%; }
  .cnew-prev { left:2%; }
  .cnew-next { right:2%; }
  .cnew-arrow { width:40px; height:40px; }
  .cnew-era-row { flex-direction:column; align-items:flex-start; }
  .cnew-cta-btn { align-self:stretch; justify-content:center; }
  .cnew-bcta-card { flex-direction:column; padding:36px 28px; text-align:center; }
  .cnew-bcta-btns { justify-content:center; }
  .cnew-civs-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:13px; }
}
@media (max-width:520px){
  .cnew-window { left:10%; right:10%; top:22%; bottom:21%; }
  .cnew-tl-label { font-size:9px; }
}