/* ═══ AWWWARDS VİTRİN (Landing) ═══ */
.kpl{min-height:100vh;background:#0C0E10;color:#F3F4F6;overflow-x:hidden;font-family:'Outfit',sans-serif}
.kpl-nav{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:28px 40px}
.kpl-brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.15rem;letter-spacing:-.5px;color:#F3F4F6}
.kpl-logo{width:36px;height:36px;border-radius:10px;background:#C8F531;display:flex;align-items:center;justify-content:center;font-weight:900;color:#0C0E10;font-size:.88rem;letter-spacing:-1px;flex-shrink:0}
.kpl-login{color:#6B7280;font-weight:600;font-size:.88rem;cursor:pointer;padding:10px 22px;border:1px solid #22262C;border-radius:999px;transition:color .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1)}
.kpl-login:hover{color:#F3F4F6;border-color:#C8F531}
.kpl-hero{padding:80px 40px 72px;max-width:1200px;margin:0 auto}
.kpl-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border:1px solid #22262C;border-radius:999px;font-size:.74rem;font-weight:600;color:#6B7280;background:rgba(200,245,49,.04);margin-bottom:40px;letter-spacing:.05em}
.kpl-badge svg{width:13px;height:13px}
.kpl-hero h1{font-size:clamp(3.5rem,9vw,8rem);font-weight:900;line-height:.92;letter-spacing:-4px;margin-bottom:36px;color:#F3F4F6;max-width:860px}
.kpl-grad{color:#DDF98B}
.kpl-hero p{font-size:clamp(.95rem,2vw,1.2rem);color:#6B7280;line-height:1.7;max-width:440px;margin-bottom:48px}
.kpl-cta{display:flex;gap:16px;flex-wrap:wrap}
.kpl-btn{padding:16px 36px;border-radius:999px;font-weight:700;font-size:1rem;cursor:pointer;border:none;font-family:inherit;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),background .5s,color .5s,border-color .5s}
.kpl-btn-primary{background:#C8F531;color:#0C0E10}
.kpl-btn-primary:hover{transform:scale(1.04);box-shadow:0 20px 60px -12px rgba(200,245,49,.55)}
.kpl-btn-ghost{background:transparent;color:#9CA3AF;border:1px solid #22262C}
.kpl-btn-ghost:hover{transform:scale(1.04);border-color:#C8F531;color:#C8F531}
.kpl-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;max-width:1200px;margin:0 auto;background:#1F2937}
.kpl-card{background:#0C0E10;padding:52px 44px;opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),background .5s cubic-bezier(.16,1,.3,1)}
.kpl-card:nth-child(2){margin-top:80px;background:#0D1120}
.kpl-card.kpl-in{opacity:1;transform:translateY(0)}
.kpl-card.kpl-in:hover{background:#111827}
@media (prefers-reduced-motion:reduce){.kpl-card{opacity:1;transform:none}}
@media (max-width:800px){.kpl-feats{grid-template-columns:1fr}.kpl-card:nth-child(2){margin-top:0}}
.kpl-ic{width:54px;height:54px;border-radius:14px;border:1px solid #22262C;display:flex;align-items:center;justify-content:center;margin-bottom:28px;color:#DDF98B;transition:border-color .5s cubic-bezier(.16,1,.3,1),background .5s}
.kpl-card.kpl-in:hover .kpl-ic{border-color:#C8F531;background:rgba(200,245,49,.1)}
.kpl-ic svg{width:24px;height:24px}
.kpl-card h3{font-size:1.4rem;font-weight:800;margin-bottom:14px;letter-spacing:-.5px;color:#F3F4F6}
.kpl-card p{color:#6B7280;font-size:.95rem;line-height:1.72}
.kpl-explore{max-width:1200px;margin:0 auto;padding:88px 40px 120px;border-top:1px solid #1F2937}
.kpl-explore-title{font-size:clamp(2rem,5vw,3.8rem);font-weight:900;letter-spacing:-2px;margin-bottom:48px;color:#F3F4F6;max-width:580px;line-height:1}
.kpl-tabs{display:flex;gap:4px;margin-bottom:40px;background:#111827;border:1px solid #22262C;border-radius:999px;padding:5px;max-width:300px}
.kpl-tab{flex:1;padding:11px 20px;border:none;background:transparent;color:#6B7280;font-weight:700;font-size:.9rem;border-radius:999px;cursor:pointer;font-family:inherit;transition:background .5s cubic-bezier(.16,1,.3,1),color .5s}
.kpl-tab.active{background:#C8F531;color:#0C0E10}
.kpl-panel{display:none}
.kpl-panel.active{display:block;animation:kplUp .5s cubic-bezier(.16,1,.3,1)}
.kpl-feat-row{display:flex;align-items:flex-start;gap:16px;padding:22px 24px;background:#0C0E10;border:1px solid #22262C;border-radius:16px;margin-bottom:10px;transition:border-color .5s cubic-bezier(.16,1,.3,1),background .5s}
.kpl-feat-row:hover{border-color:#C8F531;background:#111827}
.kpl-check{flex-shrink:0;width:40px;height:40px;border-radius:12px;border:1px solid #22262C;display:flex;align-items:center;justify-content:center;color:#6B7280;transition:border-color .5s cubic-bezier(.16,1,.3,1),background .5s,color .5s}
.kpl-feat-row:hover .kpl-check{border-color:#C8F531;background:#C8F531;color:#0C0E10}
.kpl-check svg{width:20px;height:20px}
.kpl-feat-row h4{font-size:1rem;font-weight:700;margin-bottom:5px;color:#F3F4F6}
.kpl-feat-row p{font-size:.88rem;color:#6B7280;line-height:1.6}
@keyframes kplUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
.kpl-anim{opacity:0;animation:kplUp .8s cubic-bezier(.16,1,.3,1) forwards}
.kpl-d1{animation-delay:.08s}.kpl-d2{animation-delay:.2s}.kpl-d3{animation-delay:.33s}.kpl-d4{animation-delay:.46s}.kpl-d5{animation-delay:.58s}.kpl-d6{animation-delay:.70s}
@media (prefers-reduced-motion:reduce){.kpl-anim{opacity:1;animation:none}}
.auth-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.25;z-index:0}
.auth-orb-1{width:500px;height:500px;background:rgba(200,245,49,.06);top:10%;left:-5%;animation:oF1 16s ease-in-out infinite}
.auth-orb-2{width:400px;height:400px;background:rgba(200,245,49,.04);bottom:5%;right:-5%;animation:oF2 20s ease-in-out infinite}
@keyframes oF1{0%,100%{transform:translate(0,0)}50%{transform:translate(120px,60px)}}
@keyframes oF2{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,-50px)}}

.auth-nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:28px 48px}

/* ─── BRAND LOCKUP — KP Monogram + Wordmark ─── */
/* "Koç" weak + "Panel" bold — modern, asymmetric weight */
.kp-brand-lockup{
  display:inline-flex;
  align-items:center;
  gap:var(--space-md);
  user-select:none;
}
.kp-brand-name{
  font-size:var(--font-xl);
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--tracking-tight);
  color:var(--text-primary);
  line-height:1;
}
.kp-brand-name b{
  font-weight:var(--fw-black);
  background:linear-gradient(135deg,#D2F758 0%,#C8F531 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.kp-monogram{
  display:block;
  flex-shrink:0;
  transition:transform var(--duration-base) var(--ease-bounce);
}
.kp-monogram:hover{transform:scale(1.05) rotate(-2deg)}

/* Legacy auth-logo — yeni brand lockup'a köprü */
.auth-logo{
  display:flex;align-items:center;gap:var(--space-md);
  font-weight:var(--fw-extrabold);
  font-size:var(--font-xl);
  letter-spacing:var(--tracking-tight);
}
.auth-logo-icon{
  /* Eski "KP" text icon — şimdi SVG için container */
  width:40px;height:40px;
  background:linear-gradient(135deg,var(--accent) 0%,#98BE1C 100%);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--font-base);
  color:var(--text-on-accent);
  font-weight:var(--fw-black);
  box-shadow:var(--shadow-md),var(--accent-glow);
  transition:transform var(--duration-base) var(--ease-bounce),
             box-shadow var(--duration-base) var(--ease-out);
}
.auth-logo-icon:hover{
  transform:scale(1.06) rotate(-3deg);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(200,245,49,0.5),0 0 32px rgba(200,245,49,0.4);
}


/* ═══ T3 — AWWWARDS KATMANI (2026-07-17) ═══
   Marquee + kontur tipografi + hayalet numaralar + final CTA + mikro-etkileşimler.
   Kurallar: yalnız opacity/transform animasyonu (§4.5), reduced-motion saygılı. */
.kpl ::selection{background:#C8F531;color:#0C0E10}

/* Hero: SPORTİF dev tipografi — büyük harf + kontur vurgu */
.kpl-hero{position:relative}
.kpl-hero h1{text-transform:uppercase}
.kpl-grad{color:transparent;-webkit-text-stroke:2.5px #C8F531}
@supports not (-webkit-text-stroke:1px black){.kpl-grad{color:#C8F531}}
/* arka ızgara — merkeze doğru eriyen teknik doku */
.kpl-hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 40% 30%,black,transparent);
  mask-image:radial-gradient(ellipse 90% 80% at 40% 30%,black,transparent);
  pointer-events:none}

/* MARQUEE — kayan şerit (içerik iki kez basılır, -50% döngü kesintisizdir) */
.kpl-marquee{overflow:hidden;border-top:1px solid #1F2937;border-bottom:1px solid #1F2937;padding:26px 0}
.kpl-marquee-track{display:flex;align-items:center;gap:38px;width:max-content;animation:kplMarquee 26s linear infinite;will-change:transform}
.kpl-marquee:hover .kpl-marquee-track{animation-play-state:paused}
.kpl-marquee span{font-size:clamp(1.6rem,4vw,3rem);font-weight:900;text-transform:uppercase;letter-spacing:-1px;white-space:nowrap;color:#F3F4F6}
.kpl-marquee span:nth-child(4n+3){color:transparent;-webkit-text-stroke:1.5px #3A4048}
.kpl-marquee i{font-style:normal;color:#C8F531;font-size:1.5rem;flex-shrink:0}
@keyframes kplMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.kpl-marquee-track{animation:none}}

/* Kartlarda hayalet numaralar + hover kaldırma */
.kpl-card{position:relative}
.kpl-num{position:absolute;top:26px;right:30px;font-size:3.4rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1px #262B31;pointer-events:none;transition:-webkit-text-stroke .5s ease}
.kpl-card.kpl-in:hover{transform:translateY(-6px)}
.kpl-card.kpl-in:hover .kpl-num{-webkit-text-stroke:1px #C8F531}

/* Özellik satırı mikro-etkileşimi — hover'da hafif sağa kayma */
.kpl-feat-row:hover{transform:translateX(6px)}
.kpl-feat-row{transition:border-color .5s cubic-bezier(.16,1,.3,1),background .5s,transform .4s cubic-bezier(.16,1,.3,1)}

/* FİNAL CTA — kapanış bandı */
.kpl-final{max-width:1200px;margin:0 auto;padding:120px 40px 140px;text-align:center;border-top:1px solid #1F2937}
.kpl-final h2{font-size:clamp(2.6rem,9vw,6.5rem);font-weight:900;text-transform:uppercase;letter-spacing:-3px;line-height:.95;margin-bottom:26px;color:#F3F4F6}
.kpl-final p{color:#6B7280;font-size:1.05rem;margin-bottom:40px}
.kpl-btn-xl{padding:20px 52px;font-size:1.15rem}

/* Scroll-reveal genel sınıfı (kplInitReveal gözlemcisine bağlanır) */
.kpl-reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.kpl-reveal.kpl-in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.kpl-reveal{opacity:1;transform:none}}