:root{--hdr:56px;--sbw:264px;--ease:cubic-bezier(.22,.61,.36,1);--dur-1:.7s;--dur-2:.9s;--dur-3:1.2s;--shadow-soft:0 10px 30px rgba(0,0,0,.25)}
    .hdr-bg{background:rgba(0,0,0,.6);backdrop-filter:saturate(120%) blur(10px);transition:background-color .3s ease, border-color .3s ease}
    .hdr-solid{background-color:rgba(0,0,0,0.7);backdrop-filter:saturate(120%) blur(8px);border-color:rgba(255,255,255,.08)}
    .field{background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;padding:.625rem .75rem}
    .field:focus{border-color:rgba(255,255,255,.35);outline:0}
    .note{border-left:3px solid rgba(255,255,255,.22);padding-left:.75rem}
    .reveal{opacity:.001;transform:translateY(16px);filter:blur(6px);
      transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease)}
    .reveal.in{opacity:1;transform:none;filter:none}
    @media (prefers-reduced-motion: no-preference){
      .reveal{opacity:0;transform:translateY(24px);filter:blur(6px)}
      .reveal.is-inview{opacity:1;transform:translateY(0);filter:blur(0)}
      .reveal[data-anim="fade-up"].is-inview{animation:fadeUp var(--dur-2) var(--ease) both}
      .reveal[data-anim="fade-scale"].is-inview{animation:fadeScale var(--dur-3) var(--ease) both}
      .reveal[data-anim="fade-left"].is-inview{animation:fadeLeft var(--dur-2) var(--ease) both}
      .reveal[data-anim="fade-right"].is-inview{animation:fadeRight var(--dur-2) var(--ease) both}
      .reveal[data-anim="rise"].is-inview{animation:rise var(--dur-3) var(--ease) both}
    }
    @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeScale{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
    @keyframes fadeLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
    @keyframes fadeRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
    @keyframes rise{0%{opacity:0;transform:translateY(40px)}60%{opacity:1;transform:translateY(-4px)}100%{transform:translateY(0)}}

    /* Stagger container */
    .stagger>[data-stagger]{opacity:0;transform:translateY(14px)}
    .stagger.play>[data-stagger]{animation:fadeUp var(--dur-1) var(--ease) both}
    .stagger.play>[data-stagger]:nth-child(1){animation-delay:.05s}
    .stagger.play>[data-stagger]:nth-child(2){animation-delay:.12s}
    .stagger.play>[data-stagger]:nth-child(3){animation-delay:.18s}
    .stagger.play>[data-stagger]:nth-child(4){animation-delay:.24s}
    .stagger.play>[data-stagger]:nth-child(5){animation-delay:.30s}
    .stagger.play>[data-stagger]:nth-child(6){animation-delay:.36s}

    /* Focus ring */
    .focus-ring:focus{outline:2px solid #ffffff;outline-offset:2px}

    /* Parallax layers */
    .parallax-layer{will-change:transform;transform:translate3d(0,0,0)}

    /* Cards: tilt on pointer */
    .tilt{transform-style:preserve-3d;transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
    .tilt:hover{box-shadow:var(--shadow-soft)}
    .tilt > *{transform:translateZ(0.01px)}

    /* Magnetic buttons */
    .magnet{transition:transform .25s var(--ease)}
    .magnet-wrap{display:inline-block;perspective:600px}
    .magnet-wrap:active .magnet{transform:scale(.98)}

    /* Hero background + noise overlay */
    .hero-bg{background:radial-gradient(1200px 700px at 70% 30%,rgba(255,255,255,0.08),rgba(255,255,255,0) 60%),radial-gradient(900px 600px at 20% 60%,rgba(255,255,255,0.06),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0))}
    .noise-overlay{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");mix-blend-mode:soft-light}

    /* Section rhythm */
    .section-py{padding-top:6rem;padding-bottom:6rem}
    @media (min-width:768px){.section-py{padding-top:8rem;padding-bottom:8rem}}

    /* Password strength indicator */
    .strength-bar{height:3px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;margin-top:8px}
    .strength-fill{height:100%;transition:width .3s ease, background .3s ease;width:0;background:#ef4444}
    .strength-fill.weak{width:33%;background:#ef4444}
    .strength-fill.medium{width:66%;background:#f59e0b}
    .strength-fill.strong{width:100%;background:#10b981}
    @media (max-width: 1023px){ :root{--sbw:0px} }
    div#live-results {opacity: 1 !important;z-index: 2;max-height: 150px;}

/* Tom Select — koyu tema ve .field ile uyumlu görünüm */
  .ts-wrapper.field { background: transparent; border: 1px solid rgba(255,255,255,.15); border-radius: .5rem; }
  .ts-wrapper.field.focus, .ts-wrapper.field.has-focus { border-color: rgba(255,255,255,.35); }
  .ts-wrapper .ts-control { background: transparent; color: #F5F5F7; padding: .625rem .75rem; min-height: auto; }
  .ts-wrapper.single .ts-control { display: flex; align-items: center; gap: .5rem; }
  .ts-wrapper .item { color: #F5F5F7; }
  .ts-wrapper .ts-control .item { padding: 0; }
  .ts-dropdown { background: #1C1C1E; border: 1px solid rgba(255,255,255,.15); box-shadow: none; }
  .ts-dropdown .option { color: #F5F5F7; padding: .5rem .75rem; }
  .ts-dropdown .active { background: rgba(255,255,255,.06); }
  .ts-dropdown .create { color: #F5F5F7; }
  .ts-dropdown .search input { background: transparent; color: #F5F5F7; border: 1px solid rgba(255,255,255,.15); border-radius: .5rem; padding: .5rem .75rem; }
  .ts-dropdown .search input::placeholder { color: rgba(255,255,255,.4); }
  .ts-wrapper .clear-button { color: #F5F5F7; }
  .ts-wrapper .dropdown-input { background: transparent; color: #F5F5F7; }
  /* Seçili kategori/servis arka planını koyulaştır (tema rengi) */
  .ts-wrapper.field .ts-control,
  .ts-wrapper.field.has-items .ts-control,
  .ts-wrapper.single.input-active .ts-control {
    background-color: #1C1C1E !important; /* panel2 ile uyumlu */
  }
  .ts-wrapper.field .ts-control .item { background: transparent !important; }
  /* scrollbar uyumu */
  .ts-wrapper .ts-control::-webkit-scrollbar { height: 8px; }
  .ts-wrapper .ts-control::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
  .ts-control {
    padding: 0;
    border: unset;
}
.items.ts-input.full.has-items {
    background: #151516;
    color: white;
    border: 1px solid #383839;
    box-shadow: unset;
    border-radius: .5rem !important;
    height: 42px;
    line-height: 23px;
}
.ts-dropdown.single.w-full.field.pr-10.text-sm.plugin-dropdown_input {
    padding: 0;
}
.ts-input.input-active {
    background: unset !important;
    box-shadow:unset !important;
}
.ts-dropdown-content .flex.items-center:hover {
    background: rgba(255,255,255,.06);
    color:#fff;
}