/* Pop-Art / Comic landing design for [fotonu_yukle_popart]
   v2: matches step-upload-popart.php structure (.psf-popart-*) and aims to mirror the reference comic layout
*/

:root{
  --psf-ink:#111;
  --psf-sky1:#bfe3ff;
  --psf-sky2:#9fd2ff;
  --psf-paper:#f6eddc;
  --psf-yellow:#ffcc00;
  --psf-orange:#ff9a00;
  --psf-red:#ff3b3b;
  --psf-blue:#2f6fe6;
  --psf-shadow: 10px 10px 0 rgba(0,0,0,.85);
}

.psf-popart-wrap{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--psf-ink);
}

/* Full hero panel like the reference */
.psf-popart-hero{
  position: relative;
  border: 3px solid var(--psf-ink);
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(0,0,0,.22) 1.3px, transparent 1.35px) 0 0/18px 18px,
    linear-gradient(135deg, var(--psf-sky1), var(--psf-sky2));
  box-shadow: 0 16px 0 rgba(0,0,0,.22);
}

.psf-popart-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 22px 26px;
  position: relative;
}

/* small stars decoration */
.psf-popart-hero::after{
  content:"";
  position:absolute;
  right:-30px;
  top:-30px;
  width:220px;
  height:220px;
  background:
    radial-gradient(circle at 30% 40%, #ffe066 0 16px, transparent 17px),
    radial-gradient(circle at 65% 25%, #ffcc00 0 10px, transparent 11px),
    radial-gradient(circle at 70% 70%, #ff3b3b 0 8px, transparent 9px);
  opacity:.9;
  transform: rotate(8deg);
}

/* Brand line */
.psf-popart-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  letter-spacing:.2px;
  margin-bottom: 14px;
}
.psf-popart-brand .cam{
  width: 34px; height: 26px;
  border: 3px solid var(--psf-ink);
  border-radius: 8px;
  background:#fff;
  position: relative;
  flex:0 0 auto;
}
.psf-popart-brand .cam::before{
  content:"";
  width: 10px; height: 10px;
  border: 3px solid var(--psf-ink);
  border-radius: 50%;
  position: absolute;
  left: 8px; top: 5px;
  background:#fff;
}

/* Explosion title */
.psf-popart-boom{
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}
.psf-popart-boom::before{
  content:"";
  position:absolute;
  inset:-18px -22px;
  background: linear-gradient(90deg, #3b82f6, #ff3b3b, #ffcc00);
  border: 4px solid var(--psf-ink);
  border-radius: 18px;
  box-shadow: var(--psf-shadow);
  /* jagged comic edge */
  clip-path: polygon(
    0% 18%, 6% 10%, 14% 14%, 22% 6%, 30% 12%, 38% 5%, 46% 12%, 54% 6%,
    62% 12%, 70% 4%, 78% 12%, 86% 6%, 94% 14%, 100% 10%,
    98% 26%, 100% 38%, 95% 44%, 100% 52%, 95% 58%, 100% 66%, 96% 74%,
    100% 86%, 92% 84%, 86% 92%, 78% 86%, 70% 96%, 62% 88%, 54% 96%,
    46% 88%, 38% 96%, 30% 88%, 22% 96%, 14% 88%, 6% 94%, 0% 86%,
    3% 74%, 0% 66%, 4% 58%, 0% 52%, 4% 44%, 0% 38%, 4% 26%
  );
  z-index:0;
}
.psf-popart-boom h1{
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 18px 20px;
  line-height: 1.02;
  font-weight: 1000;
  text-transform: uppercase;
  font-size: clamp(26px, 4.0vw, 56px);
  color:#fff;
  text-shadow: 3px 3px 0 #000;
}
.psf-popart-boom h1 span{
  color:#111;
  text-shadow:none;
}

/* subtitle */
.psf-popart-sub{
  margin: 12px 0 18px;
  font-weight: 700;
  opacity: .95;
  font-size: clamp(14px, 1.6vw, 18px);
}
.psf-popart-sub strong{ font-weight: 1000; }

/* 2-column layout like the ref */
.psf-popart-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
  margin-top: 6px;
}

/* Cards */
.psf-popart-card{
  background: rgba(246,237,220,.92);
  border: 3px solid var(--psf-ink);
  border-radius: 18px;
  box-shadow: 8px 8px 0 rgba(0,0,0,.85);
  padding: 16px;
}
.psf-popart-card h2{
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 1000;
  display:flex;
  align-items:center;
  gap:10px;
}
.psf-popart-card h2 .ico{
  width: 34px; height: 34px;
  border: 3px solid var(--psf-ink);
  border-radius: 10px;
  background:#fff;
  display:grid;
  place-items:center;
  font-size: 18px;
}
.psf-popart-right h3{
  margin: 2px 0 12px;
  text-align:center;
  font-size: 24px;
  font-weight: 1000;
}

/* Upload drop area */
.psf-popart-drop{
  background: #fff;
  border: 3px dashed rgba(0,0,0,.45);
  border-radius: 16px;
  padding: 18px;
  text-align:center;
  cursor:pointer;
}
.psf-popart-drop h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

/* Consent */
.psf-popart-consent{
  margin-top: 12px;
  font-weight: 800;
  font-size: 13px;
}
.psf-popart-consent label{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.psf-popart-consent input{ margin-top:3px; }

/* Make the consent line look like the highlighted strip in the reference */
.psf-popart-consent{
  background: rgba(255, 238, 160, .35);
  border: 3px solid var(--psf-ink);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.85);
}

/* Buttons */
.psf-popart-btn{
  appearance:none;
  border: 3px solid var(--psf-ink);
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 1000;
  font-size: 16px;
  cursor:pointer;
  background: linear-gradient(180deg, #ffe57a, var(--psf-yellow), var(--psf-orange));
  box-shadow: 6px 6px 0 rgba(0,0,0,.85);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  color:#000;
  width: min(340px, 100%);
}
.psf-popart-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter: grayscale(.2);
}
.psf-popart-btn:active{
  transform: translateY(3px);
  box-shadow: 3px 3px 0 rgba(0,0,0,.85);
}

/* Style pills block (top right in reference is thumbnails; we'll do bold pills now) */
.psf-popart-styles{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.psf-popart-style{
  border: 3px solid var(--psf-ink);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  box-shadow: 5px 5px 0 rgba(0,0,0,.85);
  overflow:hidden;
  position: relative;
  min-height: 46px;
  display:grid;
  place-items:center;
}
.psf-popart-style .tag{
  font-weight: 1000;
  padding: 8px 10px;
}

/* Desktop image style cards (like your reference) */
.psf-popart-stylecards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.psf-popart-stylecard{
  border: 3px solid var(--psf-ink);
  border-radius: 14px;
  background:#fff;
  overflow:hidden;
  box-shadow: 5px 5px 0 rgba(0,0,0,.85);
}
.psf-popart-stylecard img{
  width:100%;
  height: 96px;
  object-fit: cover;
  display:block;
}
.psf-popart-stylecard .label{
  text-align:center;
  font-weight: 1000;
  color:#fff;
  padding: 8px 10px;
}
.psf-popart-stylecard .label-1{ background:#ff4b8b; }
.psf-popart-stylecard .label-2{ background:#00a9e6; }
.psf-popart-stylecard .label-3{ background:#35c76f; }
.psf-popart-stylecard .label-4{ background:#ff7b2c; }

/* Show desktop cards on wide screens, keep your mobile pills on small screens */
.psf-popart-styles--desktop{ display:grid; }
.psf-popart-styles--mobile{ display:none; }

/* Trust boxes */
.psf-popart-trust{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.psf-popart-trust .item{
  border: 3px solid var(--psf-ink);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  box-shadow: 5px 5px 0 rgba(0,0,0,.85);
  padding: 10px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.psf-popart-trust .item .ico{
  width: 34px; height: 34px;
  border: 3px solid var(--psf-ink);
  border-radius: 12px;
  background:#fff;
  display:grid;
  place-items:center;
  font-weight: 1000;
}
.psf-popart-trust .item b{
  display:block;
  font-weight: 1000;
}
.psf-popart-trust .item small{
  display:block;
  opacity:.85;
  font-weight: 800;
}

/* CTA */
.psf-popart-cta{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}
.psf-popart-cta .psf-popart-btn{
  width: 100%;
  max-width: 420px;
}

/* Make the upload card's inner button row centered */
.psf-popart-card > div[style*="margin-top:14px"]{
  text-align:center;
}

/* Responsive */
@media (max-width: 900px){
  .psf-popart-grid{ grid-template-columns: 1fr; }
  .psf-popart-hero::after{ opacity:.6; }

  /* Mobile: SHOW image cards (2x2). */
  .psf-popart-styles--desktop{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .psf-popart-stylecard img{
    height: 92px !important;
    object-fit: cover !important;
  }
  .psf-popart-stylecard .label{
    font-size: 8px !important;
    padding: 8px 10px !important;
  }

  /* Hide pill layout on mobile */
  .psf-popart-styles--mobile{ display:none !important; }
}




.psf-popart-stylecard{
  position: relative;
}

.psf-popart-stylecard .label{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 3;
}