/* Challenge öner sayfası (03.10.2026). Giriş sahnesi ana sayfadaki öneri bölümüyle
   aynı (live.css/brand.css .suggestion-section); form alanları başvuru sayfasının
   bileşenleri (basvuru.css .field/.drop/.apply-notice/.apply-result). Bu dosya
   yalnız sayfaya özel düzeni ve canlı önizleme kartını taşır. */

.oner-page{position:relative;background:radial-gradient(110% 70% at 85% 30%,#2a1414 0%,transparent 60%),radial-gradient(90% 60% at 8% 70%,#14204a 0%,transparent 62%),var(--bg)}
.oner-hero{margin-block:28px 0}
.oner-hero h1{font:800 clamp(45px,5vw,66px)/1 ArenaDisplay,Impact,sans-serif;letter-spacing:-.01em;white-space:pre-line}

.oner-section{position:relative;padding-block:56px 90px;scroll-margin-top:90px}

/* Üç adım şeridi */
.oner-steps{list-style:none;margin:0 0 42px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.oner-steps li{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:3px;background:#ffffff06}
.oner-steps b{font:400 26px/1 ArenaDisplay,Impact,sans-serif;color:var(--yellow)}
.oner-steps li:nth-child(1) b{color:var(--blue)}
.oner-steps li:nth-child(2) b{color:var(--red)}
.oner-steps span{font-size:12px;line-height:1.5;color:#c9ccd7}

.oner-layout{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:48px;align-items:start}
.oner-side{position:sticky;top:110px;min-width:0}
.oner-label{font-size:9px;letter-spacing:1.8px;font-weight:700;color:#8d92a4;margin:0 0 12px}

/* Canlı önizleme kartı: sitedeki challenge kartlarının dili (kod, alan, A–VS–B). */
.oner-preview{position:relative;overflow:hidden;padding:24px 22px 18px;border:1px solid #3a3a48;border-radius:4px;
  background:linear-gradient(160deg,#181826 0%,#121219 60%,#1a1214 100%)}
.oner-preview-glow{position:absolute;inset:-40%;pointer-events:none;opacity:.35;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(251,188,4,.35) 80%,transparent 90%)}
.oner-preview>*:not(.oner-preview-glow){position:relative}
.oner-preview header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.oner-code{font-size:11px;letter-spacing:1px;color:#acb7d0}
.oner-tag{font-size:9px;letter-spacing:1.4px;font-weight:700;padding:5px 9px;border-radius:2px;background:#ffffff10;color:#9a9eae}
.oner-tag.is-set{background:var(--yellow);color:#0b0b0f}
.oner-preview h2{font:400 34px/.95 ArenaDisplay,Impact,sans-serif;text-transform:uppercase;margin:0 0 14px;overflow-wrap:anywhere;min-height:1em}
.oner-preview p{font-size:12px;line-height:1.7;color:#b9bcc8;margin:0;max-height:8.5em;overflow:hidden;overflow-wrap:anywhere;white-space:pre-line}
.oner-preview footer{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid #ffffff12}
.oner-side-a,.oner-side-b{display:grid;place-items:center;width:30px;height:30px;font:400 18px/1 ArenaDisplay,Impact,sans-serif;color:#fff}
.oner-side-a{background:var(--blue)}
.oner-side-b{background:var(--red)}
.oner-vs{font:400 16px/1 ArenaDisplay,Impact,sans-serif;color:var(--yellow)}
.oner-attach{margin-left:auto;font-size:10px;color:#c9ccd7;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.oner-ideas-label{margin-top:28px}
.oner-ideas{display:flex;flex-wrap:wrap;gap:8px}
.oner-ideas button{min-height:38px;padding:8px 14px;border:1px solid #3a3a48;border-radius:999px;background:#15151d;color:#dcdfe8;font:inherit;font-size:12px;cursor:pointer;
  transition:border-color .2s,background-color .2s,color .2s,transform .2s var(--ease)}
.oner-ideas button:hover,.oner-ideas button:focus-visible{border-color:var(--yellow);color:#fff;outline:none}

/* Form kartı */
.oner-card{padding:32px 30px 28px;border:1px solid #2c2c3a;border-top:2px solid var(--yellow);border-radius:3px;background:#121219e6}
.oner-card h2{font:800 clamp(30px,3.2vw,40px)/1 ArenaDisplay,Impact,sans-serif;margin:0 0 26px}
.oner-card .form-kicker b{color:var(--yellow)}
.oner-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.oner-kinds label{position:relative;cursor:pointer}
.oner-kinds input{position:absolute;opacity:0;pointer-events:none}
.oner-kinds span{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border:1px solid #3a3a48;border-radius:2px;background:#1c1c26;font-size:12px;color:#ced2dd;
  transition:border-color .2s,background-color .2s,color .2s}
.oner-kinds input:checked+span{border-color:var(--yellow);background:#2a2410;color:#fff}
.oner-kinds input:focus-visible+span{outline:2px solid var(--yellow);outline-offset:2px}
.oner-kind-field{border:0;padding:0;margin:0 0 18px}
.oner-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:8px}
.oner-account{font-size:12px;line-height:1.6;color:#aeb3c2;margin:0;flex:1 1 220px}
.oner-account a{color:#9bbdff;text-decoration:underline;text-underline-offset:3px}
.oner-send{min-width:230px}
.oner-send:disabled{opacity:.6;cursor:wait}
.oner-result{min-height:0;padding:0}
.oner-main{min-width:0}

/* Hareket */
html.motion .oner-preview-glow{animation:oner-don 9s linear infinite}
@keyframes oner-don{to{transform:rotate(360deg)}}
html.motion .oner-preview.is-pulse{animation:oner-nabiz .5s var(--ease)}
@keyframes oner-nabiz{0%{transform:scale(1)}40%{transform:scale(1.015);border-color:var(--yellow)}100%{transform:scale(1)}}
html.motion .oner-steps li{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.motion .oner-section.is-in .oner-steps li{opacity:1;transform:none}
html.motion .oner-section.is-in .oner-steps li:nth-child(2){transition-delay:.1s}
html.motion .oner-section.is-in .oner-steps li:nth-child(3){transition-delay:.2s}
@media (hover:hover){html.motion .oner-ideas button:hover{transform:translateY(-2px)}}

@media (max-width:900px){
  .oner-layout{grid-template-columns:1fr;gap:28px}
  .oner-side{position:static}
  .oner-steps{grid-template-columns:1fr;gap:8px;margin-bottom:28px}
  .oner-section{padding-block:36px 64px}
  .oner-card{padding:24px 18px 22px}
  .oner-preview h2{font-size:30px}
  .oner-send{width:100%}
}