/* ============================================================
   KLNS PERTANDINGAN FOTOGRAFI - JULAI 2026
   Tema: Demi Sebuah Harapan
   Palette: Navy / Hitam / Emas / Putih (rujukan poster Julai)
   ============================================================ */

:root {
  --navy: #0b1f4d;
  --navy-deep: #061230;
  --black: #111111;
  --red: #d62828;
  --gold: #f2a93b;
  --gold-dark: #c8861a;
  --gold-soft: #fbeed7;
  --cream: #faf7f0;
  --white: #ffffff;
  --ink: #1a2238;
  --grey: #5b6478;
  --line: #e6e1d6;

  --card-red: #d62828;
  --card-orange: #f2913b;
  --card-green: #3b9b5c;
  --card-blue: #2e63b8;
  --card-teal: #2a8f93;
  --card-purple: #6e4ba8;
  --card-pink: #c84b8a;

  --radius: 16px;
  --shadow-soft: 0 10px 30px -12px rgba(11,31,77,0.25);
  --shadow-card: 0 6px 20px -8px rgba(11,31,77,0.18);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--cream); color:var(--ink); line-height:1.6; overflow-x:hidden; }
h1,h2,h3 { font-family:'Poppins',sans-serif; font-weight:800; line-height:1.15; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:1140px; margin:0 auto; padding:0 20px; }

/* ---------- FILM STRIP ---------- */
.filmstrip { display:flex; height:22px; background:var(--navy-deep); overflow:hidden; position:relative; }
.filmstrip::before, .filmstrip::after { content:''; position:absolute; top:0; bottom:0; width:100%; background-image:repeating-linear-gradient(90deg,transparent 0,transparent 10px,var(--gold) 10px,var(--gold) 16px); background-size:26px 6px; background-repeat:repeat-x; }
.filmstrip::before { top:3px; }
.filmstrip::after { bottom:3px; }

/* ---------- HEADER ---------- */
.site-header { background:var(--black); padding:14px 0; border-bottom:2px solid var(--gold); }
.header-inner { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; color:var(--white); }
.brand-logo { height:48px; width:auto; }
.brand-text strong { display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:17px; letter-spacing:0.5px; }
.brand-text span { display:block; font-size:10.5px; color:var(--gold); letter-spacing:0.8px; text-transform:uppercase; }
.nav-cta { background:var(--gold); color:var(--black); padding:10px 20px; border-radius:30px; font-weight:800; font-size:13px; white-space:nowrap; }
.nav-cta:hover { background:var(--gold-dark); }

/* ---------- HERO ---------- */
.hero { background:radial-gradient(circle at 15% 30%, #1a2f5e 0%, var(--black) 60%); color:var(--white); padding:68px 0 60px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(242,169,59,0.03) 0,rgba(242,169,59,0.03) 1px,transparent 1px,transparent 40px); }
.hero-inner { position:relative; z-index:1; text-align:center; max-width:780px; margin:0 auto; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(242,169,59,0.12); border:1px solid var(--gold); color:var(--gold); padding:6px 18px; border-radius:30px; font-size:12.5px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; margin-bottom:24px; }
.hero h1 { font-size:clamp(26px,5vw,44px); margin-bottom:16px; }
.hero h1 .accent { color:var(--gold); }
.tema-badge { display:inline-flex; flex-direction:column; align-items:center; gap:4px; margin:6px 0 22px; }
.tema-label { font-size:13px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.55); font-weight:700; }
.tajuk-tag { font-size:13px; color:rgba(255,255,255,0.65); font-weight:600; letter-spacing:0.5px; margin-bottom:2px; }
.tema-word { font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(32px,8vw,68px); background:linear-gradient(135deg,var(--gold) 0%,#fff5d6 50%,var(--gold) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:1px; }
.hero-tagline { font-size:15.5px; color:rgba(255,255,255,0.82); font-style:italic; max-width:560px; margin:0 auto 8px; line-height:1.7; }
.hero-anjuran { font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:32px; }
.hero-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:30px; font-weight:700; font-size:15px; border:none; cursor:pointer; transition:transform 0.15s ease,box-shadow 0.15s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--black); box-shadow:0 10px 25px -8px rgba(242,169,59,0.55); }
.btn-outline { background:transparent; color:var(--white); border:2px solid rgba(255,255,255,0.35); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.deadline-strip { margin-top:36px; display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); padding:10px 22px; border-radius:12px; font-size:13.5px; }
.deadline-strip strong { color:var(--gold); }

/* ---------- SECTION ---------- */
.section { padding:64px 0; }
.section-alt { background:var(--white); }
.section-head { text-align:center; max-width:680px; margin:0 auto 40px; }
.section-eyebrow { font-size:12.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-dark); margin-bottom:10px; }
.section-head h2 { font-size:clamp(22px,4vw,32px); color:var(--navy); }
.section-head p { color:var(--grey); margin-top:10px; font-size:15px; }

