* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(to bottom, #fff1f2, #ffffff); color: #1e293b; }
.container { width: min(1200px, calc(100% - 32px)); margin: 0 auto; }
.header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid #ffe4e6; }
.header-inner, .admin-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; }
.header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.site-title { font-size: 28px; color: #be185d; display: block; }
.site-subtitle { color: #64748b; }
.hero { padding: 56px 0 28px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; }
.badge { display: inline-block; background: #ffe4e6; color: #be185d; padding: 8px 14px; border-radius: 999px; font-size: 14px; margin-bottom: 16px; }
.hero-title { margin: 0; font-size: 52px; line-height: 1.08; }
.hero-text { font-size: 18px; color: #475569; line-height: 1.6; }
.hero-image { width: 100%; height: 380px; border-radius: 28px; object-fit: cover; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); }
.cta, .secondary-button, .status-link, .danger-button { display: inline-block; text-decoration: none; color: white; padding: 12px 18px; border-radius: 18px; font-weight: bold; border: 0; cursor: pointer; }
.cta { background: #e11d48; }
.secondary-button { background: #0f172a; }
.danger-button { background: #dc2626; padding: 10px 14px; }
.section-title { margin: 8px 0; font-size: 32px; }
.section-subtitle { color: #64748b; margin-bottom: 28px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-bottom: 48px; }
.card { overflow: hidden; border: 1px solid #ffe4e6; border-radius: 28px; background: white; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }
.card-image-wrap { position: relative; }
.card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.sold-out-image { filter: grayscale(1); opacity: 0.65; }
.sold-out-badge { position: absolute; top: 14px; right: 14px; background: #dc2626; color: white; font-size: 12px; font-weight: bold; padding: 7px 10px; border-radius: 999px; }
.card-body { padding: 18px; }
.card h3 { margin: 0 0 8px; font-size: 22px; }
.price { color: #be185d; font-size: 24px; font-weight: bold; margin: 0 0 8px; }
.availability { color: #64748b; font-size: 14px; margin: 0 0 16px; }
.field-label { display: block; font-size: 14px; margin-bottom: 8px; color: #334155; }
.money-input, .file-input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid #cbd5e1; margin-bottom: 14px; font-size: 16px; background: white; }
.buy-button { width: 100%; border: 0; border-radius: 18px; background: #0f172a; color: white; font-weight: bold; padding: 14px 16px; cursor: pointer; font-size: 15px; }
.buy-button:disabled { cursor: not-allowed; background: #cbd5e1; color: white; }
.min-price-note, .small-note { font-size: 13px; color: #64748b; margin: -4px 0 14px; }
.status-page, .admin-page { background: linear-gradient(to bottom, #fff1f2, #ffffff); min-height: 100vh; }
.status-page { display: flex; align-items: center; justify-content: center; padding: 24px; }
.status-card, .admin-card, .admin-login-card { background: white; border-radius: 28px; padding: 28px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); border: 1px solid #ffe4e6; }
.status-card { width: 100%; max-width: 640px; text-align: center; }
.status-icon { width: 82px; height: 82px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 38px; margin-bottom: 18px; color: white; }
.status-success { background: #16a34a; } .status-failure { background: #dc2626; } .status-pending { background: #f59e0b; }
.admin-container { padding: 24px 0 48px; }
.admin-grid { display: grid; grid-template-columns: 420px 1fr; gap: 24px; }
.admin-list { display: flex; flex-direction: column; gap: 14px; }
.admin-list-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; border: 1px solid #f1f5f9; border-radius: 18px; padding: 12px; }
.admin-list-item img { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; }
.admin-list-content { display: flex; flex-direction: column; gap: 4px; }
.admin-login-card { width: min(460px, calc(100% - 32px)); margin: 80px auto; }
.alert { border-radius: 16px; padding: 12px 14px; margin-bottom: 16px; }
.alert.success { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.alert.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.text-link { color: #be185d; text-decoration: none; }
code { background: #f8fafc; padding: 2px 6px; border-radius: 8px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } .hero-title { font-size: 38px; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .header-inner, .admin-topbar { flex-direction: column; align-items: flex-start; } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .admin-list-item { grid-template-columns: 1fr; } }


.site-footer {
  margin-top: 56px;
  background: #050816;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  padding: 6px;
}

.footer-title {
  display: block;
  font-size: 18px;
  color: #f8d66d;
}

.footer-text {
  margin: 4px 0 0;
  color: #cbd5e1;
  font-size: 14px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.footer-instagram {
  color: #f8d66d;
  text-decoration: none;
  font-weight: 700;
}

.footer-instagram:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .footer-inner {
    align-items: flex-start;
  }

  .footer-links {
    align-items: flex-start;
  }
}