/* Diskusikan Proyek (Discuss a Project) */
:root{--cream-soft:#FFF6D6;--err:#c62828}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero: the photo sits on the right and fades into white on its left edge, so the headline reads cleanly */
.dp-hero{background:var(--white);padding:clamp(72px,9vw,128px) 0 clamp(150px,15vw,200px);position:relative;overflow:hidden;min-height:clamp(560px,52vw,760px)}
.dp-hero-photo{position:absolute;inset:0 0 0 22%;z-index:0;background:url("../images/discuss-project.webp") center 35%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.dp-hero .wrap{position:relative;z-index:1}
.dp-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:.98;letter-spacing:-.045em;margin:0;max-width:9ch}
.dp-hero h1 .l1,.dp-hero h1 .l2{display:block}
.dp-hero h1 .spark{display:inline-block;width:.55em;height:.55em;vertical-align:.08em;margin-left:.06em}
.dp-hero h1 .spark g{fill:#fdb101}
.dp-hero p{margin:clamp(22px,3vw,32px) 0 0;font-size:clamp(1.02rem,1.4vw,1.2rem);font-weight:500;max-width:34ch;text-shadow:0 0 18px #fff,0 0 8px #fff}
@keyframes dp-pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

/* Form */
.dp-talk{margin-top:clamp(-90px,-8vw,-56px);padding-bottom:clamp(72px,9vw,120px);position:relative;z-index:2}
.dp-talk-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start}
.dp-intro{padding-top:clamp(100px,11vw,140px)}
.dp-intro h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.05;letter-spacing:-.035em;margin:0 0 16px;max-width:15ch}
.dp-intro p{margin:0 0 28px;color:var(--ink-2);font-size:1.05rem;max-width:36ch}
.dp-alt{border-top:1px solid var(--line);padding-top:22px;display:grid;gap:10px;font-weight:600;font-size:15px}
.dp-alt span{color:var(--ink-2);font-weight:500}
.dp-alt a{text-decoration:none;justify-self:start}.dp-alt a:hover{text-decoration:underline}

.dp-card{background:var(--white);border:1.5px solid var(--line);border-radius:32px;padding:clamp(24px,4vw,48px);box-shadow:0 10px 30px -12px rgba(0,0,0,.18)}
.dp-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dp-field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;min-width:0}
.dp-field label,.dp-soc legend{font-weight:700;font-size:14.5px}
.dp-req,.dp-opt{color:var(--ink-2);font-weight:500}
.dp-input{width:100%;border:1.5px solid var(--line);border-radius:16px;background:var(--white);padding:0 18px;height:54px;font:inherit;font-size:16px;color:inherit;transition:border-color .2s,box-shadow .2s}
.dp-area{height:auto;min-height:160px;padding:14px 18px;resize:vertical;line-height:1.55}
.dp-input::placeholder{color:#8a8a8a}
.dp-input:hover{border-color:#b9b9b9}
.dp-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(0,0,0,.08)}
.dp-input[aria-invalid="true"]{border-color:var(--err)}
.dp-msg{font-size:13.5px;font-weight:600;color:var(--err)}
.dp-msg:empty{display:none}
.dp-count{align-self:flex-end;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:-2px}
.dp-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Social media: icon + input pairs */
.dp-soc{border:0;padding:0;margin:0 0 22px;min-width:0}
.dp-soc legend{padding:0;margin-bottom:4px}
.dp-soc .dp-msg{display:block;margin-top:8px}.dp-soc .dp-msg:empty{display:none}
.dp-hint{font-size:13.5px;color:var(--ink-2);margin:0 0 12px}
.dp-soc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dp-soc-in{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:16px;height:54px;padding-left:6px;background:var(--white);transition:border-color .2s,box-shadow .2s}
.dp-soc-in:hover{border-color:#b9b9b9}
.dp-soc-in:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(0,0,0,.08)}
.dp-soc-in.invalid{border-color:var(--err)}
.dp-soc-in .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cream-soft);transition:background .2s,transform .3s cubic-bezier(.2,.9,.3,1.5)}
.dp-soc-in .ic svg{width:19px;height:19px;fill:var(--ink)}
.dp-soc-in.filled .ic{background:var(--cream);transform:rotate(-8deg)}
.dp-soc-in input{flex:1;min-width:0;border:0;background:none;height:100%;padding:0 14px 0 12px;font:inherit;font-size:15px;color:inherit}
.dp-soc-in input:focus{outline:none}
.dp-soc-in input::placeholder{color:#8a8a8a}

.dp-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:6px}
.dp-note{font-size:13.5px;color:var(--ink-2);margin:0;max-width:38ch}
.dp-send{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:58px;padding:0 32px;border-radius:999px;border:0;background:var(--ink);color:var(--white);font:inherit;font-weight:700;font-size:16px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.dp-send:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(0,0,0,.5)}
.dp-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.dp-send:hover svg{transform:translate(3px,-3px) rotate(-8deg)}
.dp-send[disabled]{opacity:.6;cursor:progress;transform:none}
.dp-form-err{margin:16px 0 0;font-size:14px;font-weight:600;color:var(--err)}
.dp-form-err:empty{display:none}

/* Sent */
.dp-done{text-align:center;padding:clamp(24px,4vw,40px) 0}
.dp-done[hidden],#dpForm[hidden]{display:none}
.dp-done .badge{width:84px;height:84px;margin:0 auto 22px;border-radius:50%;background:var(--cream);display:grid;place-items:center;animation:dp-pop .45s cubic-bezier(.2,.9,.3,1.6)}
.dp-done .badge svg{width:44px;height:44px}
.dp-done .badge g{fill:var(--ink)}
.dp-done h3{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.03em;margin:0 0 10px}
.dp-done p{margin:0 auto 26px;color:var(--ink-2);max-width:40ch}
.dp-ghost{height:52px;padding:0 26px;border-radius:999px;border:1.5px solid var(--ink);background:var(--white);font:inherit;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.dp-ghost:hover{background:var(--ink);color:var(--white)}

/* Responsive */
@media (max-width:980px){
  /* photo on top, fading into white at its bottom edge; the headline follows below it */
  .dp-hero{padding:calc(min(74vw,560px) + 4px) 0 clamp(48px,8vw,80px);min-height:0}
  .dp-hero-photo{inset:0 0 auto 0;height:min(74vw,560px);background-position:66% 30%;
    -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .dp-hero h1{max-width:none}
  .dp-talk-grid{grid-template-columns:1fr}
  .dp-talk{margin-top:0;padding-top:clamp(48px,7vw,72px)}
  .dp-intro{padding-top:0}
}
@media (max-width:600px){
  .dp-row,.dp-soc-grid{grid-template-columns:1fr}
  .dp-row{gap:0}
  .dp-hero-photo{background-image:url("../images/discuss-project-sm.webp")}
  .dp-actions{flex-direction:column-reverse;align-items:stretch}
  .dp-send{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .dp-done .badge{animation:none;opacity:1}
  .dp-soc-in .ic,.dp-send,.dp-send svg{transition:none}
}