/* ---------- INFO CARDS ---------- */
.info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.info-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-card); display:flex; gap:14px; align-items:flex-start; }
.info-icon { flex-shrink:0; width:44px; height:44px; border-radius:12px; background:var(--gold-soft); display:flex; align-items:center; justify-content:center; font-size:20px; }
.info-card p { font-size:14.5px; }
.info-card strong { color:var(--navy); }

/* ---------- TEMA BLOCK ---------- */
.tema-block { background:linear-gradient(135deg,var(--black) 0%,#1a2238 100%); border-radius:24px; padding:48px 36px; color:var(--white); text-align:center; position:relative; overflow:hidden; border:1px solid rgba(242,169,59,0.25); }
.tema-block::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(242,169,59,0.025) 0,rgba(242,169,59,0.025) 1px,transparent 1px,transparent 40px); }
.tema-block .tajuk-tag { position:relative; z-index:1; font-size:14px; color:rgba(255,255,255,.6); margin-bottom:6px; }
.tema-block .tema-word { position:relative; z-index:1; }
.tema-block p { position:relative; z-index:1; max-width:620px; margin:18px auto 0; font-size:15.5px; color:rgba(255,255,255,0.82); font-style:italic; line-height:1.8; }
.tema-block p::before { content:'\201C'; }
.tema-block p::after { content:'\201D'; }

