/* =====================================================================
   trhelp. — CORPORATE BLACK THEME (Stripe/Linear/Vercel aesthetic)
   Sade, profesyonel, sadece gerekli animasyonlar.
   Kullanım: <link rel="stylesheet" href="theme-system.css">
   ===================================================================== */

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* =====================================================================
   :root — DESIGN TOKENS
   ===================================================================== */
:root{
  /* —— Background scale —— */
  --bg:        #0a0a0a;
  --bg-soft:   #0f0f0f;
  --bg-elev:   #111111;
  --bg-elev-2: #161616;

  /* —— Border scale —— */
  --b1: #1f1f1f;
  --b2: #2a2a2a;
  --b3: #3a3a3a;

  /* —— Text scale —— */
  --tx:  #fafafa;
  --mt:  #a1a1aa;
  --mt2: #71717a;
  --mt3: #52525b;

  /* —— Accent (Stripe mor-mavi) —— */
  --ac:        #635bff;
  --ac-hover:  #7a73ff;
  --ac-soft:   rgba(99,91,255,.10);
  --ac-border: rgba(99,91,255,.25);

  /* —— Status —— */
  --green:     #22c55e;
  --green-soft:rgba(34,197,94,.10);
  --red:       #ef4444;
  --red-soft:  rgba(239,68,68,.10);
  --yellow:    #f59e0b;

  /* —— Typography —— */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;

  /* —— Spacing / radius —— */
  --r-sm: 6px;
  --r:    8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* —— Shadows (sade) —— */
  --shadow:    0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);

  /* —— Motion —— */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  150ms;
  --nav-h: 64px;
  --max-w: 1200px;
  --gutter: 48px;
}

/* =====================================================================
   BASE
   ===================================================================== */
body{
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  position: relative;
  z-index: 0;
}

/* Çok hafif radial gradient (tek köşe, opacity %4) */
body::before{
  content:'';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(99,91,255,.04), transparent 70%),
    #0a0a0a;
}

h1,h2,h3,h4,h5,h6{color: var(--tx); font-weight: 700; line-height: 1.15; letter-spacing: -.02em}
h1{font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -.03em; line-height: 1.05}
h2{font-size: clamp(28px, 4vw, 48px); letter-spacing: -.025em}
h3{font-size: var(--fs-xl)}
h4{font-size: var(--fs-lg)}
p{color: var(--mt); line-height: 1.6}
small, .text-sm{font-size: var(--fs-sm)}
.text-muted{color: var(--mt)}
.text-mute2{color: var(--mt2)}