/* ---------- NUMBERED CARDS ---------- */
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.num-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-card); border:1px solid var(--line); overflow:hidden; }
.num-card-head { display:flex; align-items:center; gap:12px; padding:16px 20px; color:var(--white); font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; }
.num-card-icon { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.num-card-body { padding:18px 22px 22px; }
.num-card-body ol { list-style:none; display:flex; flex-direction:column; gap:10px; }
.num-card-body li { display:flex; gap:8px; font-size:14px; color:var(--ink); }
.num-card-body li span.idx { color:var(--grey); font-weight:700; flex-shrink:0; min-width:28px; }
.num-card-body strong { color:var(--red); }
.num-card-body .ok { color:var(--card-green); }
.new-syarat { background:rgba(242,169,59,0.1); border-left:3px solid var(--gold); padding:8px 12px; border-radius:0 8px 8px 0; font-size:13.5px; margin-top:6px; }
.new-syarat span { color:var(--gold-dark); font-weight:700; }

.c-red    { background:linear-gradient(135deg,#d62828,#b81f1f); }
.c-orange { background:linear-gradient(135deg,#f2913b,#d6731f); }
.c-green  { background:linear-gradient(135deg,#3b9b5c,#277b46); }
.c-blue   { background:linear-gradient(135deg,#2e63b8,#214a8a); }
.c-teal   { background:linear-gradient(135deg,#2a8f93,#1f6e71); }
.c-purple { background:linear-gradient(135deg,#6e4ba8,#533781); }
.c-pink   { background:linear-gradient(135deg,#c84b8a,#9c346a); }
.c-navy   { background:linear-gradient(135deg,var(--navy),var(--navy-deep)); }
.c-gold   { background:linear-gradient(135deg,#c8861a,#9a6410); }

/* ---------- FORM ---------- */
.form-wrap { background:var(--white); border-radius:24px; box-shadow:var(--shadow-soft); padding:40px; max-width:740px; margin:0 auto; border:1px solid var(--line); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:13.5px; font-weight:700; color:var(--navy); }
.form-group label .req { color:var(--red); }
.form-group input, .form-group textarea { border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; font-size:14.5px; font-family:inherit; color:var(--ink); background:var(--cream); transition:border-color 0.15s ease; }
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--gold-dark); background:var(--white); }
.form-group textarea { resize:vertical; min-height:90px; }
.field-error { display:none; color:var(--red); font-size:12.5px; font-weight:600; }
.form-group.has-error input, .form-group.has-error textarea { border-color:var(--red); }
.form-group.has-error .field-error { display:block; }
.upload-box { border:2px dashed var(--gold); border-radius:14px; background:var(--gold-soft); padding:26px; text-align:center; cursor:pointer; position:relative; }
.upload-box input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-icon { font-size:28px; margin-bottom:8px; }
.upload-text { font-size:14px; color:var(--navy); font-weight:600; }
.upload-hint { font-size:12.5px; color:var(--grey); margin-top:4px; }
.preview-wrap { margin-top:16px; display:none; text-align:center; }
.preview-wrap img { max-height:240px; border-radius:12px; margin:0 auto; box-shadow:var(--shadow-card); }
.preview-meta { font-size:12.5px; color:var(--grey); margin-top:8px; }
.consent-row { display:flex; gap:10px; align-items:flex-start; background:var(--cream); border-radius:12px; padding:16px; border:1px solid var(--line); }
.consent-row input { margin-top:3px; width:18px; height:18px; accent-color:var(--gold-dark); flex-shrink:0; }
.consent-row label { font-size:13.5px; color:var(--ink); }
.form-submit { text-align:center; margin-top:8px; }
.form-submit .btn { width:100%; justify-content:center; padding:16px; font-size:16px; }
.alert-banner { background:#fdeaea; border:1px solid var(--red); color:#8a1c1c; padding:14px 18px; border-radius:12px; font-size:13.5px; margin-bottom:22px; }

/* ---------- FOOTER ---------- */
.site-footer { background:var(--black); color:rgba(255,255,255,0.65); padding:44px 0 28px; text-align:center; border-top:2px solid var(--gold); }
.site-footer .footer-logo { height:56px; width:auto; margin:0 auto 14px; }
.site-footer strong { color:var(--white); display:block; font-size:16px; margin-bottom:4px; }
.site-footer .footer-sub { font-size:13px; color:var(--gold); margin-bottom:18px; }
.site-footer p { font-size:12.5px; max-width:560px; margin:0 auto; line-height:1.7; }
.footer-social { display:flex; gap:18px; justify-content:center; margin:16px 0 20px; font-size:13px; }
.footer-social a { color:var(--gold); }

/* ---------- THANK YOU PAGE ---------- */
.ty-wrap { min-height:70vh; display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.ty-card { text-align:center; max-width:480px; background:var(--white); padding:48px 36px; border-radius:24px; box-shadow:var(--shadow-soft); }
.ty-icon { width:76px; height:76px; border-radius:50%; background:var(--card-green); color:var(--white); font-size:36px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.ty-card h2 { color:var(--navy); margin-bottom:10px; font-size:22px; }
.ty-card p { color:var(--grey); font-size:14.5px; margin-bottom:24px; }
.ty-ref { background:var(--cream); border-radius:10px; padding:12px; font-size:13px; color:var(--navy); margin-bottom:24px; }

/* ---------- ADMIN ---------- */
.admin-wrap { padding:32px 20px; max-width:1200px; margin:0 auto; }
.admin-table-wrap { overflow-x:auto; background:var(--white); border-radius:16px; box-shadow:var(--shadow-card); }
table.admin-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:900px; }
table.admin-table th { background:var(--black); color:var(--white); padding:12px 14px; text-align:left; white-space:nowrap; }
table.admin-table td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
table.admin-table tr:hover td { background:var(--cream); }
.thumb-admin { width:70px; height:70px; object-fit:cover; border-radius:8px; }
.status-pill { padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:700; display:inline-block; }
.status-Baru { background:#e8eefc; color:#2e63b8; }
.status-Disemak { background:#fff3da; color:#b87a13; }
.status-Diterima { background:#e3f5e8; color:#277b46; }
.status-Ditolak { background:#fdeaea; color:#b81f1f; }
.total-badge { background:var(--gold); color:var(--black); padding:4px 12px; border-radius:20px; font-size:13px; font-weight:700; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px) {
  .info-grid, .card-grid, .form-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:auto; }
  .hero { padding:48px 0 40px; }
  .form-wrap { padding:26px 20px; }
  .section { padding:44px 0; }
  .brand-logo { height:38px; }
}