::selection{background: var(--ac); color: #fff}
::-webkit-scrollbar{width: 10px; height: 10px}
::-webkit-scrollbar-track{background: var(--bg)}
::-webkit-scrollbar-thumb{background: var(--b2); border-radius: 10px; border: 2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background: var(--b3)}

/* =====================================================================
   ANIMATIONS — sadece 2 tane
   ===================================================================== */
@keyframes fadeUp{
  from{opacity: 0; transform: translateY(8px)}
  to  {opacity: 1; transform: translateY(0)}
}
@keyframes pulseDot{
  0%,100%{opacity: 1}
  50%    {opacity: .5}
}

/* =====================================================================
   UTILITY CLASSES (az ve öz)
   ===================================================================== */
.eyebrow{
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--mt2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
  display: inline-block;
}
.dot{
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.dot-blue{background: var(--ac)}
.dot-red{background: var(--red)}

/* Scroll reveal — JS observer ile .in eklenince görünür */
.reveal{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.reveal.in{opacity: 1; transform: translateY(0)}

.container{
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

/* =====================================================================
   COMPONENTS
   ===================================================================== */

/* ——— NAV ——— (ortak tema, ana sayfa referans) */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(10,10,10,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--b1);
}
.nav-logo{
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo-dot{
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ac);
  animation: pulseDot 2s ease-in-out infinite;
}
.nav-links{display: flex; align-items: center; gap: 4px}
.nav-link{
  color: var(--mt);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s cubic-bezier(.4,0,.2,1), background .15s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover,.nav-link.active,.nav-link.act{color: var(--tx); background: #111111}
.nav-cta{
  background: var(--ac);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  margin-left: 8px;
  transition: background .15s cubic-bezier(.4,0,.2,1);
}
.nav-cta:hover{background: var(--ac-hover)}

/* ——— NAV sağ taraf: demo rozeti + kullanıcı ——— */
.nav-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.demo-badge{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.30);
  color: #f59e0b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.demo-badge-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  animation: pulseDot 2s ease-in-out infinite;
}
.nav-user{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: #111111;
  border: 1px solid var(--b1);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.nav-user:hover{border-color: var(--b2)}
.nav-avatar{
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--ac-soft);
  border: 1px solid var(--ac-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac);
}
.nav-username{
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
}
@media(max-width:768px){
  .demo-badge span.demo-label{display:none}
  .nav-username{display:none}
}

/* ——— BUTTONS ——— */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--fs-base);
  padding: 12px 22px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn-sm{padding: 8px 14px; font-size: var(--fs-sm); border-radius: var(--r-sm)}
.btn-lg{padding: 14px 28px; font-size: var(--fs-md)}
.btn-block{width: 100%}

.btn-primary{
  background: var(--ac);
  color: #fff;
}
.btn-primary:hover{background: var(--ac-hover)}

.btn-sec, .btn-secondary{
  background: transparent;
  color: var(--tx);
  border: 1px solid var(--b1);
}
.btn-sec:hover, .btn-secondary:hover{border-color: var(--b2); background: var(--bg-elev)}

.btn-ghost{background: transparent; color: var(--mt); border: 1px solid transparent}
.btn-ghost:hover{color: var(--tx); background: var(--bg-elev)}

.btn-danger{background: var(--red); color: #fff}
.btn-danger:hover{background: #dc2626}

/* ——— CARDS ——— */
.card{
  background: var(--bg-elev);
  border: 1px solid var(--b1);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover{border-color: var(--b2)}
.card-flat{background: var(--bg-elev); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 24px}
.card-title{font-size: var(--fs-lg); font-weight: 700; color: var(--tx); margin-bottom: 8px}
.card-desc{font-size: var(--fs-base); color: var(--mt); line-height: 1.6}

/* ——— INPUTS ——— */
.input{
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 11px 14px;
  font-size: var(--fs-base);
  color: var(--tx);
  font-family: var(--font);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  outline: none;
}
.input::placeholder{color: var(--mt2)}
.input:hover{border-color: var(--b2)}
.input:focus{border-color: var(--ac); background: var(--bg-elev-2)}
.input-lg{padding: 13px 16px; font-size: var(--fs-md)}
.input-error{border-color: var(--red)}
.input-success{border-color: var(--green)}

.input-group{display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px}
.input-label{font-size: var(--fs-sm); font-weight: 600; color: var(--mt)}
.input-hint{font-size: var(--fs-xs); color: var(--mt2)}

/* ——— BADGE ——— */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.badge-blue{background: var(--ac-soft); color: var(--ac); border: 1px solid var(--ac-border)}
.badge-green{background: var(--green-soft); color: var(--green); border: 1px solid rgba(34,197,94,.25)}
.badge-red{background: var(--red-soft); color: var(--red); border: 1px solid rgba(239,68,68,.25)}
.badge-solid-blue{background: var(--ac); color: #fff}

/* =====================================================================
   SECTIONS
   ===================================================================== */
.section{
  padding: 96px var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.section-bg{
  background: var(--bg-soft);
  border-top: 1px solid var(--b1);
  border-bottom: 1px solid var(--b1);
  max-width: 100%;
  padding: 0;
}
.section-bg .section{margin: 0 auto}
.s-title{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 12px;
  color: var(--tx);
}
.s-sub{font-size: 16px; color: var(--mt); line-height: 1.6; max-width: 560px}
.text-center{text-align: center}
.text-center .s-sub{margin-left: auto; margin-right: auto}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px){
  :root{--gutter: 24px}
  .nav{padding: 0 24px}
  .nav-links{display: none}
  .section{padding: 64px 24px}
  .section-bg .section{padding: 64px 24px}
}
@media (max-width: 640px){
  :root{--nav-h: 56px}
  .s-title{font-size: 28px; letter-spacing: -.015em}
  .btn{padding: 11px 18px; font-size: var(--fs-sm)}
  .btn-lg{padding: 12px 22px; font-size: var(--fs-base)}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{opacity: 1; transform: none}
}