/* DEĞİŞKENLER */
    /* GENEL */
    /* NAV */
    /* HERO */
    /* MODELLER */
    /* ENGELSİZ */
    /* ULAŞIM */
    /* AVANTAJLAR */
    /* MEDICANA */
    /* SSS */
    /* İLETİŞİM / FORM */
    /* FOOTER */
    /* ANİMASYONLAR */
    /* RESPONSIVE */
    /* GENEL / TEMEL STİLLER */
    :root {
      --bg:#07111f;
      --bg2:#0d1d34;
      --line:rgba(255,255,255,.12);
      --line2:rgba(255,255,255,.08);
      --glass:rgba(255,255,255,.08);
      --glass2:rgba(255,255,255,.05);
      --txt:#f5f8ff;
      --muted:#b6c5db;
      --cyan:#45d6ff;
      --blue:#4a7dff;
      --pink:#ef6bff;
      --lime:#b8ff65;
      --shadow:0 30px 60px rgba(0,0,0,.28)
    }
    * {
      box-sizing:border-box
    }
    html {
      scroll-behavior:smooth
    }
    body {
      margin:0;
      font-family:Inter,system-ui,sans-serif;
      color:var(--txt);
      background:radial-gradient(circle at top left,#0e2748 0,#07111f 32%,#06101d 58%,#08101a 100%);
      overflow-x:hidden
    }
    a {
      text-decoration:none;
      color:inherit
    }
    img {
      display:block;
      max-width:100%
    }
    button {
      font:inherit
    }
    .wrap {
      width:min(1380px,calc(100% - 64px));
      margin:auto;
      position:relative
    }
    .section {
      padding:112px 0;
      position:relative
    }
    .tag {
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:11px;
      letter-spacing:.22em;
      text-transform:uppercase;
      font-weight:800;
      color:#8fd9ff
    }
    .tag::before {
      content:"";
      width:28px;
      height:1px;
      background:currentColor;
      opacity:.7
    }
    h1,h2,h3 {
      font-family:Manrope,Inter,sans-serif;
      letter-spacing:-.06em;
      margin:0
    }
    .title-xl {
      font-size:clamp(56px,7vw,106px);
      line-height:.96;
      font-weight:800
    }
    .title-lg {
      font-size:clamp(38px,5vw,72px);
      line-height:1.01;
      font-weight:800
    }
    .title-md {
      font-size:clamp(28px,3.5vw,44px);
      line-height:1.05;
      font-weight:800
    }
    .muted {
      color:var(--muted);
      line-height:1.8;
      font-size:16px
    }
    .accent {
      background:linear-gradient(90deg,var(--cyan),#7cd4ff 45%,#fff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent
    }
    .accent2 {
      background:linear-gradient(95deg,#fff 0,#b6cdff 48%,var(--pink) 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent
    }
    .btns {
      display:flex;
      gap:14px;
      flex-wrap:wrap
    }
    .btn {
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding:16px 22px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      font-size:14px;
      font-weight:700;
      transition:.28s ease;
      background:rgba(255,255,255,.06);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px)
    }
    .btn:hover {
      transform:translateY(-4px);
      box-shadow:0 20px 40px rgba(0,0,0,.2)
    }
    .btn.primary {
      background:linear-gradient(135deg,rgba(69,214,255,.24),rgba(74,125,255,.3));
      border-color:rgba(126,203,255,.38)
    }
    .btn.secondary {
      background:rgba(255,255,255,.02)
    }
    .glass {
      background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
      border:1px solid rgba(255,255,255,.1);
      box-shadow:var(--shadow);
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px)
    }
    .nav {
      position:fixed;
      top:20px;
      left:0;
      right:0;
      z-index:60
    }
    .nav-shell {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:16px 20px;
      border-radius:22px
    }
    .logo {
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      letter-spacing:-.04em
    }
    .logo-mark {
      width:16px;
      height:16px;
      border:2px solid #89d3ff;
      transform:rotate(45deg)
    }
    .logo-img {
      display:block;
      height:40px;
      width:auto;
      max-width:180px;
      object-fit:contain
    }
    .logo small {
      display:block;
      font-size:10px;
      letter-spacing:.18em;
      color:#9fb1c8;
      font-weight:700;
      text-transform:uppercase
    }
    .nav-links {
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center
    }
    .nav-links a {
      font-size:12px;
      color:#c7d6e8;
      padding:10px 12px;
      border-radius:12px;
      transition:.2s
    }
    .nav-links a:hover {
      background:rgba(255,255,255,.08);
      color:#fff
    }
    .hero {
      min-height:100svh;
      position:relative;
      overflow:hidden;
      padding:136px 0 84px;
      background:radial-gradient(circle at 14% 18%,rgba(64,122,255,.16),transparent 24%),radial-gradient(circle at 84% 8%,rgba(213,101,255,.12),transparent 26%),linear-gradient(180deg,#05101d 0%,#061325 50%,#07111f 100%)
    }
    .hero::before {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(3,12,24,.88) 0%,rgba(4,14,27,.72) 34%,rgba(4,14,27,.2) 60%,rgba(4,14,27,.5) 100%);
      pointer-events:none;
      z-index:0
    }
    .hero::after {
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:180px;
      background:linear-gradient(180deg,transparent,rgba(5,12,22,.86));
      pointer-events:none;
      z-index:0
    }
    .hero-grid {
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:34px;
      align-items:center;
      position:relative;
      z-index:2
    }
    .hero-copy {
      padding:32px 0 16px;
      position:relative;
      z-index:3
    }
    .hero-copy p {
      max-width:600px;
      margin:24px 0 34px
    }
    .hero-metrics {
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-top:28px
    }
    .metric {
      min-width:160px;
      padding:18px 18px 16px;
      border-radius:20px
    }
    .metric b {
      display:block;
      font-size:34px;
      font-family:Manrope;
      font-weight:800;
      letter-spacing:-.05em
    }
    .metric span {
      display:block;
      margin-top:6px;
      color:#b7c8dc;
      font-size:12px;
      line-height:1.5
    }
    .hero-stage {
      position:relative;
      height:760px;
      display:flex;
      align-items:center
    }
    .hero-visual {
      position:relative;
      width:100%;
      height:100%;
      border-radius:36px;
      overflow:hidden;
      box-shadow:0 30px 60px rgba(0,0,0,.28)
    }
    .hero-visual::before {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(115deg,rgba(7,16,30,.18) 0%,rgba(7,16,30,.02) 42%,rgba(7,16,30,.22) 100%);
      z-index:3;
      pointer-events:none
    }
    .hero-scene {
      position:absolute;
      inset:0;
      overflow:hidden;
      border-radius:36px;
      background:linear-gradient(180deg,#11213c,#0b1630)
    }
    .hero-scene img.hero-bg {
      position:absolute;
      inset:-5%;
      width:110%;
      height:110%;
      object-fit:cover;
      animation:heroZoom 18s ease-in-out infinite alternate;
      filter:saturate(1.06) contrast(1.02) brightness(.88)
    }
    .hero-scene::after {
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 76% 36%,rgba(115,200,255,.28),transparent 28%),linear-gradient(90deg,rgba(4,12,25,.78) 0%,rgba(4,12,25,.28) 34%,rgba(4,12,25,.06) 58%,rgba(4,12,25,.35) 100%),linear-gradient(180deg,rgba(8,16,30,.08),rgba(8,16,30,.56));
      z-index:1
    }
    .hero-gridlines {
      position:absolute;
      inset:0;
      z-index:2;
      opacity:.17;
      background-image:linear-gradient(90deg,transparent 97%,rgba(255,255,255,.8) 100%),linear-gradient(0deg,transparent 97%,rgba(255,255,255,.7) 100%);
      background-size:84px 84px;
      mask-image:linear-gradient(90deg,transparent 10%,#000 45%,transparent 100%)
    }
    .hero-sheen {
      position:absolute;
      inset:-20% auto -20% -25%;
      width:45%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
      transform:skewX(-18deg);
      filter:blur(6px);
      animation:heroSweep 9s ease-in-out infinite;
      z-index:2;
      opacity:.8
    }
    .spotlight {
      position:absolute;
      inset:-1px;
      border-radius:36px;
      background:radial-gradient(260px circle at var(--mx,74%) var(--my,28%),rgba(255,255,255,.18),transparent 52%);
      pointer-events:none;
      opacity:.9;
      mix-blend-mode:screen;
      z-index:4
    }
    .hero-caption {
      position:absolute;
      left:34px;
      top:34px;
      z-index:5;
      max-width:380px;
      padding:22px 24px;
      border-radius:24px
    }
    .hero-caption h4 {
      margin:8px 0 8px;
      font-size:22px;
      line-height:1.15;
      font-family:Manrope;
      letter-spacing:-.04em
    }
    .hero-caption p {
      margin:0;
      color:#d3def0;
      line-height:1.7;
      font-size:14px
    }
    .hero-mini-row {
      position:absolute;
      left:34px;
      right:34px;
      bottom:30px;
      z-index:5;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px
    }
    .hero-mini {
      border-radius:22px;
      padding:18px 20px
    }
    .hero-mini h5 {
      margin:0 0 8px;
      font-size:16px;
      font-family:Manrope
    }
    .hero-mini p {
      margin:0;
      color:#ccdaec;
      line-height:1.65;
      font-size:13px
    }
    .hero-mini .mini-tag,.hero-caption .mini-tag {
      font-size:11px;
      letter-spacing:.17em;
      text-transform:uppercase;
      color:#98e2ff;
      font-weight:800;
      display:block
    }
    .hero-badges {
      position:absolute;
      right:34px;
      top:34px;
      z-index:5;
      display:flex;
      gap:10px;
      align-items:center
    }
    .hero-badge {
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.1);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#f4f8ff;
      font-weight:800
    }
    .hero-orbit {
      position:absolute;
      right:3%;
      top:4%;
      width:72%;
      height:72%;
      border-radius:50%;
      border:1px solid rgba(120,196,255,.16);
      box-shadow:0 0 0 70px rgba(120,196,255,.04),0 0 0 140px rgba(120,196,255,.025);
      z-index:1;
      animation:orbitPulse 8s ease-in-out infinite
    }
    @keyframes heroZoom {
      0% {
        transform:scale(1) translate3d(0,0,0)
      }
      100% {
        transform:scale(1.08) translate3d(-2%,1%,0)
      }
    }
    @keyframes heroSweep {
      0%,20% {
        transform:translateX(-15%) skewX(-18deg);
        opacity:0
      }
      45% {
        opacity:.9
      }
      100% {
        transform:translateX(260%) skewX(-18deg);
        opacity:0
      }
    }
    @keyframes orbitPulse {
      50% {
        transform:scale(1.04);
        opacity:.65
      }
    }
    .kicker-row {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      margin-top:-28px;
      position:relative;
      z-index:3
    }
    .info-card {
      border-radius:24px;
      padding:24px;
      min-height:158px;
      position:relative;
      overflow:hidden
    }
    .info-card::after {
      content:"";
      position:absolute;
      inset:auto -18% -45% auto;
      width:180px;
      height:180px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)
    }
    .info-card h3 {
      font-size:20px;
      margin-bottom:12px
    }
    .info-card p {
      margin:0;
      color:#bbcade;
      font-size:14px;
      line-height:1.75
    }
    .showcase {
      padding-top:84px
    }
    .showcase-head {
      display:flex;
      justify-content:space-between;
      gap:30px;
      align-items:end;
      margin-bottom:34px
    }
    .brand-filter {
      display:flex;
      gap:10px;
      flex-wrap:wrap
    }
    .pill {
      padding:12px 16px;
      border:1px solid rgba(255,255,255,.1);
      border-radius:999px;
      background:rgba(255,255,255,.04);
      font-size:12px;
      font-weight:800;
      color:#d1def0;
      cursor:pointer
    }
    .pill.active {
      background:linear-gradient(135deg,rgba(69,214,255,.25),rgba(74,125,255,.24));
      border-color:rgba(114,207,255,.35)
    }
    .cars-grid {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:18px
    }
    .car-card {
      grid-column:span 4;
      border-radius:28px;
      padding:20px;
      position:relative;
      overflow:hidden;
      min-height:420px;
      display:flex;
      flex-direction:column;
      justify-content:space-between
    }
    .car-card .car-badge {
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#9adfff;
      font-weight:800
    }
    .car-card h3 {
      font-size:40px;
      margin-top:14px
    }
    .car-card p {
      max-width:320px;
      color:#b5c6dc;
      line-height:1.75;
      font-size:14px
    }
    .car-card img {
      position:absolute;
      right:-6%;
      bottom:5%;
      width:86%;
      mix-blend-mode:screen;
      filter:drop-shadow(0 30px 40px rgba(0,0,0,.22));
      transition:transform .45s ease
    }
    .car-card:hover img {
      transform:translateY(-8px) scale(1.03)
    }
    .car-card.wide {
      grid-column:span 8;
      min-height:430px;
      background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.05) 42%,rgba(69,214,255,.08) 100%)
    }
    .car-card.tall {
      min-height:430px
    }
    .car-card .cta {
      margin-top:18px;
      display:inline-flex;
      gap:10px;
      align-items:center;
      font-weight:700;
      color:#dff6ff
    }
    .story-layout {
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:22px;
      align-items:stretch
    }
    .flow-panel,.benefit-panel {
      border-radius:32px;
      padding:30px;
      position:relative;
      overflow:hidden
    }
    .flow-panel::before {
      content:"";
      position:absolute;
      inset:auto -10% -20% auto;
      width:420px;
      height:420px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(69,214,255,.14),transparent 68%)
    }
    .flow-list {
      display:grid;
      gap:14px;
      margin-top:26px
    }
    .flow-item {
      display:grid;
      grid-template-columns:56px 1fr;
      gap:16px;
      padding:18px;
      border-radius:22px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08)
    }
    .flow-item b {
      display:grid;
      place-items:center;
      width:56px;
      height:56px;
      border-radius:18px;
      background:linear-gradient(135deg,rgba(69,214,255,.22),rgba(239,107,255,.18));
      font-size:16px
    }
    .flow-item h4 {
      font-size:18px;
      margin:0 0 7px
    }
    .flow-item p {
      margin:0;
      color:#bfd0e2;
      line-height:1.65;
      font-size:14px
    }
    .benefit-grid {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
      margin-top:28px
    }
    .benefit {
      padding:18px;
      border-radius:22px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      min-height:160px
    }
    .benefit b {
      display:block;
      font-size:32px;
      font-family:Manrope;
      letter-spacing:-.05em;
      margin-bottom:10px
    }
    .benefit h4 {
      font-size:18px;
      margin:0 0 8px
    }
    .benefit p {
      margin:0;
      color:#bfd0e2;
      line-height:1.7;
      font-size:14px
    }
    .services-grid {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:18px
    }
    .svc {
      grid-column:span 4;
      border-radius:28px;
      padding:26px;
      min-height:280px;
      position:relative;
      overflow:hidden
    }
    .svc.large {
      grid-column:span 6
    }
    .svc small {
      display:block;
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#8fd9ff;
      font-weight:800;
      margin-bottom:14px
    }
    .svc h3 {
      font-size:30px;
      margin-bottom:14px
    }
    .svc p {
      margin:0;
      color:#bdd0e2;
      line-height:1.75;
      font-size:14px
    }
    .svc::after {
      content:"";
      position:absolute;
      right:-35px;
      bottom:-35px;
      width:180px;
      height:180px;
      border-radius:40px;
      background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0));
      transform:rotate(28deg)
    }
    .faq-layout {
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:24px;
      align-items:start
    }
    .faq-list {
      display:grid;
      gap:14px
    }
    .faq-item {
      border-radius:22px;
      overflow:hidden
    }
    .faq-q {
      width:100%;
      padding:20px 22px;
      background:rgba(255,255,255,.07);
      border:none;
      color:#fff;
      text-align:left;
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-weight:700;
      cursor:pointer
    }
    .faq-a {
      max-height:0;
      overflow:hidden;
      transition:max-height .35s ease
    }
    .faq-a div {
      padding:0 22px 22px;
      color:#bfd0e2;
      line-height:1.8;
      font-size:14px;
      background:rgba(255,255,255,.04)
    }
    .faq-item.open .faq-a {
      max-height:220px
    }
    .cta-panel {
      border-radius:34px;
      padding:38px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:20px;
      align-items:center;
      background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.05) 35%,rgba(69,214,255,.08) 100%)
    }
    .contact-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:22px
    }
    .contact-card {
      border-radius:24px;
      padding:22px
    }
    .contact-card span {
      display:block;
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#98e3ff;
      font-weight:800;
      margin-bottom:10px
    }
    .contact-card b,.contact-card a {
      font-size:24px;
      font-family:Manrope;
      line-height:1.2
    }
    .footer {
      padding:34px 0 56px;
      color:#9bb0c8;
      font-size:13px
    }
    .reveal {
      opacity:0;
      transform:translateY(24px);
      transition:.8s cubic-bezier(.2,.8,.2,1)
    }
    .reveal.visible {
      opacity:1;
      transform:none
    }
    .delay1 {
      transition-delay:.12s
    }
    .delay2 {
      transition-delay:.22s
    }
    .tilt {
      transform-style:preserve-3d;
      will-change:transform
    }
    .mouse-layer {
      will-change:transform
    }
    @media (max-width:1100px) {
      .hero-grid,.story-layout,.faq-layout,.showcase-head,.cta-panel {
        grid-template-columns:1fr;
        display:grid
      }
      .hero-stage {
        height:640px
      }
      .hero-mini-row {
        grid-template-columns:1fr
      }
      .cars-grid .car-card,.cars-grid .car-card.wide,.services-grid .svc,.services-grid .svc.large {
        grid-column:span 12
      }
      .kicker-row,.benefit-grid,.contact-grid {
        grid-template-columns:1fr 1fr
      }
      .nav-links {
        display:none
      }
    }
    @media (max-width:760px) {
      .wrap {
        width:min(100% - 32px,1380px)
      }
      .hero {
        padding-top:118px
      }
      .hero-stage {
        height:560px
      }
      .hero-visual {
        min-height:100%
      }
      .hero-caption {
        left:18px;
        right:18px;
        top:18px;
        max-width:none;
        padding:18px
      }
      .hero-mini-row {
        left:18px;
        right:18px;
        bottom:18px;
        grid-template-columns:1fr
      }
      .hero-badges {
        left:18px;
        right:18px;
        top:auto;
        bottom:168px;
        justify-content:flex-start;
        flex-wrap:wrap
      }
      .hero-orbit {
        width:92%;
        height:92%;
        right:-10%;
        top:6%
      }
      .hero-metrics,.kicker-row,.benefit-grid,.contact-grid {
        grid-template-columns:1fr;
        display:grid
      }
      .info-card {
        min-height:auto
      }
      .title-xl {
        font-size:48px
      }
      .title-lg {
        font-size:38px
      }
      .cta-panel {
        padding:26px
      }
      .contact-card b,.contact-card a {
        font-size:20px
      }
    }
    /* MODELLER / ORİJİNAL BİLEŞENLER */
    /* KOÇASLANLAR GLASS MOTION V4.1 — centred vehicles and symmetrical ecosystem */
    html {
      scroll-padding-top: 115px;
    }
    body {
      background-image: radial-gradient(ellipse at 17% 8%,#0e294b 0,transparent 28%),radial-gradient(ellipse at 86% 70%,#101a35 0,transparent 30%),linear-gradient(165deg,#070f1e 8%,#091628 49%,#07111f 100%);
    }
    /* Separate the vehicles from their photographic backgrounds, including on the hero */
    .hero-panel .car-float {
      mix-blend-mode:normal;
      filter:drop-shadow(0 34px 28px rgba(0,0,0,.32));
      object-fit:contain;
    }
    .hero-panel .car-main {
      width:min(660px,112%);
      right:-7%;
      bottom:19%;
      z-index:2;
    }
    .hero-panel .car-mini {
      width:min(240px,43%);
      left:-3%;
      top:13%;
      opacity:.88;
      z-index:2;
    }
    .hero-panel .fc1 {
      z-index:4;
      right:2%;
      top:8%;
    }
    .hero-panel .fc2 {
      z-index:4;
      left:3%;
      bottom:5%;
    }
    .hero-panel .fc3 {
      z-index:4;
      right:3%;
      bottom:4%;
    }
    /* Scene-intro and controls */
    #modeller.section {
      padding-top:126px;
      padding-bottom:126px;
      overflow:clip;
    }
    #modeller::before {
      content:"";
      position:absolute;
      top:14%;
      left:50%;
      width:72vw;
      height:78%;
      transform:translateX(-50%);
      pointer-events:none;
      background:radial-gradient(ellipse at 50% 40%,rgba(60,121,220,.065),transparent 66%);
    }
    .model-centered-head {
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      text-align:center;
      gap:28px;
      margin-bottom:50px;
    }
    .model-centered-head .tag {
      justify-content:center;
    }
    .model-centered-head h2 {
      text-wrap:balance;
    }
    .model-centered-head .brand-filter {
      justify-content:center;
    }
    .brand-filter .pill {
      padding:12px 22px;
      background:rgba(255,255,255,.045);
      transition:all .3s ease;
    }
    .brand-filter .pill:hover {
      background:rgba(255,255,255,.12);
      transform:translateY(-2px);
    }
    .model-progress {
      display:flex;
      align-items:center;
      gap:16px;
      max-width:1020px;
      margin:0 auto 26px;
      color:#88a7c5;
      font-size:10px;
      letter-spacing:.18em;
      font-weight:800;
    }
    .model-progress-name {
      white-space:nowrap;
    }
    .model-progress-line {
      flex:1;
      height:2px;
      background:rgba(255,255,255,.1);
      position:relative;
      overflow:hidden;
      border-radius:99px;
    }
    .model-progress-line i {
      display:block;
      width:20%;
      height:100%;
      background:linear-gradient(90deg,#4c7fff,#7be9ff);
      transition:width .55s ease;
    }
    .model-progress #modelProgressLabel {
      color:#dff3ff;
      letter-spacing:.13em;
      white-space:nowrap;
    }
    /* Entire card rises at viewport center, one per scroll step */
    #carsGrid {
      display:flex;
      align-items:center;
      flex-direction:column;
      gap:74px;
      width:100%;
      max-width:1100px;
      margin:0 auto;
    }
    #carsGrid .model-card {
      width:min(100%,1020px);
      min-height:500px;
      margin:0 auto;
      display:block;
      position:relative;
      isolation:isolate;
      padding:0;
      border-radius:38px;
      overflow:hidden;
      background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.033) 55%,rgba(255,255,255,.08));
      border:1px solid rgba(192,220,255,.19);
      box-shadow:0 28px 80px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.18);
      backdrop-filter:blur(25px);
      -webkit-backdrop-filter:blur(25px);
    }
    #carsGrid .model-card.reveal {
      opacity:0;
      transform:translate3d(0,95px,0) scale(.925);
      filter:blur(8px);
      transition:transform 1.12s cubic-bezier(.16,1,.3,1),opacity .9s ease,filter 1.0s ease,box-shadow .45s ease;
    }
    #carsGrid .model-card.reveal.visible {
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
      filter:blur(0);
    }
    #carsGrid .model-card.reveal.visible:hover {
      box-shadow:0 45px 110px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.2);
    }
    .model-card::before {
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(350px circle at var(--mx,75%) var(--my,50%),rgba(255,255,255,.1),transparent 80%);
      pointer-events:none;
      z-index:8;
      mix-blend-mode:screen;
    }
    .model-card::after {
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      opacity:.82;
      pointer-events:none;
      background:linear-gradient(110deg,transparent 25%,rgba(84,131,246,.075) 68%,transparent 100%);
    }
    .model-card[data-tone="aqua"] {
      --tone:#59d7fc;
      --toneRGB:89,215,252;
    }
    .model-card[data-tone="coral"] {
      --tone:#ff7f93;
      --toneRGB:255,127,147;
    }
    .model-card[data-tone="silver"] {
      --tone:#b5c5ff;
      --toneRGB:181,197,255;
    }
    .model-card[data-tone="green"] {
      --tone:#9fe3b4;
      --toneRGB:159,227,180;
    }
    .model-card[data-tone="sky"] {
      --tone:#6be8f5;
      --toneRGB:107,232,245;
    }
    .model-card-glow {
      position:absolute;
      right:-11%;
      top:-32%;
      width:75%;
      aspect-ratio:1;
      border-radius:50%;
      pointer-events:none;
      background:radial-gradient(circle,rgba(var(--toneRGB),.22) 0,rgba(var(--toneRGB),.065) 45%,transparent 72%);
      filter:blur(26px);
      z-index:0;
    }
    .model-card-no {
      position:absolute;
      right:33px;
      top:27px;
      z-index:5;
      color:rgba(233,244,255,.75);
      font-size:11px;
      letter-spacing:.17em;
      font-weight:800;
    }
    .model-card-no span {
      color:rgba(216,231,255,.4);
    }
    .model-card-inner {
      display:grid;
      grid-template-columns:43% 57%;
      align-items:center;
      min-height:475px;
      position:relative;
      z-index:1;
    }
    .model-copy {
      padding:69px 0 76px 64px;
      position:relative;
      z-index:5;
      min-width:0;
    }
    .model-label {
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      color:var(--tone);
      font-size:10px;
      letter-spacing:.18em;
      font-weight:800;
    }
    .model-line {
      width:23px;
      height:1px;
      background:var(--tone);
    }
    .label-dot {
      width:3px;
      height:3px;
      border-radius:50%;
      background:currentColor;
    }
    .model-copy h3 {
      font-family:Manrope,sans-serif;
      letter-spacing:-.075em;
      font-size:clamp(45px,5vw,73px);
      line-height:1.05;
      margin:24px 0 12px;
      white-space:normal;
      word-break:normal;
    }
    .model-slogan {
      font-size:15px;
      line-height:1.5;
      font-weight:700;
      color:#f4f9ff;
      margin:0 0 20px;
    }
    .model-desc {
      font-size:14px;
      line-height:1.85;
      color:#b5c6da;
      max-width:330px;
      margin:0 0 30px;
    }
    .model-actions {
      display:flex;
      align-items:center;
      gap:21px;
      flex-wrap:wrap;
    }
    .model-action {
      display:inline-flex;
      align-items:center;
      gap:20px;
      justify-content:space-between;
      border-radius:15px;
      background:rgba(var(--toneRGB),.18);
      padding:14px 18px;
      font-size:12px;
      font-weight:800;
      border:1px solid rgba(var(--toneRGB),.30);
      transition:.3s;
    }
    .model-action:hover {
      background:rgba(var(--toneRGB),.28);
      transform:translateY(-3px);
    }
    .model-category {
      font-size:11px;
      color:#a5b5ce;
      letter-spacing:.16em;
      text-transform:uppercase;
      font-weight:800;
    }
    .model-visual {
      position:relative;
      min-width:0;
      height:475px;
      isolation:isolate;
      z-index:2;
      display:grid;
      place-items:center;
      overflow:visible;
    }
    .model-halo {
      position:absolute;
      width:min(90%,490px);
      aspect-ratio:1;
      border-radius:50%;
      background:radial-gradient(circle at 50% 50%,rgba(var(--toneRGB),.12),rgba(var(--toneRGB),.025) 55%,transparent 68%);
      box-shadow:inset 0 0 0 1px rgba(var(--toneRGB),.12),0 0 0 52px rgba(var(--toneRGB),.015);
    }
    .model-orbit {
      position:absolute;
      border:1px solid rgba(var(--toneRGB),.15);
      border-radius:50%;
      aspect-ratio:1;
    }
    .orbit1 {
      width:330px;
    }
    .orbit2 {
      width:500px;
      opacity:.55;
    }
    .model-cutout {
      position:relative;
      z-index:3;
      width:115%;
      max-width:none;
      max-height:420px;
      object-fit:contain;
      filter:drop-shadow(0 35px 24px rgba(0,0,0,.48));
      transition:transform 1.1s cubic-bezier(.2,.8,.2,1);
      transform:translate3d(0,16px,0) scale(.93);
    }
    .model-card.visible .model-cutout {
      transform:translate3d(0,0,0) scale(1);
    }
    .model-card.visible:hover .model-cutout {
      transform:translate3d(-8px,-8px,0) scale(1.035);
    }
    .model-shadow {
      position:absolute;
      bottom:17%;
      left:17%;
      width:68%;
      height:9%;
      border-radius:50%;
      background:rgba(1,6,13,.45);
      filter:blur(23px);
    }
    .model-card-footer {
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      z-index:6;
      padding:17px 32px;
      border-top:1px solid rgba(255,255,255,.075);
      display:flex;
      justify-content:space-between;
      gap:10px;
      font-size:9px;
      letter-spacing:.15em;
      color:#819ab6;
      font-weight:800;
    }
    /* Ecosystem: 3 even cards followed by 2 even cards, all centered */
    #hizmetler .ecosystem-head {
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      gap:0;
      margin-bottom:46px;
    }
    #hizmetler .ecosystem-head .tag {
      justify-content:center;
    }
    #hizmetler .ecosystem-head .muted {
      max-width:650px;
      margin:20px auto 0;
    }
    #hizmetler .services-grid {
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:20px;
      align-items:stretch;
      max-width:1150px;
      margin:0 auto;
    }
    #hizmetler .svc {
      grid-column:span 2;
      width:100%;
      min-height:308px;
      padding:28px;
      border-radius:28px;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
      border:1px solid rgba(255,255,255,.13);
      overflow:hidden;
    }
    #hizmetler .svc:nth-child(n+4) {
      grid-column:span 3;
    }
    #hizmetler .svc h3 {
      margin-top:16px;
      margin-bottom:14px;
      font-size:clamp(24px,2.4vw,32px);
      line-height:1.13;
      max-width:290px;
    }
    #hizmetler .svc small {
      margin-top:14px;
      margin-bottom:0;
    }
    #hizmetler .svc p {
      max-width:340px;
    }
    #hizmetler .svc::after {
      right:-67px;
      bottom:-76px;
      width:230px;
      height:230px;
      border-radius:50%;
      transform:none;
      background:radial-gradient(circle,rgba(87,185,255,.15),transparent 72%);
    }
    .service-icon {
      display:grid;
      place-items:center;
      width:56px;
      height:56px;
      flex:0 0 auto;
      border-radius:18px;
      font-size:24px;
      color:#a4eeff;
      background:linear-gradient(140deg,rgba(76,160,255,.22),rgba(255,255,255,.055));
      border:1px solid rgba(168,222,255,.22);
    }
    .service-corner {
      position:absolute;
      right:24px;
      top:28px;
      color:#7d97ba;
      font-size:10px;
      letter-spacing:.14em;
      font-weight:800;
    }
    /* More elegant scroll reveal for all other page sections */
    .reveal {
      transition-duration:1.05s;
      transition-timing-function:cubic-bezier(.16,1,.3,1);
      filter:blur(5px);
    }
    .reveal.visible {
      filter:blur(0);
    }
    @media(max-width:1050px) {
      .model-card-inner {
        grid-template-columns:46% 54%;
      }
      .model-copy {
        padding-left:42px;
      }
      .model-cutout {
        width:113%;
      }
      #hizmetler .svc {
        grid-column:span 3;
      }
      #hizmetler .svc:nth-child(n+4) {
        grid-column:span 3;
      }
      #hizmetler .svc:last-child {
        grid-column:2 / span 4;
      }
    }
    @media(max-width:760px) {
      #modeller.section {
        padding:82px 0;
      }
      #carsGrid {
        gap:28px;
      }
      #carsGrid .model-card {
        border-radius:25px;
        min-height:0;
      }
      .model-card-inner {
        display:flex;
        flex-direction:column;
        min-height:0;
      }
      .model-copy {
        padding:36px 26px 8px;
        width:100%;
      }
      .model-copy h3 {
        font-size:48px;
        margin:17px 0 10px;
      }
      .model-copy .model-desc {
        font-size:13px;
        margin-bottom:20px;
      }
      .model-visual {
        width:100%;
        height:265px;
        overflow:hidden;
      }
      .model-cutout {
        width:100%;
        height:240px;
        object-fit:contain;
        max-height:none;
      }
      .model-card-no {
        right:22px;
        top:24px;
      }
      .model-card-footer {
        position:relative;
        padding:13px 22px;
      }
      .model-orbit.orbit2 {
        width:360px;
      }
      .model-orbit.orbit1 {
        width:235px;
      }
      .model-progress {
        margin-bottom:16px;
      }
      .model-centered-head {
        gap:23px;
        margin-bottom:36px;
      }
      #hizmetler .services-grid {
        grid-template-columns:1fr 1fr;
        gap:12px;
      }
      #hizmetler .svc,#hizmetler .svc:nth-child(n+4),#hizmetler .svc:last-child {
        grid-column:span 1;
        min-height:260px;
        padding:18px;
      }
      #hizmetler .svc:last-child {
        grid-column:1 / -1;
        min-height:210px;
      }
      #hizmetler .svc h3 {
        font-size:23px;
      }
      #hizmetler .svc p {
        font-size:13px;
        line-height:1.6;
      }
      .service-icon {
        width:43px;
        height:43px;
        border-radius:14px;
        font-size:21px;
      }
      .service-corner {
        right:14px;
        top:19px;
      }
      .hero-panel .fc1,.hero-panel .fc2,.hero-panel .fc3 {
        z-index:4;
      }
      .hero-panel .car-main {
        width:107%;
        right:-8%;
        bottom:19%;
      }
      .hero-panel .car-mini {
        width:31%;
      }
    }
    @media(max-width:420px) {
      .model-copy h3 {
        font-size:42px;
      }
      .model-visual {
        height:230px;
      }
      .model-cutout {
        height:218px;
      }
      #hizmetler .services-grid {
        grid-template-columns:1fr;
      }
      #hizmetler .svc,#hizmetler .svc:nth-child(n+4),#hizmetler .svc:last-child {
        grid-column:1/-1;
        min-height:220px;
      }
    }
    @media(prefers-reduced-motion:reduce) {
      .reveal,.model-card.reveal,.model-card.reveal.visible,.model-cutout,.model-card.visible .model-cutout,.model-card.visible:hover .model-cutout {
        transition:none!important;
        transform:none!important;
        filter:none!important;
        opacity:1!important;
      }
    }
    /* MODELLER / GİZLİ ÖĞE DURUMU */
    #carsGrid .model-card[hidden] {
      display:none!important
    }
    /* MODELLER / GÖRSELLER */
    #carsGrid .model-cutout {
      width:100%
    }
    @media(max-width:760px) {
      #carsGrid .model-cutout {
        width:100%
      }
    }
    /* MODELLER / HAREKETLİ KARUSEL */
    /* V4.3 | horizontal model carousel only; all other design remains unchanged */
    #modeller {
      padding:104px 0 98px;
      overflow:hidden;
      isolation:isolate
    }
    #modeller .model-centered-head {
      max-width:1380px;
      margin-bottom:13px
    }
    #modeller .motion-carousel-intro {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      margin:0 auto 23px
    }
    #modeller .motion-carousel-intro p {
      margin:0;
      color:#a8bbd4;
      font-size:13px;
      line-height:1.7;
      max-width:590px
    }
    #modeller .motion-hint {
      font-size:10px;
      letter-spacing:.15em;
      font-weight:800;
      color:#6dbfe7;
      white-space:nowrap
    }
    #modeller .motion-hint span {
      font-size:21px;
      margin-left:7px;
      vertical-align:middle;
      color:#a9dafa
    }
    #modeller .motion-carousel-section {
      height:620px;
      width:100%;
      position:relative;
      isolation:isolate;
      overflow:hidden;
      user-select:none;
      -webkit-user-select:none;
    }
    #modeller .motion-carousel-section::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      background:radial-gradient(ellipse 40% 56% at 50% 51%,rgba(49,115,211,.24),transparent 75%)
    }
    #modeller .motion-carousel-section::after {
      content:"";
      position:absolute;
      bottom:-185px;
      left:-5%;
      width:110%;
      height:340px;
      border-radius:50%;
      background:radial-gradient(ellipse at 55% 25%,rgba(78,140,248,.23),rgba(55,70,194,.09) 45%,transparent 78%);
      pointer-events:none;
      filter:blur(15px);
      z-index:-1
    }
    #modeller .motion-aurora {
      position:absolute;
      top:45px;
      left:50%;
      transform:translateX(-50%);
      width:min(1040px,95vw);
      height:520px;
      background:radial-gradient(ellipse at center,rgba(37,130,231,.17),rgba(35,66,136,.06) 42%,transparent 73%);
      pointer-events:none;
      z-index:-1;
      animation:motionAmbient 10s ease-in-out infinite alternate
    }
    #modeller .motion-orbit {
      border:1px solid rgba(108,161,247,.10);
      pointer-events:none;
      border-radius:50%;
      position:absolute;
      top:56%;
      left:50%;
      transform:translate(-50%,-50%);
      z-index:-1
    }
    #modeller .motion-orbit-a {
      height:550px;
      width:970px
    }
    #modeller .motion-orbit-b {
      height:690px;
      width:1240px;
      border-color:rgba(129,115,217,.065)
    }
    #modeller .motion-carousel-stage {
      position:absolute;
      inset:0 66px 60px;
      outline:none;
      touch-action:pan-y;
      cursor:grab;
      perspective:1400px;
    }
    #modeller .motion-carousel-stage:active {
      cursor:grabbing
    }
    #modeller .motion-carousel-stage:focus-visible {
      outline:2px solid #7de0ff;
      outline-offset:-4px;
      border-radius:26px
    }
    #modeller .motion-car {
      --card-width:355px;
      --card-height:480px;
      position:absolute;
      left:50%;
      top:51%;
      width:var(--card-width);
      height:var(--card-height);
      border:1px solid rgba(172,204,255,.33);
      border-radius:27px;
      overflow:hidden;
      display:block;
      transform-origin:50% 50%;
      background:linear-gradient(147deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 31%,rgba(10,24,51,.18) 56%,var(--car-tint) 130%),linear-gradient(160deg,#192b4c 0%,#1a2c4b 40%,#101a33 100%);
      -webkit-backdrop-filter:blur(19px);
      backdrop-filter:blur(19px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 25px 52px rgba(0,0,0,.27);
      transition:transform .85s cubic-bezier(.2,.75,.13,1),opacity .72s ease,box-shadow .72s ease,border-color .72s ease,filter .72s ease;
      will-change:transform;
      cursor:pointer;
      transform:translate(-50%,-50%) translateX(calc(var(--offset,0) * clamp(160px,21vw,292px))) scale(var(--scale,.78)) rotateY(var(--angle,0deg));
      opacity:var(--opacity,1);
      filter:brightness(var(--brightness,.88));
      z-index:var(--z,1)
    }
    #modeller .motion-car::before {
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(ellipse at 55% 76%,var(--car-light),transparent 64%);
      pointer-events:none
    }
    #modeller .motion-car::after {
      content:"";
      position:absolute;
      inset:0;
      box-shadow:inset 0 0 38px rgba(207,233,255,.075);
      border-radius:inherit;
      pointer-events:none
    }
    #modeller .motion-car.is-active {
      border-color:rgba(154,206,255,.87);
      box-shadow:0 0 0 2px rgba(94,156,247,.28),0 0 38px rgba(78,133,250,.38),0 35px 72px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.2);
      filter:brightness(1)
    }
    #modeller .motion-car-shine {
      position:absolute;
      inset:-1px;
      background:linear-gradient(118deg,transparent 11%,rgba(255,255,255,.09) 30%,transparent 46%);
      pointer-events:none;
      mix-blend-mode:screen;
      z-index:2
    }
    #modeller .motion-car-content {
      position:absolute;
      top:0;
      left:0;
      right:0;
      padding:28px 25px;
      z-index:5;
      pointer-events:none;
      text-shadow:0 1px 8px rgba(4,11,27,.36)
    }
    #modeller .motion-car-top {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      min-height:25px
    }
    #modeller .motion-brand {
      font-size:11px;
      letter-spacing:.19em;
      font-weight:800;
      color:#c0d6f4
    }
    #modeller .motion-new {
      font-size:11px;
      font-weight:800;
      color:#092348;
      background:linear-gradient(125deg,#91deff,#70a8ff);
      padding:7px 12px;
      border-radius:100px;
      box-shadow:0 0 22px rgba(95,166,255,.4)
    }
    #modeller .motion-car h3 {
      font-size:clamp(24px,2.4vw,36px);
      font-family:Manrope,Inter,sans-serif;
      letter-spacing:-.06em;
      line-height:1.08;
      margin:14px 0 8px;
      max-width:100%;
      color:white
    }
    #modeller .motion-slogan {
      color:#d7e6f6;
      line-height:1.48;
      font-size:13px;
      margin:0;
      max-width:290px
    }
    #modeller .motion-car-art {
      position:absolute;
      inset:150px 0 53px;
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none
    }
    #modeller .motion-car-orbit {
      position:absolute;
      left:6%;
      right:6%;
      bottom:14%;
      height:120px;
      transform:perspective(700px) rotateX(76deg);
      border:1px solid rgba(197,218,255,.20);
      border-radius:50%;
      box-shadow:0 0 32px rgba(87,143,255,.15)
    }
    #modeller .motion-car-art img {
      max-width:none;
      width:101%;
      height:auto;
      max-height:260px;
      object-fit:contain;
      filter:drop-shadow(0 22px 19px rgba(0,0,0,.45));
      transform:translateY(17px) scale(1.02);
      transition:transform .65s cubic-bezier(.2,.8,.2,1)
    }
    #modeller .motion-car.is-active .motion-car-art img {
      transform:translateY(12px) scale(1.07)
    }
    #modeller .motion-car-cta {
      position:absolute;
      bottom:15px;
      left:50%;
      transform:translateX(-50%) translateY(9px);
      white-space:nowrap;
      display:flex;
      align-items:center;
      gap:13px;
      background:rgba(12,29,64,.50);
      border:1px solid rgba(205,226,255,.57);
      border-radius:100px;
      padding:10px 17px;
      font-size:12px;
      font-weight:750;
      letter-spacing:.01em;
      opacity:0;
      z-index:8;
      pointer-events:none;
      transition:opacity .3s,transform .3s,background .25s
    }
    #modeller .motion-car.is-active .motion-car-cta {
      opacity:1;
      transform:translateX(-50%) translateY(0);
      pointer-events:auto
    }
    #modeller .motion-car-cta:hover {
      background:rgba(66,130,228,.58)
    }
    #modeller .motion-arrow {
      position:absolute;
      z-index:20;
      top:47%;
      transform:translateY(-50%);
      width:52px;
      height:52px;
      border-radius:50%;
      background:linear-gradient(135deg,rgba(60,96,156,.55),rgba(8,23,51,.72));
      border:1px solid rgba(217,233,255,.60);
      color:white;
      display:grid;
      place-items:center;
      font-family:Inter,sans-serif;
      font-weight:400;
      font-size:38px;
      line-height:1;
      cursor:pointer;
      box-shadow:0 9px 20px rgba(0,0,0,.25);
      transition:background .2s,transform .2s
    }
    #modeller .motion-arrow:hover {
      transform:translateY(-50%) scale(1.08);
      background:rgba(91,151,244,.55)
    }
    #modeller .motion-prev {
      left:max(14px,calc((100% - 1490px)/2))
    }
    #modeller .motion-next {
      right:max(14px,calc((100% - 1490px)/2))
    }
    #modeller .motion-carousel-bottom {
      position:absolute;
      left:50%;
      bottom:13px;
      transform:translateX(-50%);
      width:min(750px,calc(100% - 52px));
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:12px;
      z-index:30
    }
    #modeller .motion-count {
      color:white;
      letter-spacing:.1em;
      font-weight:800;
      font-size:13px;
      font-variant-numeric:tabular-nums
    }
    #modeller .motion-count span {
      color:#6e879e;
      font-weight:600
    }
    #modeller .motion-model-name {
      font-size:11px;
      letter-spacing:.07em;
      color:#a4c8e8;
      text-align:right;
      font-weight:700;
      white-space:nowrap
    }
    #modeller .motion-dots {
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:center
    }
    #modeller .motion-dot {
      width:28px;
      height:3px;
      border:0;
      border-radius:100px;
      cursor:pointer;
      background:rgba(204,227,255,.20);
      transition:background .4s,width .4s
    }
    #modeller .motion-dot.is-active {
      width:45px;
      background:#8fd9ff;
      box-shadow:0 0 13px rgba(100,198,255,.5)
    }
    #modeller .motion-car[hidden] {
      display:none!important
    }
    @keyframes motionAmbient {
      to {
        transform:translateX(-50%) scale(1.09);
        opacity:.66
      }
    }
    @media(max-width:1100px) {
      #modeller .motion-car {
        --card-width:320px;
        --card-height:455px
      }
      #modeller .motion-carousel-section {
        height:600px
      }
      #modeller .motion-car-art {
        inset:142px 0 51px
      }
    }
    @media(max-width:700px) {
      #modeller {
        padding:78px 0 56px
      }
      #modeller .model-centered-head {
        display:block
      }
      #modeller .brand-filter {
        margin-top:23px
      }
      #modeller .motion-carousel-intro {
        margin-top:14px;
        margin-bottom:10px
      }
      #modeller .motion-hint {
        display:none
      }
      #modeller .motion-carousel-section {
        height:520px
      }
      #modeller .motion-carousel-stage {
        inset:0 10px 58px
      }
      #modeller .motion-car {
        --card-width:270px;
        --card-height:394px;
        transform:translate(-50%,-50%) translateX(calc(var(--offset,0) * clamp(140px,42vw,205px))) scale(var(--scale,.78)) rotateY(var(--angle,0deg));
        border-radius:23px
      }
      #modeller .motion-car-content {
        padding:24px 19px
      }
      #modeller .motion-car h3 {
        font-size:28px;
        margin:13px 0 7px
      }
      #modeller .motion-car-art {
        inset:130px 0 48px
      }
      #modeller .motion-car-art img {
        max-height:215px
      }
      #modeller .motion-car-cta {
        bottom:12px;
        padding:9px 14px;
        font-size:11px
      }
      #modeller .motion-arrow {
        width:38px;
        height:38px;
        font-size:28px;
        top:47%
      }
      #modeller .motion-prev {
        left:4px
      }
      #modeller .motion-next {
        right:4px
      }
      #modeller .motion-carousel-bottom {
        bottom:5px;
        width:calc(100% - 40px)
      }
      #modeller .motion-model-name {
        font-size:10px
      }
      #modeller .motion-dot {
        width:15px
      }
      #modeller .motion-dot.is-active {
        width:27px
      }
    }
    @media(max-width:410px) {
      #modeller .motion-car {
        --card-width:248px;
        --card-height:380px
      }
      #modeller .motion-car-art {
        inset:129px 0 46px
      }
      #modeller .motion-carousel-section {
        height:496px
      }
      #modeller .motion-count {
        font-size:11px
      }
      #modeller .motion-model-name {
        font-size:9px
      }
    }
    @media(prefers-reduced-motion:reduce) {
      #modeller .motion-car,#modeller .motion-car-art img,#modeller .motion-aurora {
        transition:none!important;
        animation:none!important
      }
    }
    /* HERO / ORANLAR VE ETKİLEŞİM */
    /* V4.5 — hero balance + cleaner cards + hover line animation */
    .hero {
      padding:110px 0 30px !important;
      min-height:auto !important
    }
    .hero-grid {
      grid-template-columns:.95fr 1.05fr !important;
      gap:26px !important;
      align-items:center !important
    }
    .hero-copy {
      padding:18px 0 10px !important;
      max-width:640px
    }
    .hero .title-xl {
      font-size:clamp(52px,5vw,86px) !important;
      line-height:.94 !important;
      max-width:620px
    }
    .hero-copy .muted {
      max-width:560px !important;
      font-size:15px !important
    }
    .hero-stage {
      height:635px !important
    }
    .hero-visual {
      border-radius:34px !important
    }
    .hero-gridlines {
      display:none !important
    }
    .hero-badges {
      top:24px !important;
      right:24px !important;
      z-index:7 !important;
      gap:8px !important
    }
    .hero-badge {
      padding:9px 13px !important;
      font-size:10px !important;
      letter-spacing:.1em !important
    }
    .hero-caption {
      top:82px !important;
      left:24px !important;
      max-width:min(350px,calc(100% - 390px)) !important;
      padding:20px 22px !important;
      background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.08) 52%,rgba(255,255,255,.12) 100%) !important
    }
    .hero-caption h4 {
      font-size:20px !important
    }
    .hero-mini-row {
      left:24px !important;
      right:24px !important;
      bottom:22px !important;
      grid-template-columns:1fr 1fr !important;
      gap:14px !important
    }
    .hero-mini {
      padding:16px 18px !important;
      background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05) 55%,rgba(96,142,255,.10) 100%) !important
    }
    .hero-mini h5 {
      font-size:15px !important;
      line-height:1.35 !important
    }
    .hero-mini p {
      font-size:12.5px !important
    }
    .hero-orbit {
      width:68% !important;
      height:68% !important;
      right:5% !important;
      top:8% !important;
      box-shadow:0 0 0 60px rgba(120,196,255,.035),0 0 0 120px rgba(120,196,255,.02) !important
    }
    .metric {
      min-width:150px !important;
      padding:16px 16px 14px !important
    }
    .metric b {
      font-size:29px !important
    }
    .metric span {
      font-size:11px !important
    }
    .btns {
      gap:12px !important
    }
    .kicker-row {
      margin-top:18px !important;
      gap:18px !important
    }
    .info-card {
      background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04) 52%,rgba(81,124,255,.08) 100%) !important;
      border:1px solid rgba(255,255,255,.10) !important;
      box-shadow:0 18px 36px rgba(0,0,0,.18) !important
    }
    .info-card::after {
      background:radial-gradient(circle,rgba(132,204,255,.14),transparent 70%) !important
    }
    .services-grid .svc {
      background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.04) 48%,rgba(74,125,255,.09) 100%) !important;
      border:1px solid rgba(255,255,255,.10) !important;
      transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease !important;
      isolation:isolate;
      box-shadow:0 16px 32px rgba(0,0,0,.14)
    }
    .services-grid .svc::after {
      background:radial-gradient(circle at 70% 75%,rgba(89,156,255,.16),transparent 45%) !important;
      right:auto !important;
      bottom:auto !important;
      inset:auto 0 0 auto !important;
      width:220px !important;
      height:220px !important;
      border-radius:50% !important;
      transform:none !important;
      opacity:.9 !important
    }
    .services-grid .svc::before {
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(115deg,rgba(115,209,255,0) 0%,rgba(115,209,255,.95) 32%,rgba(255,255,255,.95) 50%,rgba(115,209,255,.95) 68%,rgba(115,209,255,0) 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      opacity:0;
      transform:translateX(-135%);
      pointer-events:none;
      z-index:2
    }
    .services-grid .svc:hover {
      transform:translateY(-8px) !important;
      border-color:rgba(116,206,255,.42) !important;
      box-shadow:0 22px 46px rgba(0,0,0,.26),0 0 0 1px rgba(113,207,255,.12) inset !important
    }
    .services-grid .svc:hover::before {
      opacity:1;
      animation:svcSweep 1.5s linear infinite
    }
    @keyframes svcSweep {
      0% {
        transform:translateX(-135%)
      }
      100% {
        transform:translateX(135%)
      }
    }
    @media (max-width:1400px) {
      .hero .title-xl {
        font-size:clamp(50px,4.7vw,80px) !important;
        max-width:580px
      }
      .hero-stage {
        height:600px !important
      }
      .hero-caption {
        max-width:min(320px,calc(100% - 360px)) !important
      }
    }
    @media (max-width:1100px) {
      .hero {
        padding:118px 0 34px !important
      }
      .hero-grid {
        grid-template-columns:1fr !important
      }
      .hero .title-xl {
        font-size:clamp(48px,9vw,72px) !important;
        max-width:none !important
      }
      .hero-stage {
        height:580px !important
      }
      .hero-caption {
        top:24px !important;
        left:18px !important;
        max-width:calc(100% - 36px) !important
      }
      .hero-badges {
        left:18px !important;
        right:18px !important;
        top:auto !important;
        bottom:158px !important;
        justify-content:flex-start !important;
        flex-wrap:wrap !important
      }
      .hero-mini-row {
        left:18px !important;
        right:18px !important;
        bottom:18px !important;
        grid-template-columns:1fr !important
      }
      .kicker-row {
        grid-template-columns:1fr 1fr !important
      }
    }
    @media (max-width:760px) {
      .hero {
        padding-top:108px !important
      }
      .hero-stage {
        height:540px !important
      }
      .hero .title-xl {
        font-size:clamp(42px,12vw,60px) !important
      }
      .hero-copy .muted {
        font-size:14px !important
      }
      .hero-metrics {
        display:grid !important;
        grid-template-columns:1fr !important
      }
      .hero-badges {
        bottom:170px !important
      }
      .kicker-row {
        grid-template-columns:1fr !important
      }
    }
    /* HERO / YERLEŞİM */
    .hero.hero-clean {
      padding:110px 0 18px !important;
      min-height:auto !important
    }
    .hero-clean .wrap {
      position:relative
    }
    .hero-board {
      position:relative;
      min-height:640px;
      border-radius:42px;
      overflow:hidden;
      background:linear-gradient(135deg,rgba(7,16,31,.96),rgba(6,18,36,.92) 42%,rgba(10,20,42,.9) 100%);
      box-shadow:0 30px 60px rgba(0,0,0,.28)
    }
    .hero-board::before {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(4,11,22,.86) 0%,rgba(4,11,22,.72) 28%,rgba(4,11,22,.18) 56%,rgba(4,11,22,.44) 100%);
      z-index:1;
      pointer-events:none
    }
    .hero-board::after {
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(120deg,rgba(140,207,255,.22),rgba(255,255,255,.05),rgba(130,94,255,.18));
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      pointer-events:none;
      opacity:.9;
      z-index:6
    }
    .hero-scene-clean {
      position:absolute;
      inset:0;
      z-index:0;
      overflow:hidden
    }
    .hero-bg-clean {
      position:absolute;
      right:-3%;
      top:-5%;
      width:72%;
      height:110%;
      object-fit:cover;
      object-position:center right;
      animation:heroZoom 18s ease-in-out infinite alternate;
      filter:brightness(.92) saturate(1.04) contrast(1.03)
    }
    .hero-glow-clean {
      position:absolute;
      right:10%;
      top:16%;
      width:42%;
      height:56%;
      border-radius:40px;
      background:radial-gradient(circle at center,rgba(85,170,255,.22),transparent 65%);
      filter:blur(10px)
    }
    .hero-orbit-clean {
      position:absolute;
      right:6%;
      top:6%;
      width:58%;
      height:78%;
      border-radius:42px;
      border:1px solid rgba(122,199,255,.14);
      box-shadow:0 0 0 40px rgba(120,196,255,.03),0 0 0 90px rgba(120,196,255,.018)
    }
    .hero-board .spotlight {
      border-radius:42px;
      z-index:4
    }
    .hero-chip-row {
      position:absolute;
      top:26px;
      right:26px;
      display:flex;
      gap:10px;
      z-index:7
    }
    .hero-chip-row .hero-badge {
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.12);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      font-size:11px;
      letter-spacing:.11em;
      text-transform:uppercase;
      color:#fff;
      font-weight:800
    }
    .hero-content-overlay {
      position:absolute;
      left:54px;
      top:48px;
      bottom:48px;
      z-index:7;
      max-width:560px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:flex-start
    }
    .hero-content-overlay .title-xl {
      font-size:clamp(54px,5.4vw,94px);
      line-height:.94;
      max-width:560px
    }
    .hero-content-overlay .muted {
      max-width:500px;
      font-size:16px;
      margin:24px 0 34px
    }
    .hero-content-overlay .btns {
      gap:12px
    }
    .hero-content-overlay .tag {
      color:#9bdfff
    }
    .hero-support {
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:18px;
      margin-top:22px
    }
    .support-card {
      border-radius:26px;
      padding:24px;
      position:relative;
      overflow:hidden;
      background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04) 52%,rgba(81,124,255,.08) 100%);
      border:1px solid rgba(255,255,255,.1);
      box-shadow:0 18px 36px rgba(0,0,0,.18);
      transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease
    }
    .support-card::after {
      content:"";
      position:absolute;
      right:-18%;
      bottom:-45%;
      width:180px;
      height:180px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(132,204,255,.14),transparent 70%)
    }
    .support-card::before {
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(115deg,rgba(115,209,255,0) 0%,rgba(115,209,255,.95) 32%,rgba(255,255,255,.95) 50%,rgba(115,209,255,.95) 68%,rgba(115,209,255,0) 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      opacity:0;
      transform:translateX(-135%);
      pointer-events:none;
      z-index:2
    }
    .support-card:hover {
      transform:translateY(-8px);
      border-color:rgba(116,206,255,.42);
      box-shadow:0 22px 46px rgba(0,0,0,.26),0 0 0 1px rgba(113,207,255,.12) inset
    }
    .support-card:hover::before {
      opacity:1;
      animation:svcSweep 1.5s linear infinite
    }
    .support-card.stat {
      grid-column:span 2;
      min-height:126px;
      display:flex;
      flex-direction:column;
      justify-content:center
    }
    .support-card.stat b {
      display:block;
      font-size:24px;
      line-height:1.05;
      font-family:Manrope;
      font-weight:800;
      letter-spacing:-.05em
    }
    .support-card.stat span {
      display:block;
      margin-top:8px;
      color:#c1d0e0;
      font-size:13px
    }
    .support-card.feature {
      grid-column:span 2;
      min-height:168px
    }
    .support-card.feature small {
      display:block;
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#97e2ff;
      font-weight:800;
      margin-bottom:12px
    }
    .support-card.feature h3 {
      font-size:26px;
      line-height:1.14;
      margin:0 0 10px;
      font-family:Manrope;
      letter-spacing:-.04em
    }
    .support-card.feature p {
      margin:0;
      color:#c8d6e7;
      line-height:1.7;
      font-size:14px
    }
    /* remove older hero-specific metric layout spacing */
    .hero-metrics {
      display:none !important
    }
    @media (max-width:1400px) {
      .hero-board {
        min-height:610px
      }
      .hero-content-overlay .title-xl {
        font-size:clamp(52px,4.9vw,84px)
      }
      .hero-bg-clean {
        width:74%
      }
      .hero-content-overlay {
        max-width:520px
      }
    }
    @media (max-width:1100px) {
      .hero.hero-clean {
        padding-top:118px !important
      }
      .hero-board {
        min-height:560px
      }
      .hero-bg-clean {
        width:100%;
        right:-10%;
        opacity:.95
      }
      .hero-board::before {
        background:linear-gradient(180deg,rgba(4,11,22,.52),rgba(4,11,22,.62) 34%,rgba(4,11,22,.72) 100%)
      }
      .hero-chip-row {
        left:20px;
        right:20px;
        top:20px;
        justify-content:flex-start;
        flex-wrap:wrap
      }
      .hero-content-overlay {
        left:28px;
        right:28px;
        top:auto;
        bottom:34px;
        max-width:none;
        justify-content:flex-end
      }
      .hero-content-overlay .title-xl {
        font-size:clamp(46px,8vw,72px);
        max-width:640px
      }
      .hero-support {
        grid-template-columns:repeat(2,1fr)
      }
      .support-card.stat,.support-card.feature {
        grid-column:span 1
      }
    }
    @media (max-width:760px) {
      .hero-board {
        min-height:510px;
        border-radius:30px
      }
      .hero-chip-row {
        display:none
      }
      .hero-content-overlay {
        left:20px;
        right:20px;
        bottom:24px
      }
      .hero-content-overlay .title-xl {
        font-size:clamp(40px,11vw,58px);
        line-height:.96
      }
      .hero-content-overlay .muted {
        font-size:14px;
        margin:18px 0 24px;
        max-width:none
      }
      .hero-support {
        grid-template-columns:1fr
      }
      .support-card.stat,.support-card.feature {
        grid-column:span 1
      }
      .support-card.feature h3 {
        font-size:22px
      }
    }
    /* HERO / BUTONLAR */
    /* V4.7: floating 3D actions over the cinematic card. Other sections unchanged. */
    .hero-content-overlay .btns {
      position:relative;
      z-index:20;
      align-self:flex-start;
      display:flex;
      align-items:center;
      gap:13px !important;
      padding:11px 12px;
      margin-top:2px;
      border-radius:24px;
      background:linear-gradient(145deg,rgba(7,20,38,.58),rgba(22,37,68,.28));
      border:1px solid rgba(211,238,255,.12);
      -webkit-backdrop-filter:blur(18px) saturate(1.3);
      backdrop-filter:blur(18px) saturate(1.3);
      box-shadow:0 22px 55px rgba(0,8,24,.42),0 1px 0 rgba(255,255,255,.09) inset;
      isolation:isolate;
    }
    .hero-content-overlay .btns::before {
      content:"";
      position:absolute;
      inset:-18px -22px;
      z-index:-1;
      pointer-events:none;
      background:radial-gradient(ellipse at 38% 56%,rgba(33,165,255,.19),transparent 71%);
      filter:blur(13px);
      border-radius:35px;
    }
    .hero-content-overlay .btns .btn {
      position:relative;
      z-index:2;
      min-height:53px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:15px 23px !important;
      border-radius:15px !important;
      font-size:13px !important;
      letter-spacing:.002em;
      font-weight:800;
      -webkit-backdrop-filter:blur(16px);
      backdrop-filter:blur(16px);
      transform:translate3d(0,0,0);
      transition:transform .23s cubic-bezier(.2,.8,.2,1),box-shadow .23s ease,border-color .23s ease,background .23s ease !important;
      will-change:transform;
    }
    .hero-content-overlay .btns .btn.primary {
      background:linear-gradient(142deg,#55cfff 0%,#288bdb 44%,#2761c7 100%) !important;
      border:1px solid rgba(207,244,255,.85) !important;
      color:#fff !important;
      text-shadow:0 1px 1px rgba(8,41,75,.55);
      box-shadow:0 6px 0 #153d77,0 13px 24px rgba(7,23,52,.5),    inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 5px rgba(8,35,96,.24) !important;
    }
    .hero-content-overlay .btns .btn.secondary {
      background:linear-gradient(145deg,rgba(73,111,163,.42),rgba(13,34,66,.86)) !important;
      border:1px solid rgba(205,234,255,.52) !important;
      color:#fff !important;
      box-shadow:0 6px 0 rgba(7,24,50,.96),0 13px 23px rgba(0,9,28,.46),    inset 0 2px 0 rgba(255,255,255,.16) !important;
    }
    .hero-content-overlay .btns .btn:hover, .hero-content-overlay .btns .btn:focus-visible {
      transform:translate3d(0,-4px,0) !important;
      outline:none;
      border-color:#e3f8ff !important;
      box-shadow:0 9px 0 rgba(18,56,106,.92),0 19px 32px rgba(0,11,31,.52),0 0 26px rgba(86,201,255,.3),inset 0 2px 0 rgba(255,255,255,.39) !important;
    }
    .hero-content-overlay .btns .btn:active {
      transform:translate3d(0,3px,0) !important;
      box-shadow:0 2px 0 #153d77,0 5px 12px rgba(0,9,28,.38),inset 0 2px 0 rgba(255,255,255,.19) !important;
    }
    .hero-content-overlay .muted {
      margin-bottom:22px !important
    }
    /* Formally separate the once-only supporting information from the hero. */
    .hero-support {
      margin-top:26px !important
    }
    @media (max-width:760px) {
      .hero-content-overlay .btns {
        padding:8px;
        gap:9px !important;
        max-width:100%;
        flex-wrap:wrap
      }
      .hero-content-overlay .btns .btn {
        min-height:46px;
        padding:11px 13px !important;
        font-size:12px !important
      }
      .hero-content-overlay .muted {
        margin-bottom:12px !important
      }
      .hero-board::before {
        background:linear-gradient(180deg,rgba(3,10,22,.74) 0%,rgba(3,10,22,.82) 48%,rgba(3,10,22,.84) 100%) !important
      }
      .hero-bg-clean {
        filter:brightness(.77) saturate(.95) !important
      }
    }
    @media (prefers-reduced-motion:reduce) {
      .hero-content-overlay .btns .btn {
        transition:none !important;
        will-change:auto
      }
    }
    /* GENEL / AURORA */
    /* Continuous, animated blue/purple ambient lighting — background only. */
    html {
      background:#06101e;
    }
    body {
      position:relative;
      isolation:isolate;
      overflow-x:hidden !important;
      background:linear-gradient(150deg,#06101e 0%,#071529 43%,#080f22 80%,#071322 100%) !important;
    }
    /* Keep lighting above the page background, but below every existing section. */
    body > .otv-ambient {
      position:fixed;
      inset:0;
      z-index:0 !important;
      pointer-events:none;
      overflow:hidden;
      isolation:isolate;
      opacity:1;
      mix-blend-mode:screen;
    }
    body > section, body > .hero-support, body > footer {
      position:relative;
      z-index:1;
    }
    body > nav.nav {
      position:fixed;
      z-index:60;
    }
    /* Remove the hard background boundary between hero and the following cards. */
    .hero.hero-clean {
      background:transparent !important;
    }
    .hero.hero-clean::before,.hero.hero-clean::after {
      content:none !important;
      background:none !important;
    }
    /* Atmosphere is deliberately visible, but the deep navy base remains intact. */
    .otv-ambient .aurora-field {
      position:absolute;
      inset:-16% -18%;
      background:radial-gradient(ellipse 53% 43% at 12% 28%,rgba(18,119,254,.26),transparent 78%),  radial-gradient(ellipse 42% 53% at 81% 20%,rgba(122,57,243,.28),transparent 78%),  radial-gradient(ellipse 53% 40% at 64% 79%,rgba(52,90,238,.22),transparent 80%);
      filter:blur(20px);
      transform:translate3d(0,0,0);
      will-change:transform;
      animation:auroraFieldMove 16s ease-in-out infinite alternate;
    }
    .otv-ambient .aurora-light {
      position:absolute;
      border-radius:50%;
      mix-blend-mode:screen;
      will-change:transform,opacity;
    }
    .otv-ambient .aurora-blue {
      width:76vw;
      height:96vh;
      left:-22vw;
      top:-22vh;
      background:radial-gradient(ellipse at 50% 50%,rgba(15,159,255,.58) 0%,rgba(21,113,240,.43) 26%,rgba(30,81,213,.19) 51%,transparent 73%);
      filter:blur(46px);
      animation:auroraBlueMove 13s ease-in-out infinite alternate;
    }
    .otv-ambient .aurora-violet {
      width:72vw;
      height:108vh;
      right:-27vw;
      top:-12vh;
      background:radial-gradient(ellipse at 50% 50%,rgba(160,72,253,.58) 0%,rgba(104,64,229,.39) 29%,rgba(79,55,185,.16) 56%,transparent 75%);
      filter:blur(49px);
      animation:auroraVioletMove 17s ease-in-out infinite alternate;
    }
    .otv-ambient .aurora-lilac {
      width:66vw;
      height:88vh;
      left:24vw;
      top:37vh;
      background:radial-gradient(ellipse at 50% 50%,rgba(184,89,255,.40) 0%,rgba(133,59,216,.28) 34%,rgba(101,59,213,.12) 60%,transparent 76%);
      filter:blur(54px);
      animation:auroraLilacMove 15s ease-in-out infinite alternate;
    }
    .otv-ambient .aurora-cyan {
      width:65vw;
      height:72vh;
      right:5vw;
      bottom:-29vh;
      background:radial-gradient(ellipse at 50% 50%,rgba(40,193,255,.47) 0%,rgba(28,126,238,.26) 38%,transparent 73%);
      filter:blur(59px);
      animation:auroraCyanMove 18s ease-in-out infinite alternate;
    }
    .otv-ambient .aurora-rose {
      width:49vw;
      height:66vh;
      left:-12vw;
      bottom:-24vh;
      background:radial-gradient(ellipse at 50% 50%,rgba(230,85,215,.31) 0%,rgba(134,70,214,.18) 39%,transparent 75%);
      filter:blur(60px);
      animation:auroraRoseMove 21s ease-in-out infinite alternate;
    }
    /* Aurora glow traverses the screen as the colored patches drift. */
    @keyframes auroraBlueMove {
      0% {
        transform:translate3d(0,0,0) scale(1);
        opacity:.93
      }
      100% {
        transform:translate3d(21vw,17vh,0) scale(1.13);
        opacity:1
      }
    }
    @keyframes auroraVioletMove {
      0% {
        transform:translate3d(0,0,0) scale(1.04);
        opacity:.94
      }
      100% {
        transform:translate3d(-23vw,19vh,0) scale(1.16);
        opacity:1
      }
    }
    @keyframes auroraLilacMove {
      0% {
        transform:translate3d(0,0,0) scale(1);
        opacity:.68
      }
      100% {
        transform:translate3d(-16vw,-27vh,0) scale(1.12);
        opacity:.97
      }
    }
    @keyframes auroraCyanMove {
      0% {
        transform:translate3d(0,0,0) scale(.97);
        opacity:.76
      }
      100% {
        transform:translate3d(-20vw,-18vh,0) scale(1.17);
        opacity:.95
      }
    }
    @keyframes auroraRoseMove {
      0% {
        transform:translate3d(0,0,0) scale(1);
        opacity:.78
      }
      100% {
        transform:translate3d(13vw,-14vh,0) scale(1.08);
        opacity:.9
      }
    }
    @keyframes auroraFieldMove {
      0% {
        transform:translate3d(0,0,0) rotate(0deg)
      }
      100% {
        transform:translate3d(-5vw,5vh,0) rotate(5deg)
      }
    }
    @media (max-width:760px) {
      .otv-ambient .aurora-light {
        filter:blur(46px)
      }
      .otv-ambient .aurora-blue {
        width:115vw;
        left:-47vw;
        height:78vh
      }
      .otv-ambient .aurora-violet {
        width:110vw;
        right:-55vw;
        height:78vh
      }
      .otv-ambient .aurora-lilac {
        width:92vw;
        left:3vw
      }
      .otv-ambient .aurora-cyan {
        width:115vw;
        right:-30vw
      }
    }
    @media (prefers-reduced-motion:reduce) {
      .otv-ambient .aurora-light,.otv-ambient .aurora-field {
        animation:none !important;
        will-change:auto;
      }
    }
    /* İLETİŞİM / FORM */
    /* Additive conversion areas — original 3D, carousel and aurora styles remain untouched. */
    #bilgi-formu {
      scroll-margin-top:115px
    }
    .lead-hero-btn {
      background:linear-gradient(135deg,rgba(68,203,250,.92),rgba(70,102,227,.9))!important;
      color:#fff!important;
      border:1px solid rgba(166,234,255,.65)!important;
      box-shadow:0 12px 27px rgba(24,117,253,.32),inset 0 1px rgba(255,255,255,.42),inset 0 -8px 13px rgba(6,28,95,.2)!important;
      position:relative;
      white-space:nowrap;
      padding-inline:15px!important;
      gap:7px!important;
      font-weight:800!important;
      transform:translateZ(13px)
    }
    .lead-hero-btn:hover {
      transform:translate3d(0,-5px,16px)!important;
      box-shadow:0 19px 42px rgba(20,140,253,.5),0 0 22px rgba(80,190,255,.3),inset 0 1px rgba(255,255,255,.5)!important
    }
    .lead-btn-icon {
      font-size:16px;
      color:#c7f6ff
    }
    .lead-midbar-section {
      padding:2px 0 95px;
      position:relative
    }
    .lead-midbar {
      position:relative;
      isolation:isolate;
      overflow:hidden;
      min-height:208px;
      padding:40px 46px;
      border-radius:30px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:35px;
      border-color:rgba(157,208,255,.32);
      background:linear-gradient(112deg,rgba(51,106,180,.25),rgba(33,37,83,.32) 51%,rgba(123,54,159,.27))!important;
      box-shadow:0 25px 70px rgba(3,8,27,.22),inset 0 1px rgba(255,255,255,.18)
    }
    .lead-midbar::after {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius:inherit;
      background:linear-gradient(107deg,transparent 30%,rgba(195,229,255,.08) 45%,transparent 62%);
      transform:translateX(-85%);
      transition:transform 1.1s ease
    }
    .lead-midbar:hover::after {
      transform:translateX(85%)
    }
    .lead-midbar-glow {
      position:absolute;
      right:1%;
      top:-100px;
      width:410px;
      height:300px;
      border-radius:50%;
      background:radial-gradient(ellipse,rgba(125,96,255,.26),transparent 68%);
      pointer-events:none
    }
    .lead-midbar-copy {
      z-index:1
    }
    .lead-midbar h2 {
      font:800 clamp(27px,3.1vw,43px)/1.1 Manrope,Inter,sans-serif;
      letter-spacing:-.055em;
      margin:13px 0 10px
    }
    .lead-midbar h2 span {
      background:linear-gradient(90deg,#fff,#80dfff);
      color:transparent;
      -webkit-background-clip:text;
      background-clip:text
    }
    .lead-midbar p {
      font-size:14px;
      line-height:1.7;
      color:#bbcfe6;
      margin:0;
      max-width:660px
    }
    .lead-midbar-btn {
      position:relative;
      z-index:2;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:65px;
      min-width:198px;
      white-space:nowrap;
      border-radius:18px;
      padding:18px 22px;
      background:linear-gradient(125deg,#5dd5f5,#3468e8);
      border:1px solid rgba(214,247,255,.58);
      color:white;
      font-size:14px;
      font-weight:800;
      box-shadow:0 15px 35px rgba(22,105,245,.28),inset 0 1px rgba(255,255,255,.44);
      transition:transform .3s,box-shadow .3s
    }
    .lead-midbar-btn:hover {
      transform:translateY(-5px);
      box-shadow:0 23px 48px rgba(24,132,255,.44)
    }
    .lead-form-layout {
      margin-top:58px;
      display:grid;
      grid-template-columns:.87fr 1.13fr;
      gap:clamp(24px,5vw,74px);
      align-items:center;
      position:relative
    }
    .lead-form-story {
      padding:24px 0
    }
    .lead-form-story h2 {
      font:800 clamp(40px,4.7vw,66px)/1.05 Manrope,Inter,sans-serif;
      letter-spacing:-.07em;
      margin:21px 0 20px
    }
    .lead-form-intro {
      max-width:475px;
      font-size:15px;
      line-height:1.8;
      color:#bdcce1
    }
    .lead-form-points {
      display:grid;
      gap:19px;
      margin-top:35px
    }
    .lead-form-points>div {
      display:flex;
      align-items:flex-start;
      gap:18px
    }
    .lead-form-points>div>span {
      display:grid;
      place-items:center;
      border-radius:13px;
      min-width:45px;
      height:45px;
      font-size:12px;
      font-weight:800;
      color:#9fe7ff;
      background:rgba(108,166,253,.12);
      border:1px solid rgba(156,212,255,.23)
    }
    .lead-form-points p {
      color:#b8c8dc;
      font-size:13px;
      line-height:1.8;
      margin:0;
      padding-top:4px
    }
    .lead-form-points strong {
      display:block;
      font-size:14px;
      color:#fff
    }
    .lead-form-small-note {
      font-size:11px;
      line-height:1.7;
      color:#9fb2ca;
      margin-top:28px;
      max-width:475px
    }
    .lead-form-shell {
      padding:clamp(25px,3vw,42px);
      border-radius:30px;
      border-color:rgba(168,212,255,.28);
      background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.07) 48%,rgba(135,109,240,.10))!important;
      box-shadow:0 30px 70px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.2)
    }
    .lead-form-top {
      display:flex;
      justify-content:space-between;
      gap:15px;
      align-items:center
    }
    .lead-form-overline {
      color:#83d9fc;
      font-size:10px;
      letter-spacing:.19em;
      font-weight:800
    }
    .lead-form-top h3 {
      font-size:clamp(20px,2.1vw,28px);
      margin-top:10px;
      letter-spacing:-.04em
    }
    .lead-form-step {
      border:1px solid rgba(166,216,255,.24);
      border-radius:11px;
      background:rgba(90,159,255,.11);
      padding:10px 12px;
      color:#d9edff;
      font:800 12px Inter,sans-serif;
      white-space:nowrap
    }
    .lead-progress {
      display:flex;
      gap:7px;
      margin:25px 0
    }
    .lead-progress span {
      display:block;
      width:50%;
      height:4px;
      background:rgba(255,255,255,.13);
      border-radius:100px;
      transition:background .3s
    }
    .lead-progress .on {
      background:linear-gradient(90deg,#4fd5f5,#8f86ff);
      box-shadow:0 0 12px rgba(82,178,248,.23)
    }
    .lead-fieldset {
      border:0;
      margin:0;
      padding:0;
      min-width:0
    }
    .lead-fieldset[hidden] {
      display:none!important
    }
    .lead-form-caption {
      font-size:14px;
      color:#c1d0e3;
      margin:0 0 19px
    }
    .lead-field {
      margin-bottom:17px
    }
    .lead-field label {
      display:block;
      margin-bottom:9px;
      font-size:12px;
      font-weight:750;
      color:#e4edf9
    }
    .lead-field label>span:not(.lead-optional) {
      color:#93e8ff
    }
    .lead-optional {
      font-size:11px;
      color:#9cb0ca;
      font-weight:500
    }
    .lead-field input,.lead-field select,.lead-field textarea {
      display:block;
      width:100%;
      padding:14px 16px;
      min-height:49px;
      border-radius:14px;
      border:1px solid rgba(178,211,255,.20);
      background:rgba(3,12,30,.28);
      color:#f7fbff;
      outline:none;
      font:500 14px Inter,sans-serif;
      transition:border-color .25s,background .25s,box-shadow .25s
    }
    .lead-field select {
      appearance:auto;
      color-scheme:dark
    }
    .lead-field input::placeholder,.lead-field textarea::placeholder {
      color:#849ab4
    }
    .lead-field input:focus,.lead-field select:focus,.lead-field textarea:focus {
      border-color:#77d7ff;
      box-shadow:0 0 0 3px rgba(84,168,255,.13);
      background:rgba(4,14,32,.46)
    }
    .lead-field textarea {
      min-height:90px;
      resize:vertical
    }
    .lead-next,.lead-submit {
      font:800 14px Inter,sans-serif;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:25px;
      background:linear-gradient(125deg,#55c3ed,#3c71e9);
      border:1px solid rgba(210,242,255,.5);
      color:white;
      padding:16px 20px;
      border-radius:15px;
      cursor:pointer;
      box-shadow:0 12px 26px rgba(30,104,224,.27),inset 0 1px rgba(255,255,255,.33);
      transition:transform .25s,box-shadow .25s
    }
    .lead-next {
      width:100%
    }
    .lead-next:hover,.lead-submit:hover {
      transform:translateY(-3px);
      box-shadow:0 17px 34px rgba(37,132,241,.35)
    }
    .lead-back {
      border:1px solid rgba(186,218,255,.2);
      color:#d7e8f8;
      border-radius:15px;
      padding:14px 17px;
      background:rgba(255,255,255,.07);
      font:750 13px Inter;
      cursor:pointer
    }
    .lead-form-actions {
      display:flex;
      gap:10px;
      justify-content:space-between
    }
    .lead-submit {
      flex:1
    }
    .lead-field-footnote {
      font-size:11px;
      color:#95a8bf;
      margin:13px 0 0
    }
    .lead-form-error {
      color:#ffbfca;
      margin:6px 0 12px;
      font-size:12px;
      min-height:2px;
      line-height:1.6
    }
    .lead-consent {
      display:flex;
      align-items:flex-start;
      gap:12px;
      color:#dbe5f3;
      font-size:12px;
      line-height:1.65;
      margin:9px 0 13px;
      cursor:pointer
    }
    .lead-consent input {
      accent-color:#62c4f9;
      min-width:17px;
      height:17px;
      margin-top:2px
    }
    .lead-consent small {
      display:block;
      color:#9aafc5;
      font-size:11px;
      margin-top:4px
    }
    .lead-send-result {
      margin-top:19px;
      border:1px solid rgba(117,213,255,.31);
      background:rgba(63,127,180,.16);
      padding:16px;
      border-radius:15px;
      color:#dcf1fc;
      font-size:12px;
      line-height:1.7
    }
    .lead-send-result[hidden] {
      display:none!important
    }
    .lead-send-result a {
      text-decoration:underline;
      color:#8de6ff
    }
    .visually-hidden {
      position:absolute!important;
      width:1px!important;
      height:1px!important;
      padding:0!important;
      margin:-1px!important;
      overflow:hidden!important;
      clip:rect(0,0,0,0)!important;
      white-space:nowrap!important;
      border:0!important
    }
    @media(max-width:1100px) {
      .lead-form-layout {
        grid-template-columns:1fr;
        gap:20px
      }
      .lead-form-story {
        padding:16px 0
      }
      .lead-form-points {
        grid-template-columns:repeat(3,1fr);
        gap:14px
      }
      .lead-form-points>div {
        gap:11px
      }
      .lead-midbar {
        padding:32px
      }
    }
    @media(max-width:760px) {
      .lead-hero-btn {
        font-size:12px!important
      }
      .lead-midbar-section {
        padding-bottom:66px
      }
      .lead-midbar {
        padding:27px 23px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:20px
      }
      .lead-midbar-btn {
        width:100%
      }
      .lead-form-layout {
        margin-top:38px
      }
      .lead-form-story h2 {
        font-size:44px
      }
      .lead-form-points {
        grid-template-columns:1fr
      }
      .lead-form-shell {
        padding:23px 19px
      }
      .lead-form-top h3 {
        font-size:22px
      }
    }
    @media(prefers-reduced-motion:reduce) {
      .lead-midbar::after {
        transition:none!important
      }
      .lead-hero-btn,.lead-midbar-btn,.lead-next,.lead-submit {
        transition:none!important
      }
    }
    /* İLETİŞİM / FORM KONUMU */
    /* V5.1: Only lead CTA color, hero text fit and mid-page CTA changed.
   Existing 3D hero, mouse layers, carousel, ambient aurora and form JS remain intact. */
    /* Bright blue -> violet -> pink, the user's catalog palette. */
    .lead-midbar {
      background:linear-gradient(114deg,rgba(30,114,226,.93) 0%,rgba(66,115,245,.92) 30%,rgba(113,67,223,.94) 65%,rgba(161,60,211,.92) 100%) !important;
      border:1px solid rgba(218,239,255,.59) !important;
      box-shadow:0 28px 75px rgba(53,69,180,.39),0 12px 45px rgba(176,61,223,.21),inset 0 1px 1px rgba(255,255,255,.42) !important;
      transition:box-shadow .5s ease,border-color .5s ease !important;
    }
    .lead-midbar:before {
      content:"";
      position:absolute;
      inset:-52% -22%;
      pointer-events:none;
      border-radius:inherit;
      background:radial-gradient(ellipse 44% 72% at 18% 50%,rgba(71,210,255,.52),transparent 72%),              radial-gradient(ellipse 50% 70% at 76% 35%,rgba(225,87,250,.48),transparent 74%);
      animation:v51ColorDrift 12s ease-in-out infinite alternate;
      opacity:.87;
      z-index:0;
    }
    .lead-midbar-glow {
      width:510px !important;
      height:390px !important;
      right:-8% !important;
      top:-72% !important;
      background:radial-gradient(ellipse,rgba(249,124,252,.57),rgba(147,83,239,.3) 38%,transparent 73%) !important;
      animation:v51GlowDrift 9s ease-in-out infinite alternate;
      filter:blur(12px);
    }
    .lead-midbar:hover {
      border-color:rgba(231,246,255,.86) !important;
      box-shadow:0 28px 86px rgba(67,104,240,.42),0 16px 50px rgba(204,85,251,.3),inset 0 1px 1px rgba(255,255,255,.45) !important
    }
    .lead-midbar .tag {
      color:#e4f9ff !important
    }
    .lead-midbar h2 {
      color:#fff;
      text-shadow:0 5px 22px rgba(30,20,106,.19)
    }
    .lead-midbar h2 span {
      background:linear-gradient(105deg,#e6fcff,#a3f0ff 40%,#fff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent
    }
    .lead-midbar p {
      color:#e6efff !important
    }
    .lead-midbar-btn {
      background:linear-gradient(125deg,#a6edff 0%,#f5faff 46%,#f4deff 100%) !important;
      color:#212459 !important;
      border-color:rgba(255,255,255,.88) !important;
      box-shadow:0 13px 36px rgba(41,26,126,.27),inset 0 1px rgba(255,255,255,.82) !important;
    }
    .lead-midbar-btn:hover {
      box-shadow:0 20px 48px rgba(51,30,143,.39),0 0 34px rgba(217,199,255,.33) !important
    }
    /* Hero text fits within the SAME 3D board; no changes to the 3D depth handlers. */
    @media(min-width:1101px) {
      .hero-clean .hero-board {
        min-height:clamp(665px, calc(100svh - 135px), 820px) !important
      }
      .hero-clean .hero-content-overlay {
        left:clamp(38px,3.7vw,56px) !important;
        top:36px !important;
        bottom:36px !important;
        max-width:min(46%,600px) !important
      }
      .hero-clean .hero-content-overlay .title-xl {
        font-size:clamp(46px,4.35vw,72px) !important;
        line-height:.98 !important;
        letter-spacing:-.065em !important;
        max-width:100% !important;
        margin:16px 0 0 !important;
        overflow-wrap:normal
      }
      .hero-clean .hero-content-overlay .muted {
        font-size:clamp(13px,.94vw,15px) !important;
        line-height:1.68 !important;
        margin:20px 0 24px !important;
        max-width:480px !important
      }
      .hero-clean .hero-content-overlay .btns {
        display:flex !important;
        gap:12px !important;
        flex-wrap:wrap !important;
        max-width:100%
      }
      .hero-clean .hero-content-overlay .btn {
        font-size:13px !important;
        padding:15px 18px !important;
        max-width:100%
      }
    }
    @media(min-width:1101px) and (max-height:780px) {
      .hero-clean .hero-board {
        min-height:660px !important
      }
      .hero-clean .hero-content-overlay .title-xl {
        font-size:clamp(44px,4vw,64px) !important
      }
      .hero-clean .hero-content-overlay .muted {
        margin:17px 0 19px !important;
        line-height:1.56 !important
      }
    }
    /* The primary lead CTA becomes the strongest action, with gentle animated color. */
    .hero-clean .lead-hero-btn {
      background:linear-gradient(120deg,#45d4f4 0%,#378ff5 31%,#6565ef 65%,#a15bee 100%) !important;
      background-size:220% 220% !important;
      animation:v51LeadGradient 7s ease-in-out infinite alternate;
      border:1px solid rgba(224,244,255,.76) !important;
      box-shadow:0 18px 36px rgba(65,111,245,.35),0 0 20px rgba(161,87,244,.24),inset 0 2px 0 rgba(255,255,255,.36),inset 0 -11px 15px rgba(30,25,112,.16) !important;
      padding-inline:21px !important;
      gap:10px !important;
    }
    .hero-clean .lead-hero-btn:hover {
      box-shadow:0 21px 50px rgba(82,91,244,.55),0 0 32px rgba(180,93,239,.37),inset 0 2px 0 rgba(255,255,255,.52) !important;
    }
    .hero-clean .lead-hero-btn .lead-btn-icon {
      color:#eafaff
    }
    @keyframes v51LeadGradient {
      0% {
        background-position:0 45%
      }
      100% {
        background-position:100% 55%
      }
    }
    @keyframes v51ColorDrift {
      0% {
        transform:translate3d(-5%,1%,0) scale(1)
      }
      100% {
        transform:translate3d(9%,-5%,0) scale(1.14)
      }
    }
    @keyframes v51GlowDrift {
      0% {
        transform:translate3d(-6%,0,0) scale(1)
      }
      100% {
        transform:translate3d(12%,16%,0) scale(1.18)
      }
    }
    @media(max-width:1100px) {
      .hero-clean .hero-board {
        min-height:clamp(650px,85svh,820px) !important
      }
      .hero-clean .hero-content-overlay {
        left:28px !important;
        right:28px !important;
        bottom:28px !important;
        top:auto !important;
        max-width:calc(100% - 56px) !important
      }
      .hero-clean .hero-content-overlay .title-xl {
        font-size:clamp(44px,7.2vw,66px) !important;
        line-height:.98 !important;
        letter-spacing:-.067em !important
      }
      .hero-clean .hero-content-overlay .muted {
        margin:16px 0 23px !important;
        font-size:14px !important;
        line-height:1.62 !important
      }
    }
    @media(max-width:760px) {
      .hero-clean .hero-board {
        min-height:clamp(600px,83svh,760px) !important
      }
      .hero-clean .hero-content-overlay {
        left:20px !important;
        right:20px !important;
        bottom:23px !important;
        max-width:calc(100% - 40px) !important
      }
      .hero-clean .hero-content-overlay .title-xl {
        font-size:clamp(36px,9.5vw,54px) !important;
        line-height:1 !important
      }
      .hero-clean .hero-content-overlay .muted {
        font-size:13px !important;
        line-height:1.55 !important;
        margin:13px 0 18px !important
      }
      .hero-clean .hero-content-overlay .btns {
        display:flex !important;
        flex-wrap:wrap !important;
        gap:9px !important;
        width:100%
      }
      .hero-clean .hero-content-overlay .btn {
        font-size:12px !important;
        padding:13px 13px !important;
        gap:6px !important
      }
      .lead-midbar {
        border-radius:24px !important
      }
      .lead-midbar h2 {
        font-size:clamp(27px,8vw,42px) !important
      }
    }
    @media(max-width:410px) {
      .hero-clean .hero-board {
        min-height:675px !important
      }
      .hero-clean .hero-content-overlay .title-xl {
        font-size:clamp(35px,9.2vw,42px) !important
      }
      .hero-clean .hero-content-overlay .btn {
        font-size:11.5px !important;
        padding:12px 12px !important
      }
    }
    @media(prefers-reduced-motion:reduce) {
      .lead-midbar:before,.lead-midbar-glow,.hero-clean .lead-hero-btn {
        animation:none !important
      }
    }
    /* GENEL / RENKLER */
    :root {
      --cyan:#39caff;
      --blue:#2a9bff;
      --pink:#ff75bf;
      --violet:#8c54e9;
      --yellow:#efff26
    }
    html {
      scroll-padding-top:120px
    }
    body {
      background:#09112b
    }
    .otv-ambient {
      opacity:1
    }
    .nav-shell {
      background:linear-gradient(120deg,rgba(25,68,132,.36),rgba(103,61,160,.26) 54%,rgba(30,30,79,.42));
      border-color:rgba(189,209,255,.22)
    }
    .nav .logo-mark {
      border-color:#88e1ff;
      box-shadow:0 0 14px rgba(76,213,255,.4)
    }
    .nav .logo small {
      color:#b1d7f6
    }
    .tag {
      color:#96e8ff
    }
    .tag::before {
      background:linear-gradient(90deg,#3ad5f5,#eb86d5)
    }
    .hero.hero-clean {
      padding-top:120px!important
    }
    .hero-board {
      background:linear-gradient(132deg,rgba(4,14,38,.86),rgba(19,42,95,.38) 56%,rgba(50,29,91,.34));
      box-shadow:0 36px 105px rgba(2,4,25,.44),0 0 65px rgba(42,118,255,.16),inset 0 1px rgba(255,255,255,.24)
    }
    .hero-board::before {
      background:linear-gradient(90deg,rgba(4,11,37,.98) 0%,rgba(9,20,57,.95) 26%,rgba(15,28,70,.80) 45%,rgba(36,21,89,.40) 65%,rgba(11,17,51,.1) 100%)
    }
    .hero-scene-clean img.hero-bg-clean {
      width:75%;
      right:-1%;
      top:-2%;
      height:105%;
      object-fit:cover;
      object-position:center 62%;
      filter:brightness(.81) contrast(1.05) saturate(1.14)
    }
    .hero-board .spotlight {
      background:radial-gradient(360px circle at var(--mx,65%) var(--my,40%),rgba(157,200,255,.18),transparent 64%)
    }
    .hero-content-overlay {
      max-width:650px!important
    }
    .hero-content-overlay .title-xl {
      font-size:clamp(53px,5.15vw,84px)!important;
      max-width:620px!important;
      line-height:.99!important;
      letter-spacing:-.064em
    }
    .hero-content-overlay .muted {
      max-width:510px!important;
      color:#e5edff;
      font-size:15px!important;
      line-height:1.75
    }
    .hero-content-overlay .btns {
      margin-top:2px;
      flex-wrap:wrap
    }
    .hero-chip-row .hero-badge {
      background:rgba(24,23,70,.42);
      border:1px solid rgba(207,232,255,.36)
    }
    .accent {
      background:linear-gradient(90deg,#4ee4fa 3%,#74d4ff 54%,#e4a7f8 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent
    }
    .accent2 {
      background:linear-gradient(90deg,#78e1ff,#af9bff 50%,#ff82bf);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent
    }
    .lead-hero-btn,.btn.lead-hero-btn {
      background:linear-gradient(118deg,#17c8f0 0%,#347dff 52%,#bd57e3 100%)!important;
      border:1px solid rgba(255,255,255,.52)!important;
      color:#fff!important;
      box-shadow:0 13px 28px rgba(53,104,245,.35),inset 0 1px rgba(255,255,255,.52)!important;
      font-weight:800
    }
    .lead-hero-btn:hover {
      filter:brightness(1.13)
    }
    .support-card {
      background:linear-gradient(135deg,rgba(106,180,248,.19),rgba(125,89,207,.16) 55%,rgba(227,120,174,.13));
      border:1px solid rgba(221,234,255,.21)
    }
    .support-card.stat b {
      font-size:24px!important;
      color:#f1fbff
    }
    .support-card.feature h3 {
      font-size:23px
    }
    #modeller .motion-carousel-section::before {
      background:radial-gradient(ellipse 55% 62% at 50% 44%,rgba(63,154,240,.23),rgba(143,70,207,.13) 60%,transparent 79%)
    }
    #modeller .motion-car {
      border-color:rgba(204,228,255,.33);
      background:linear-gradient(142deg,rgba(255,255,255,.18),rgba(105,142,225,.15) 35%,rgba(75,39,126,.28) 100%),linear-gradient(160deg,rgba(10,29,68,.74),rgba(26,20,76,.72))
    }
    #modeller .motion-car.is-active {
      border-color:#aeefff;
      box-shadow:0 0 0 2px rgba(100,221,255,.34),0 0 44px rgba(91,174,255,.35),0 30px 75px rgba(1,8,39,.42)
    }
    #modeller .motion-car .motion-car-content {
      text-shadow:0 2px 18px rgba(5,10,35,.65)
    }
    #modeller .motion-car-cta {
      color:#fff;
      text-decoration:none
    }
    .fine-print,.benefit-disclaimer {
      color:#adbfde;
      font-size:12px;
      line-height:1.7;
      margin-top:20px
    }
    .benefit-btn {
      margin-top:18px
    }
    .access-section {
      padding-top:80px;
      padding-bottom:100px
    }
    .access-grid {
      display:grid;
      grid-template-columns:1.03fr .97fr;
      gap:36px;
      align-items:center
    }
    .access-photo {
      position:relative;
      border-radius:36px;
      overflow:hidden;
      min-height:530px;
      border:1px solid rgba(198,229,255,.25);
      box-shadow:0 28px 80px rgba(2,8,33,.35)
    }
    .access-photo img {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .9s ease
    }
    .access-photo:hover img {
      transform:scale(1.045)
    }
    .access-photo::after {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(0deg,rgba(6,12,40,.52),transparent 45%)
    }
    .photo-tag {
      position:absolute;
      left:24px;
      bottom:24px;
      z-index:2;
      padding:12px 20px;
      border-radius:16px;
      background:rgba(18,30,80,.55);
      border:1px solid rgba(255,255,255,.27);
      backdrop-filter:blur(16px);
      font-size:12px;
      font-weight:750;
      letter-spacing:.06em
    }
    .access-copy .muted {
      max-width:520px;
      margin:26px 0
    }
    .access-points {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      margin:25px 0 30px
    }
    .access-points span {
      padding:13px 15px;
      border-radius:15px;
      background:rgba(255,255,255,.075);
      border:1px solid rgba(255,255,255,.14);
      color:#e4ecff;
      font-weight:650;
      font-size:13px;
      backdrop-filter:blur(10px)
    }
    .medicana-section {
      padding-top:30px
    }
    .medicana-panel {
      position:relative;
      border-radius:42px;
      min-height:520px;
      overflow:hidden;
      display:grid;
      grid-template-columns:1.16fr .84fr;
      align-items:center;
      padding:50px 0 0 58px;
      box-shadow:0 26px 80px rgba(5,5,35,.27);
      background:linear-gradient(115deg,rgba(25,124,227,.36) 0%,rgba(79,80,169,.31) 50%,rgba(241,111,180,.29) 100%)
    }
    .medicana-panel:before {
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 18% 26%,rgba(35,223,244,.25),transparent 36%),radial-gradient(circle at 79% 80%,rgba(255,123,179,.2),transparent 42%);
      pointer-events:none
    }
    .medicana-copy {
      position:relative;
      z-index:2;
      padding:0 0 55px
    }
    .medicana-copy .title-lg {
      font-size:clamp(36px,4vw,62px)
    }
    .medicana-copy .muted {
      max-width:620px;
      margin:20px 0
    }
    .yellow-highlight {
      color:#f1ff48
    }
    .medicana-image {
      align-self:end;
      height:500px;
      display:flex;
      align-items:end;
      justify-content:center;
      overflow:hidden;
      position:relative
    }
    .medicana-image img {
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center top;
      border-radius:30px 0 38px 0;
      mask-image:linear-gradient(90deg,transparent,#000 20%,#000 100%)
    }
    .health-benefits {
      display:flex;
      gap:13px;
      margin-bottom:24px;
      flex-wrap:wrap
    }
    .health-benefits>div {
      min-width:170px;
      flex:1;
      max-width:245px;
      padding:17px;
      border-radius:20px;
      background:rgba(8,24,70,.32);
      border:1px solid rgba(255,255,255,.21);
      backdrop-filter:blur(15px)
    }
    .health-benefits b {
      display:block;
      font-size:29px;
      color:#f1ff48;
      line-height:1.1
    }
    .health-benefits span {
      display:block;
      color:#e7edff;
      font-size:12px;
      line-height:1.5;
      margin-top:6px
    }
    #avantajlar .svc {
      background:linear-gradient(155deg,rgba(81,148,236,.20),rgba(133,74,189,.15) 80%);
      border-color:rgba(255,255,255,.18)
    }
    #avantajlar .services-grid .svc:nth-child(4) {
      background:linear-gradient(150deg,rgba(47,126,218,.20),rgba(122,54,185,.20))
    }
    #avantajlar .services-grid .svc:last-child {
      background:linear-gradient(150deg,rgba(89,77,201,.20),rgba(228,102,171,.16))
    }
    .faq-a {
      color:#e0e9ff
    }
    #bilgi-formu {
      scroll-margin-top:120px
    }
    .only-mobile {
      display:none
    }
    @media(max-width:1100px) {
      .hero-content-overlay {
        max-width:70%!important
      }
      .hero-content-overlay .title-xl {
        font-size:clamp(48px,7vw,76px)!important
      }
      .hero-scene-clean img.hero-bg-clean {
        width:100%;
        right:-8%;
        object-position:center
      }
      .access-grid {
        grid-template-columns:1fr;
        gap:34px
      }
      .access-photo {
        min-height:480px
      }
      .medicana-panel {
        padding:42px 0 0 35px
      }
    }
    @media(max-width:760px) {
      .hero-board {
        min-height:660px!important
      }
      .hero-content-overlay {
        max-width:none!important;
        bottom:30px!important;
        top:auto!important;
        left:24px!important;
        right:24px!important;
        justify-content:flex-end!important
      }
      .hero-content-overlay .title-xl {
        font-size:clamp(41px,9.6vw,61px)!important;
        line-height:1.01!important
      }
      .hero-content-overlay .muted {
        font-size:13px!important;
        margin:18px 0 20px!important
      }
      .hero-scene-clean img.hero-bg-clean {
        width:100%;
        height:100%;
        right:0;
        top:0;
        object-position:center 36%;
        filter:brightness(.65) saturate(1.1)
      }
      .hero-board::before {
        background:linear-gradient(180deg,rgba(3,9,25,.06),rgba(7,13,45,.22) 24%,rgba(9,16,54,.80) 54%,rgba(10,13,45,.96) 100%)
      }
      .hero-content-overlay .btns {
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px
      }
      .hero-content-overlay .btn {
        font-size:12px;
        padding:13px 10px;
        justify-content:center;
        text-align:center
      }
      .access-photo {
        min-height:370px
      }
      .access-points {
        grid-template-columns:1fr
      }
      .medicana-panel {
        display:block;
        padding:32px 22px 0;
        min-height:0
      }
      .medicana-copy {
        padding-bottom:18px
      }
      .medicana-image {
        height:300px;
        margin:0 -22px
      }
      .medicana-image img {
        border-radius:0 0 38px 38px;
        mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 100%)
      }
      .only-mobile {
        display:block
      }
      .health-benefits>div {
        min-width:130px
      }
    }
    @media(prefers-reduced-motion:reduce) {
      .otv-ambient *, .hero-bg-clean,.hero-sheen,.hero-orbit-clean {
        animation:none!important;
        transition:none!important
      }
    }
    /* MODELLER / DETAY PENCERESİ */
    #modeller .model-extra-actions {
      max-width:780px;
      margin:8px auto 0;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
      position:relative;
      z-index:3
    }
    #modeller .model-extra-actions span {
      font-size:13px;
      color:#d2e6ff
    }
    #modeller .model-detail-button {
      padding:13px 22px;
      border-radius:999px;
      background:linear-gradient(125deg,rgba(66,151,239,.37),rgba(153,86,226,.31));
      color:white;
      border:1px solid rgba(195,233,255,.48);
      box-shadow:inset 0 1px rgba(255,255,255,.20),0 12px 28px rgba(0,0,0,.16);
      font-size:13px;
      font-weight:760;
      cursor:pointer;
      transition:transform .25s
    }
    #modeller .model-detail-button:hover {
      transform:translateY(-4px)
    }
    .model-detail-dialog {
      position:fixed;
      inset:0;
      margin:auto;
      width:min(600px,calc(100vw - 32px));
      max-height:min(85vh,780px);
      overflow:auto;
      color:#fff;
      background:linear-gradient(140deg,rgba(24,51,108,.97),rgba(58,26,116,.96) 62%,rgba(117,46,145,.94));
      border:1px solid rgba(219,236,255,.45);
      border-radius:30px;
      box-shadow:0 35px 120px rgba(2,5,26,.75);
      padding:0;
      z-index:300
    }
    .model-detail-dialog::backdrop {
      background:rgba(1,6,23,.69);
      backdrop-filter:blur(8px)
    }
    .model-dialog-body {
      padding:32px
    }
    .model-dialog-top {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:15px
    }
    .model-close {
      border:1px solid rgba(255,255,255,.3);
      color:white;
      background:rgba(255,255,255,.11);
      width:36px;
      height:36px;
      border-radius:13px;
      font-size:26px;
      line-height:1;
      cursor:pointer
    }
    .model-detail-dialog h2 {
      margin:22px 0 12px
    }
    .model-detail-dialog .muted {
      font-size:15px;
      color:#d6e3fb
    }
    .model-detail-line {
      display:grid;
      grid-template-columns:180px 1fr;
      gap:14px;
      align-items:start;
      padding:18px 0;
      border-bottom:1px solid rgba(255,255,255,.13)
    }
    .model-detail-line span {
      color:#b9d5f8;
      font-size:12px;
      font-weight:700
    }
    .model-detail-line strong {
      font-size:14px;
      line-height:1.7;
      font-weight:600
    }
    #modelDetailCTA {
      margin-top:22px
    }
    @media(max-width:550px) {
      .model-dialog-body {
        padding:22px
      }
      .model-detail-line {
        grid-template-columns:1fr;
        gap:6px
      }
    }
    /* AVANTAJLAR / KART DÜZENİ */
    #avantajlar .services-grid {
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:20px;
      align-items:stretch;
      max-width:1150px;
      margin:0 auto
    }
    #avantajlar .services-grid .svc {
      grid-column:span 2;
      width:100%;
      min-height:308px;
      padding:28px;
      display:flex;
      flex-direction:column;
      justify-content:flex-start
    }
    #avantajlar .services-grid .svc:nth-child(n+4) {
      grid-column:span 3
    }
    #avantajlar .svc h3 {
      margin:16px 0 14px;
      font-size:clamp(24px,2.4vw,32px);
      line-height:1.13;
      max-width:310px
    }
    #avantajlar .svc small {
      margin-top:14px;
      margin-bottom:0
    }
    #modeller .model-extra-actions {
      margin-top:12px;
      margin-bottom:0
    }
    @media(max-width:1050px) {
      #avantajlar .services-grid .svc,#avantajlar .services-grid .svc:nth-child(n+4) {
        grid-column:span 3
      }
      #avantajlar .services-grid .svc:last-child {
        grid-column:2/span 4
      }
    }
    @media(max-width:760px) {
      #avantajlar .services-grid {
        grid-template-columns:1fr 1fr;
        gap:12px
      }
      #avantajlar .services-grid .svc,#avantajlar .services-grid .svc:nth-child(n+4),#avantajlar .services-grid .svc:last-child {
        grid-column:span 1;
        min-height:250px;
        padding:18px
      }
      #avantajlar .services-grid .svc:last-child {
        grid-column:1/-1;
        min-height:210px
      }
    }
    @media(max-width:420px) {
      #avantajlar .services-grid {
        grid-template-columns:1fr
      }
      #avantajlar .services-grid .svc,#avantajlar .services-grid .svc:nth-child(n+4),#avantajlar .services-grid .svc:last-child {
        grid-column:1/-1;
        min-height:220px
      }
    }
    /* HERO / RENKLİ GEÇİŞ */
    /* Hero opening made more vibrant for Engelsiz Showroom */
    .nav-shell {
      background:linear-gradient(90deg,rgba(28,92,198,.30) 0%,rgba(77,73,214,.26) 52%,rgba(188,96,240,.28) 100%) !important;
      border:1px solid rgba(184,225,255,.24) !important;
      box-shadow:0 22px 44px rgba(7,16,44,.18), inset 0 1px rgba(255,255,255,.14) !important;
      backdrop-filter:blur(18px) saturate(1.12) !important;
      -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
    }
    .logo small {
      color:#dce8f8 !important
    }
    .hero {
      background:     radial-gradient(circle at 12% 10%, rgba(34,186,255,.30), transparent 28%),     radial-gradient(circle at 86% 6%, rgba(193,92,255,.26), transparent 32%),     radial-gradient(circle at 34% 86%, rgba(255,111,191,.15), transparent 26%),     linear-gradient(180deg,#154d9b 0%, #3551b6 28%, #5841b1 56%, #55328f 100%) !important;
    }
    .hero::before {
      background:linear-gradient(90deg,rgba(12,22,64,.22) 0%,rgba(14,28,74,.18) 34%,rgba(19,33,84,.06) 60%,rgba(40,18,94,.12) 100%) !important;
    }
    .hero::after {
      background:linear-gradient(180deg,transparent,rgba(34,33,84,.30)) !important;
    }
    .hero-board {
      background:linear-gradient(130deg,rgba(10,40,117,.42),rgba(52,67,182,.28) 34%,rgba(111,65,189,.22) 72%,rgba(228,114,194,.16) 100%) !important;
      box-shadow:0 30px 60px rgba(25,33,92,.18), inset 0 1px rgba(255,255,255,.14) !important;
    }
    .hero-board::before {
      background:     radial-gradient(circle at 10% 26%, rgba(70,214,255,.18), transparent 26%),     radial-gradient(circle at 86% 12%, rgba(226,107,255,.18), transparent 28%),     linear-gradient(90deg, rgba(7,18,58,.54) 0%, rgba(10,24,76,.44) 24%, rgba(11,28,86,.20) 50%, rgba(26,21,88,.18) 74%, rgba(34,18,76,.24) 100%) !important;
    }
    .hero-board::after {
      background:linear-gradient(120deg,rgba(153,232,255,.34),rgba(255,255,255,.08),rgba(220,118,255,.28)) !important;
    }
    .hero-bg-clean {
      filter:brightness(1.02) saturate(1.08) contrast(1.01) !important
    }
    .hero-glow-clean {
      right:6% !important;
      top:10% !important;
      width:54% !important;
      height:70% !important;
      background:     radial-gradient(circle at 26% 58%,rgba(66,201,255,.24),transparent 42%),     radial-gradient(circle at 74% 26%,rgba(226,102,255,.20),transparent 40%),     radial-gradient(circle at 64% 74%,rgba(255,150,205,.14),transparent 42%) !important;
      filter:blur(14px) !important;
    }
    .hero-orbit-clean {
      border:1px solid rgba(170,225,255,.18) !important;
      box-shadow:0 0 0 40px rgba(107,201,255,.04),0 0 0 90px rgba(183,109,255,.03) !important;
    }
    .hero-chip-row .hero-badge {
      background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.08)) !important;
      border-color:rgba(255,255,255,.22) !important;
    }
    .hero-content-overlay .tag {
      color:#b8f0ff !important;
      text-shadow:0 0 18px rgba(111,223,255,.22)
    }
    .hero-content-overlay .title-xl {
      text-shadow:0 12px 28px rgba(18,32,92,.20) !important;
    }
    .hero-content-overlay .title-xl .accent, .hero-content-overlay .title-xl .grad, .hero-content-overlay .accent-text {
      background:linear-gradient(135deg,#57dbff 0%,#7dd3ff 24%,#86c7ff 50%,#e2a6ff 100%) !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      color:transparent !important;
    }
    .hero-content-overlay .muted {
      color:rgba(243,248,255,.92) !important;
      text-shadow:0 4px 18px rgba(24,31,88,.14) !important;
    }
    .hero-content-overlay .btn.secondary {
      background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.06) 60%,rgba(113,155,255,.08)) !important;
      border-color:rgba(188,225,255,.26) !important;
    }
    .hero-content-overlay .btn.primary, .hero-content-overlay .btn.gradient, .hero-content-overlay .btn.cta {
      background:linear-gradient(135deg,#3ec8ff 0%,#5aa6ff 32%,#7d7cff 66%,#dd77ff 100%) !important;
      border:1px solid rgba(255,255,255,.30) !important;
      box-shadow:0 18px 38px rgba(72,120,255,.24), inset 0 1px rgba(255,255,255,.34) !important;
    }
    .hero-content-overlay .btn.primary:hover, .hero-content-overlay .btn.gradient:hover, .hero-content-overlay .btn.cta:hover {
      box-shadow:0 24px 46px rgba(82,120,255,.28),0 0 28px rgba(210,116,255,.18), inset 0 1px rgba(255,255,255,.36) !important;
    }
    @media (max-width:1100px) {
      .hero {
        background:       radial-gradient(circle at 18% 10%, rgba(34,186,255,.26), transparent 28%),       radial-gradient(circle at 88% 8%, rgba(193,92,255,.24), transparent 32%),       linear-gradient(180deg,#1a4f9e 0%, #3650b1 36%, #5b3fab 72%, #5a3c95 100%) !important;
      }
      .hero-board::before {
        background:linear-gradient(180deg,rgba(10,22,64,.30) 0%,rgba(15,29,82,.28) 28%,rgba(29,28,88,.18) 66%,rgba(41,19,92,.22) 100%) !important;
      }
    }
    /* HERO / GÖRSEL KATMANLARI */
    /* Hero visual refresh inspired by Medicana gradient card */
    .hero-board {
      background:linear-gradient(120deg,rgba(23,117,214,.40) 0%,rgba(66,93,221,.34) 34%,rgba(102,73,204,.28) 62%,rgba(196,105,221,.20) 100%) !important;
      box-shadow:0 30px 70px rgba(31,40,102,.18), inset 0 1px rgba(255,255,255,.14) !important;
    }
    .hero-board::before {
      background:     radial-gradient(circle at 16% 18%, rgba(78,212,255,.24), transparent 26%),     linear-gradient(90deg, rgba(6,18,56,.66) 0%, rgba(10,24,72,.52) 20%, rgba(20,31,88,.24) 40%, rgba(61,47,154,.16) 58%, rgba(92,60,172,.14) 72%, rgba(123,70,180,.14) 100%) !important;
    }
    .hero-board::after {
      background:linear-gradient(120deg,rgba(181,237,255,.36),rgba(255,255,255,.08),rgba(223,122,255,.28)) !important;
    }
    .hero-scene-clean::before {
      content:"";
      position:absolute;
      right:1.6%;
      top:12%;
      width:49%;
      height:72%;
      border-radius:34px;
      background:linear-gradient(135deg,#36c8ff 0%, #5b9bff 24%, #6f86ff 48%, #8e7cff 66%, #f09bd5 100%);
      opacity:.96;
      z-index:0;
      box-shadow:0 18px 40px rgba(77,109,255,.14);
    }
    .hero-scene-clean::after {
      content:"";
      position:absolute;
      right:-4%;
      bottom:-6%;
      width:58%;
      height:78%;
      border-radius:40px;
      background:radial-gradient(circle at 26% 30%,rgba(80,214,255,.24),transparent 28%),              radial-gradient(circle at 74% 26%,rgba(255,173,214,.20),transparent 26%),              radial-gradient(circle at 56% 72%,rgba(173,104,255,.18),transparent 30%);
      filter:blur(18px);
      z-index:0;
    }
    .hero-bg-clean {
      width:58% !important;
      height:86% !important;
      right:1.5% !important;
      top:auto !important;
      bottom:0 !important;
      object-fit:contain !important;
      object-position:center bottom !important;
      filter:brightness(1.03) saturate(1.05) contrast(1.01) !important;
      animation:heroFloat 16s ease-in-out infinite alternate !important;
      z-index:1 !important;
    }
    .hero-glow-clean {
      right:6% !important;
      top:18% !important;
      width:46% !important;
      height:62% !important;
      background:radial-gradient(circle at 22% 40%,rgba(76,205,255,.25),transparent 36%),              radial-gradient(circle at 72% 28%,rgba(255,172,213,.22),transparent 32%),              radial-gradient(circle at 58% 74%,rgba(164,110,255,.16),transparent 38%) !important;
      filter:blur(18px) !important;
    }
    .hero-orbit-clean {
      right:3% !important;
      top:10% !important;
      width:53% !important;
      height:77% !important;
      border:1px solid rgba(194,233,255,.22) !important;
      box-shadow:0 0 0 36px rgba(109,196,255,.045),0 0 0 86px rgba(194,118,255,.032) !important;
    }
    .hero-content-overlay {
      max-width:540px !important;
    }
    .hero-content-overlay .title-xl {
      font-size:clamp(52px,5.1vw,86px) !important;
      max-width:520px !important;
    }
    .hero-content-overlay .muted {
      max-width:470px !important;
    }
    @keyframes heroFloat {
      0% {
        transform:translate3d(0,0,0)
      }
      100% {
        transform:translate3d(-10px,-8px,0)
      }
    }
    @media (max-width:1200px) {
      .hero-bg-clean {
        width:62% !important;
        height:82% !important;
        right:-1% !important
      }
      .hero-scene-clean::before {
        width:55% !important;
        right:0 !important
      }
      .hero-orbit-clean {
        width:58% !important;
        right:1% !important
      }
    }
    @media (max-width:980px) {
      .hero-board::before {
        background:linear-gradient(180deg,rgba(8,20,60,.36) 0%,rgba(14,26,74,.24) 28%,rgba(47,35,118,.20) 64%,rgba(117,65,175,.20) 100%) !important
      }
      .hero-scene-clean::before {
        right:8%;
        top:16%;
        width:82%;
        height:42%
      }
      .hero-scene-clean::after {
        right:0;
        bottom:10%;
        width:90%;
        height:50%
      }
      .hero-bg-clean {
        width:88% !important;
        height:52% !important;
        right:4% !important;
        bottom:0 !important
      }
      .hero-orbit-clean {
        display:none !important
      }
    }
    /* HERO / ARKA PLAN YERLEŞİMİ */
    /* Hero full-card gradient + balanced photo */
    .hero-board {
      background:linear-gradient(120deg,#2486d8 0%,#4266d7 28%,#5e57cc 52%,#7858c9 72%,#c776d2 100%) !important;
      box-shadow:0 28px 70px rgba(33,41,108,.18), inset 0 1px rgba(255,255,255,.14) !important;
    }
    .hero-board::before {
      background:     radial-gradient(circle at 12% 22%, rgba(120,230,255,.18), transparent 24%),     linear-gradient(90deg, rgba(7,16,54,.62) 0%, rgba(10,22,66,.50) 22%, rgba(17,30,84,.30) 42%, rgba(41,38,118,.14) 62%, rgba(91,64,173,.10) 100%) !important;
    }
    .hero-board::after {
      background:linear-gradient(120deg,rgba(176,233,255,.36),rgba(255,255,255,.08),rgba(227,137,255,.26)) !important;
    }
    .hero-scene-clean::before {
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      z-index:0;
      background:     radial-gradient(circle at 10% 12%, rgba(95,216,255,.22), transparent 24%),     radial-gradient(circle at 86% 18%, rgba(248,170,218,.18), transparent 20%),     radial-gradient(circle at 66% 82%, rgba(180,114,255,.16), transparent 22%),     linear-gradient(120deg,#2d8bde 0%,#4675dc 24%,#5a63d7 47%,#6b63d2 63%,#9161d2 80%,#d27bc8 100%);
      opacity:1;
    }
    .hero-scene-clean::after {
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:     linear-gradient(90deg, rgba(5,10,34,.10) 0%, rgba(5,10,34,0) 30%, rgba(255,255,255,.04) 56%, rgba(255,255,255,.06) 100%),     radial-gradient(circle at 75% 28%, rgba(110,220,255,.14), transparent 24%),     radial-gradient(circle at 92% 72%, rgba(255,173,214,.16), transparent 22%);
    }
    .hero-bg-clean {
      width:50% !important;
      height:86% !important;
      right:4% !important;
      top:11% !important;
      bottom:auto !important;
      object-fit:cover !important;
      object-position:center center !important;
      border-radius:28px !important;
      box-shadow:0 22px 50px rgba(30,35,98,.18) !important;
      filter:brightness(1.02) saturate(1.03) contrast(1.01) !important;
      animation:heroFloatBalance 14s ease-in-out infinite alternate !important;
      z-index:1 !important;
    }
    .hero-glow-clean {
      right:6% !important;
      top:16% !important;
      width:48% !important;
      height:68% !important;
      background:radial-gradient(circle at 20% 30%,rgba(72,208,255,.20),transparent 34%),              radial-gradient(circle at 76% 24%,rgba(255,184,216,.20),transparent 30%),              radial-gradient(circle at 52% 78%,rgba(179,122,255,.18),transparent 34%) !important;
      filter:blur(16px) !important;
    }
    .hero-orbit-clean {
      right:3% !important;
      top:8% !important;
      width:54% !important;
      height:80% !important;
      border:1px solid rgba(197,231,255,.18) !important;
      box-shadow:0 0 0 32px rgba(112,198,255,.042),0 0 0 80px rgba(202,119,255,.028) !important;
    }
    .hero-content-overlay {
      max-width:540px !important;
      z-index:7 !important
    }
    .hero-content-overlay .title-xl {
      max-width:520px !important
    }
    @keyframes heroFloatBalance {
      0% {
        transform:translate3d(0,0,0)
      }
      100% {
        transform:translate3d(-8px,-6px,0)
      }
    }
    @media (max-width:1200px) {
      .hero-bg-clean {
        width:54% !important;
        right:2.5% !important;
        height:84% !important
      }
      .hero-orbit-clean {
        width:58% !important;
        right:1.5% !important
      }
      .hero-glow-clean {
        width:54% !important;
        right:2.5% !important
      }
    }
    @media (max-width:980px) {
      .hero-board::before {
        background:linear-gradient(180deg,rgba(10,18,60,.32) 0%,rgba(14,24,72,.22) 28%,rgba(42,36,112,.18) 64%,rgba(103,67,170,.18) 100%) !important
      }
      .hero-bg-clean {
        width:90% !important;
        height:50% !important;
        right:5% !important;
        top:auto !important;
        bottom:0 !important;
        object-position:center top !important
      }
      .hero-orbit-clean {
        display:none !important
      }
      .hero-glow-clean {
        width:88% !important;
        height:46% !important;
        right:6% !important;
        top:auto !important;
        bottom:8% !important
      }
    }
    /* HERO / ARKA PLAN */
    /* Direct PDF cover background on hero - keep motion/depth, simplify aesthetics */
    .hero-board {
      background:#1b2e83 !important;
      box-shadow:0 32px 72px rgba(22,28,86,.22), inset 0 1px rgba(255,255,255,.14) !important;
    }
    .hero-board::before {
      background:linear-gradient(90deg,rgba(8,14,42,.76) 0%,rgba(10,19,54,.60) 24%,rgba(11,23,62,.28) 46%,rgba(21,24,76,.10) 66%,rgba(42,27,88,.08) 100%) !important;
      z-index:2 !important;
    }
    .hero-board::after {
      background:linear-gradient(120deg,rgba(175,233,255,.35),rgba(255,255,255,.06),rgba(224,138,255,.24)) !important;
    }
    .hero-scene-clean::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      background-image:url("../img/hero-kapak-bulanik.jpg");
      background-size:cover;
      background-position:center center;
      filter:blur(10px) saturate(1.18) brightness(1.05);
      transform:scale(1.14);
      opacity:.98;
    }
    .hero-scene-clean::after {
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      background:     radial-gradient(circle at 12% 16%, rgba(90,220,255,.20), transparent 24%),     radial-gradient(circle at 82% 18%, rgba(255,178,220,.18), transparent 22%),     radial-gradient(circle at 66% 86%, rgba(180,120,255,.14), transparent 18%),     linear-gradient(135deg, rgba(27,114,210,.10) 0%, rgba(59,87,206,.08) 40%, rgba(216,122,199,.10) 100%);
      pointer-events:none;
    }
    .hero-bg-clean {
      right:4.4% !important;
      top:11.5% !important;
      width:47% !important;
      height:78% !important;
      object-fit:cover !important;
      object-position:center center !important;
      border-radius:30px !important;
      border:1px solid rgba(255,255,255,.16) !important;
      box-shadow:0 26px 58px rgba(22,27,86,.24), inset 0 1px rgba(255,255,255,.10) !important;
      filter:brightness(1.01) saturate(1.02) contrast(1.02) !important;
      animation:heroPhotoFloat 16s ease-in-out infinite alternate !important;
      z-index:3 !important;
    }
    .hero-glow-clean {
      right:5% !important;
      top:12% !important;
      width:48% !important;
      height:76% !important;
      border-radius:34px !important;
      background:     radial-gradient(circle at 18% 24%, rgba(80,214,255,.18), transparent 30%),     radial-gradient(circle at 76% 20%, rgba(255,180,220,.18), transparent 28%),     radial-gradient(circle at 56% 78%, rgba(188,118,255,.16), transparent 32%) !important;
      filter:blur(18px) !important;
      z-index:2 !important;
    }
    .hero-orbit-clean {
      right:3.4% !important;
      top:8.5% !important;
      width:50% !important;
      height:83% !important;
      border-radius:38px !important;
      border:1px solid rgba(194,232,255,.16) !important;
      box-shadow:0 0 0 30px rgba(111,195,255,.04),0 0 0 72px rgba(213,124,255,.028) !important;
      z-index:2 !important;
    }
    .hero-content-overlay {
      left:56px !important;
      max-width:520px !important;
      z-index:5 !important;
    }
    .hero-content-overlay .title-xl {
      max-width:500px !important;
      font-size:clamp(54px,5.2vw,88px) !important;
    }
    .hero-content-overlay .muted {
      max-width:470px !important;
    }
    .hero-chip-row {
      z-index:5 !important
    }
    @keyframes heroPhotoFloat {
      0% {
        transform:translate3d(0,0,0) rotateZ(0deg)
      }
      100% {
        transform:translate3d(-10px,-7px,0) rotateZ(-.3deg)
      }
    }
    @media (max-width:1280px) {
      .hero-bg-clean {
        width:49% !important;
        right:3.2% !important;
      }
      .hero-orbit-clean {
        width:53% !important;
        right:2.4% !important;
      }
    }
    @media (max-width:980px) {
      .hero-board::before {
        background:linear-gradient(180deg,rgba(7,14,44,.48) 0%,rgba(11,22,58,.28) 32%,rgba(46,38,112,.16) 70%,rgba(41,26,96,.18) 100%) !important;
      }
      .hero-bg-clean {
        right:5% !important;
        left:5% !important;
        width:90% !important;
        height:48% !important;
        top:auto !important;
        bottom:2% !important;
        border-radius:24px !important;
      }
      .hero-orbit-clean {
        display:none !important;
      }
      .hero-glow-clean {
        right:6% !important;
        width:88% !important;
        height:42% !important;
        top:auto !important;
        bottom:4% !important;
      }
    }
    /* HERO / KATALOG KAPAĞI */
    /* Clean catalog-cover background across full hero card */
    .hero-board {
      background:#23398a !important;
      box-shadow:0 32px 72px rgba(20,26,88,.20), inset 0 1px rgba(255,255,255,.14) !important;
    }
    .hero-board::before {
      background-image:url("../img/hero-board-kapak.jpg") !important;
      background-size:cover !important;
      background-position:center center !important;
      filter:saturate(1.06) brightness(1.02) !important;
      opacity:1 !important;
      z-index:0 !important;
    }
    .hero-board::after {
      background:     radial-gradient(circle at 12% 18%, rgba(82,219,255,.10), transparent 22%),     radial-gradient(circle at 84% 18%, rgba(255,179,214,.10), transparent 24%),     linear-gradient(120deg,rgba(255,255,255,.04),rgba(255,255,255,.02),rgba(255,255,255,.04)) !important;
      z-index:1 !important;
    }
    /* remove separate scene block so background feels like one piece */
    .hero-scene-clean::before, .hero-scene-clean::after {
      display:none !important;
      content:none !important;
    }
    .hero-content-overlay {
      z-index:5 !important;
    }
    .hero-chip-row {
      z-index:5 !important;
    }
    .hero-bg-clean {
      right:4.2% !important;
      top:10.8% !important;
      width:47% !important;
      height:78% !important;
      object-fit:cover !important;
      object-position:center center !important;
      border-radius:30px !important;
      border:1px solid rgba(255,255,255,.14) !important;
      box-shadow:0 22px 54px rgba(22,28,86,.20), inset 0 1px rgba(255,255,255,.10) !important;
      animation:heroPhotoFloat 16s ease-in-out infinite alternate !important;
      z-index:3 !important;
    }
    .hero-glow-clean {
      right:5.2% !important;
      top:12% !important;
      width:48% !important;
      height:76% !important;
      border-radius:34px !important;
      background:     radial-gradient(circle at 20% 30%, rgba(75,205,255,.16), transparent 32%),     radial-gradient(circle at 76% 24%, rgba(255,175,214,.14), transparent 28%),     radial-gradient(circle at 56% 74%, rgba(184,118,255,.12), transparent 30%) !important;
      filter:blur(18px) !important;
      z-index:2 !important;
    }
    .hero-orbit-clean {
      right:3.2% !important;
      top:8.2% !important;
      width:50% !important;
      height:83% !important;
      border-radius:38px !important;
      border:1px solid rgba(194,232,255,.14) !important;
      box-shadow:0 0 0 30px rgba(111,195,255,.04),0 0 0 72px rgba(213,124,255,.028) !important;
      z-index:2 !important;
    }
    @media (max-width:980px) {
      .hero-board::before {
        background-position:center center !important;
      }
      .hero-bg-clean {
        right:5% !important;
        left:5% !important;
        width:90% !important;
        height:48% !important;
        top:auto !important;
        bottom:2% !important;
      }
      .hero-orbit-clean {
        display:none !important;
      }
      .hero-glow-clean {
        right:6% !important;
        width:88% !important;
        height:42% !important;
        top:auto !important;
        bottom:4% !important;
      }
    }
    /* HERO / GÖRSEL BÜTÜNLÜĞÜ */
    /* IMPORTANT: Keep the catalog PDF colors spanning the entire card. Only change the visual scene. */
    .hero-board {
      overflow:hidden !important;
      isolation:isolate;
    }
    .hero-board::before {
      z-index:0 !important;
    }
    .hero-scene-clean {
      overflow:hidden;
      z-index:1 !important;
      isolation:isolate;
    }
    .hero-scene-clean::before, .hero-scene-clean::after {
      display:none !important;
      content:none !important;
    }
    .hero-photo-ambient {
      position:absolute;
      right:-10%;
      top:-18%;
      width:80%;
      height:126%;
      z-index:0;
      border-radius:50%;
      pointer-events:none;
      background:     radial-gradient(ellipse at 35% 46%,rgba(48,219,255,.28),transparent 56%),     radial-gradient(ellipse at 75% 50%,rgba(254,150,222,.30),transparent 60%),     radial-gradient(ellipse at 58% 82%,rgba(103,89,229,.23),transparent 55%);
      filter:blur(36px);
      animation:photoAuroraFloat 13s ease-in-out infinite alternate;
    }
    .hero-photo-lightwash {
      position:absolute;
      right:-3%;
      top:4%;
      width:66%;
      height:94%;
      z-index:3;
      pointer-events:none;
      border-radius:40%;
      background:      radial-gradient(ellipse at 80% 24%,rgba(255,167,218,.16),transparent 36%),      radial-gradient(ellipse at 24% 53%,rgba(26,202,255,.12),transparent 40%);
      filter:blur(26px);
      mix-blend-mode:screen;
      animation:photoLightDrift 17s ease-in-out infinite alternate;
    }
    .hero-scene-clean img.hero-bg-clean {
      position:absolute !important;
      width:68% !important;
      height:98% !important;
      top:1% !important;
      right:-1% !important;
      bottom:auto !important;
      left:auto !important;
      object-fit:contain !important;
      object-position:center center !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      filter:drop-shadow(0 26px 24px rgba(38,49,132,.09)) !important;
      opacity:1 !important;
      z-index:2 !important;
      animation:heroPhotoFloatV17 11s ease-in-out infinite alternate !important;
      will-change:transform;
    }
    .hero-glow-clean {
      right:9% !important;
      top:11% !important;
      width:54% !important;
      height:78% !important;
      background:radial-gradient(ellipse at 42% 55%,rgba(73,221,255,.17),rgba(177,112,254,.12) 50%,transparent 74%) !important;
      filter:blur(30px) !important;
      z-index:0 !important;
    }
    .hero-orbit-clean {
      right:3% !important;
      top:8% !important;
      width:59% !important;
      height:83% !important;
      border:1px solid rgba(255,255,255,.12) !important;
      border-radius:44% !important;
      box-shadow:0 0 0 35px rgba(105,184,255,.032),0 0 0 78px rgba(245,128,234,.025) !important;
      z-index:0 !important;
    }
    .hero-content-overlay {
      z-index:7 !important;
    }
    .hero-chip-row {
      z-index:7 !important;
    }
    @keyframes photoAuroraFloat {
      from {
        transform:translate3d(-3%,2%,0) rotate(-7deg) scale(1.02)
      }
      to {
        transform:translate3d(4%,-3%,0) rotate(5deg) scale(1.12)
      }
    }
    @keyframes photoLightDrift {
      from {
        transform:translate3d(-3%,-1%,0)
      }
      to {
        transform:translate3d(4%,3%,0)
      }
    }
    @keyframes heroPhotoFloatV17 {
      from {
        transform:translate3d(0,2px,0) scale(1.008)
      }
      to {
        transform:translate3d(-10px,-9px,0) scale(1.018)
      }
    }
    @media (max-width:1100px) {
      .hero-scene-clean img.hero-bg-clean {
        width:80% !important;
        height:66% !important;
        right:-6% !important;
        top:0 !important;
      }
      .hero-photo-ambient {
        width:100%;
        right:-22%
      }
    }
    @media (max-width:760px) {
      .hero-scene-clean img.hero-bg-clean {
        width:112% !important;
        height:62% !important;
        right:-6% !important;
        top:0 !important;
        object-fit:contain !important;
      }
      .hero-photo-ambient {
        width:135%;
        height:88%;
        right:-28%;
        top:-12%
      }
      .hero-photo-lightwash {
        width:110%;
        height:80%;
        right:-10%;
        top:0
      }
    }
    @media (prefers-reduced-motion:reduce) {
      .hero-photo-ambient,.hero-photo-lightwash,.hero-scene-clean img.hero-bg-clean {
        animation:none !important
      }
    }
    /* AVANTAJLAR / BAŞLIK */
    /* Clean up the benefits section header */
    #avantajlar {
      padding-top:92px !important;
    }
    #avantajlar .ecosystem-head-clean {
      display:grid !important;
      grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr) !important;
      align-items:end !important;
      gap:44px !important;
      margin-bottom:34px !important;
    }
    #avantajlar .eco-head-left {
      max-width:720px;
    }
    #avantajlar .eco-title {
      margin-top:16px !important;
      line-height:.98 !important;
      font-size:clamp(44px,4.8vw,76px) !important;
      letter-spacing:-.035em !important;
    }
    #avantajlar .eco-head-right {
      position:relative;
      padding:28px 30px;
      border-radius:28px;
      background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.03)) !important;
      border:1px solid rgba(255,255,255,.10);
      box-shadow:inset 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(15,22,78,.08);
    }
    #avantajlar .eco-head-right::before {
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      background:radial-gradient(circle at 12% 18%, rgba(81,220,255,.10), transparent 24%), radial-gradient(circle at 88% 76%, rgba(235,130,225,.10), transparent 28%);
    }
    #avantajlar .eco-copy {
      margin:0 !important;
      font-size:1.12rem !important;
      line-height:1.85 !important;
      max-width:44ch;
      color:rgba(236,243,255,.84) !important;
    }
    #avantajlar .services-grid {
      margin-top:10px !important;
    }
    @media (max-width: 1100px) {
      #avantajlar .ecosystem-head-clean {
        grid-template-columns:1fr !important;
        gap:22px !important;
      }
      #avantajlar .eco-head-right {
        max-width:720px;
      }
      #avantajlar .eco-title {
        font-size:clamp(40px,7vw,62px) !important;
      }
    }
    @media (max-width: 700px) {
      #avantajlar {
        padding-top:76px !important;
      }
      #avantajlar .eco-head-right {
        padding:22px 20px;
        border-radius:22px;
      }
      #avantajlar .eco-copy {
        font-size:1rem !important;
        line-height:1.72 !important;
      }
      #avantajlar .eco-title {
        font-size:clamp(34px,10vw,48px) !important;
      }
    }
    /* ENGELSİZ / EK BÖLÜMLER */
    /* This entire block is additive: original project styles are intentionally untouched. */
    .ff-addon-mini {
      display:inline-block;
      color:#9adfff;
      letter-spacing:.18em;
      font-size:10px;
      font-weight:900;
      text-transform:uppercase
    }
    .ff-addon-demo-note {
      font-size:11px;
      color:#a4b6d2;
      line-height:1.6
    }
    .ff-addon-action {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:20px;
      padding:15px 22px;
      background:linear-gradient(115deg,#19c4ff,#548dff 60%,#c874ea);
      color:#071c43!important;
      border:1px solid rgba(255,255,255,.55);
      border-radius:15px;
      font-size:13px;
      font-weight:900;
      box-shadow:0 12px 28px rgba(26,123,253,.19);
      transition:transform .3s,box-shadow .3s;
      white-space:nowrap;
      width:max-content;
      max-width:100%
    }
    .ff-addon-action:hover {
      transform:translateY(-4px);
      box-shadow:0 20px 37px rgba(26,123,253,.28)
    }
    .ff-addon-hero-label {
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px;
      padding:9px 14px;
      border-radius:100px;
      background:linear-gradient(110deg,#ecff63,#dbff79);
      color:#122953;
      border:1px solid rgba(255,255,255,.5);
      box-shadow:0 9px 18px rgba(24,61,104,.12);
      font-size:11px;
      letter-spacing:.1em;
      font-weight:800
    }
    .ff-addon-hero-label .ff-addon-star {
      font-size:16px;
      color:#2164c5
    }
    .ff-addon-hero-label span:last-child {
      letter-spacing:0;
      color:#345067;
      font-size:10px
    }
    .ff-addon-brands {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:24px;
      flex-wrap:wrap;
      margin-top:65px;
      padding:22px 28px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:26px;
      background:linear-gradient(105deg,rgba(255,255,255,.09),rgba(255,255,255,.03),rgba(99,161,255,.10));
      box-shadow:0 22px 55px rgba(0,0,0,.15)
    }
    .ff-addon-brands p {
      font-size:14px;
      color:#d4deea;
      margin:5px 0 0
    }
    .ff-addon-brands>.ff-addon-demo-note {
      max-width:170px
    }
    .ff-addon-brand-box {
      min-width:194px;
      display:flex;
      gap:17px;
      align-items:center;
      justify-content:center;
      padding:19px 26px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:20px;
      background:rgba(4,14,31,.42);
      font-family:Manrope,Inter,sans-serif;
      font-size:18px;
      letter-spacing:.065em;
      transition:transform .35s,border-color .35s
    }
    .ff-addon-brand-box:hover {
      transform:translateY(-4px);
      border-color:#95defe
    }
    .ff-addon-brand-diamond {
      height:27px;
      width:22px;
      border:4px solid white;
      transform:rotate(45deg) skew(-8deg,-8deg);
      border-radius:2px
    }
    .ff-addon-brand-brackets {
      font-size:43px;
      line-height:22px;
      color:#b5edff
    }
    /* Renault kurumsal fontu: dosya wwwroot/fonts/NouvelR-Bold.woff2 olarak eklenmeli */
    @font-face {
      font-family:"NouvelR";
      font-weight:700;
      font-display:swap;
      src:local("NouvelR Bold"),local("NouvelR-Bold"),url("/fonts/NouvelR-Bold.woff2") format("woff2")
    }
    .ff-addon-brand-box b {
      font-family:"NouvelR",sans-serif;
      font-weight:700
    }
    .ff-addon-brand-logo {
      display:block;
      height:36px;
      width:auto;
      filter:brightness(0) invert(1)
    }
    .ff-addon-brand-logo.is-wordmark {
      height:20px;
      max-width:100%;
      margin-block:8px
    }
    .ff-addon-ride {
      padding:38px 0 106px
    }
    .ff-addon-ride-card {
      min-height:350px;
      position:relative;
      overflow:hidden;
      border-radius:35px;
      border:1px solid rgba(136,209,255,.23);
      display:grid;
      grid-template-columns:58% 42%;
      background:linear-gradient(113deg,#0d3156 0%,#12356f 41%,#36448f 67%,#7b4ca3 100%);
      box-shadow:0 25px 75px rgba(5,18,44,.30)
    }
    .ff-addon-ride-copy {
      position:relative;
      z-index:3;
      padding:48px 0 46px 55px;
      display:flex;
      flex-direction:column;
      align-items:start
    }
    .ff-addon-ride h2 {
      font-size:clamp(34px,4.5vw,59px);
      line-height:1.06;
      margin:16px 0 14px;
      font-family:Manrope,Inter,sans-serif;
      letter-spacing:-.055em
    }
    .ff-addon-ride h2 em {
      font-style:normal;
      background:linear-gradient(90deg,#49e3ff,#da9cff);
      background-clip:text;
      -webkit-background-clip:text;
      color:transparent
    }
    .ff-addon-ride p {
      margin:0 0 23px;
      max-width:530px;
      font-size:14px;
      line-height:1.8;
      color:#d1e2f6
    }
    .ff-addon-ride-copy>small {
      font-size:10px;
      color:#bfd0df;
      margin-top:14px;
      line-height:1.5
    }
    .ff-addon-ride-art {
      position:relative;
      overflow:hidden;
      isolation:isolate
    }
    .ff-addon-ride-circle {
      position:absolute;
      z-index:2;
      left:6%;
      top:4%;
      width:380px;
      height:380px;
      border-radius:50%;
      display:grid;
      place-items:center;
      border:1px solid rgba(203,229,255,.21);
      background:radial-gradient(circle at 32% 34%,rgba(126,230,255,.23),transparent 28%),linear-gradient(145deg,rgba(110,155,250,.12),rgba(226,127,238,.19));
      box-shadow:0 0 0 45px rgba(159,219,255,.035),0 0 0 90px rgba(159,219,255,.025);
      animation:ff-rotate 13s ease-in-out infinite alternate
    }
    .ff-addon-ride-circle>div {
      font-size:56px;
      line-height:.94;
      font-weight:900;
      letter-spacing:-.08em;
      font-family:Manrope,Inter,sans-serif;
      text-align:center;
      color:white;
      transform:rotate(-13deg)
    }
    .ff-addon-ride-circle b {
      color:#9defff
    }
    .ff-addon-ride-circle span {
      display:block;
      color:#f9ceff;
      font-size:70px
    }
    .ff-addon-road {
      position:absolute;
      left:-40%;
      right:-40%;
      height:1px;
      background:linear-gradient(90deg,transparent,#8edbff,transparent);
      transform:rotate(-31deg);
      animation:ff-road 4.2s linear infinite
    }
    .ff-addon-road.road-1 {
      top:23%
    }
    .ff-addon-road.road-2 {
      top:48%;
      animation-delay:-1.2s
    }
    .ff-addon-road.road-3 {
      top:74%;
      animation-delay:-2.7s
    }
    .ff-addon-ride-label {
      position:absolute;
      bottom:26px;
      right:28px;
      z-index:2;
      font-size:10px;
      letter-spacing:.17em;
      font-weight:900;
      color:#bfdcff
    }
    @keyframes ff-rotate {
      to {
        transform:rotate(12deg) scale(1.055)
      }
    }
    @keyframes ff-road {
      0% {
        translate:-20% 0;
        opacity:0
      }
      40% {
        opacity:1
      }
      100% {
        translate:30% 0;
        opacity:0
      }
    }
    .ff-addon-story {
      padding:102px 0;
      background:linear-gradient(122deg,rgba(15,36,80,.90),rgba(26,32,83,.89) 52%,rgba(83,42,126,.80));
      position:relative;
      overflow:hidden
    }
    .ff-addon-story::before {
      content:"";
      position:absolute;
      left:-14%;
      top:3%;
      height:600px;
      width:600px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(52,209,255,.15),transparent 60%);
      pointer-events:none
    }
    .ff-addon-story-grid {
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      align-items:center;
      gap:48px
    }
    .ff-addon-story-copy {
      max-width:520px;
      position:relative
    }
    .ff-addon-story-mark {
      font-size:125px;
      line-height:1;
      color:#98dbff44;
      position:absolute;
      right:6%;
      top:4%;
      font-family:Georgia,serif;
      pointer-events:none
    }
    .ff-addon-story h2 {
      font:900 clamp(41px,4.7vw,68px)/1.05 Manrope,Inter,sans-serif;
      letter-spacing:-.065em;
      margin:22px 0
    }
    .ff-addon-story h2 span {
      background:linear-gradient(90deg,#72e6ff,#7fb3ff,#ec99f5);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent
    }
    .ff-addon-story-copy>p {
      color:#d4e1f1;
      line-height:1.88;
      font-size:15px
    }
    .ff-addon-story-quote {
      margin:22px 0;
      padding:20px;
      border-left:3px solid #54d8ff;
      background:rgba(255,255,255,.065);
      border-radius:0 17px 17px 0
    }
    .ff-addon-story-quote span {
      display:block;
      font-size:10px;
      color:#90dfff;
      letter-spacing:.16em;
      font-weight:900;
      margin-bottom:8px
    }
    .ff-addon-story-quote strong {
      font-size:15px;
      color:#f3f6ff
    }
    .ff-addon-media-controls {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:21px 0
    }
    .ff-addon-tab {
      cursor:pointer;
      padding:12px 16px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.16);
      color:#e8f0fc;
      background:rgba(255,255,255,.045);
      font-size:13px;
      font-weight:800
    }
    .ff-addon-tab.is-active {
      background:linear-gradient(115deg,rgba(62,204,249,.27),rgba(145,117,246,.24));
      border-color:#80c5ff
    }
    .ff-addon-tab span {
      margin-left:10px
    }
    .ff-addon-media-display {
      position:relative;
      min-height:480px;
      border-radius:30px;
      background:linear-gradient(145deg,rgba(100,188,255,.17),rgba(212,129,248,.13));
      padding:20px;
      border:1px solid rgba(215,232,255,.23);
      box-shadow:0 35px 65px rgba(5,14,38,.31);
      overflow:hidden
    }
    .ff-addon-media-sticker {
      position:absolute;
      right:34px;
      top:34px;
      background:#edff78;
      color:#173257;
      font-size:10px;
      font-weight:900;
      letter-spacing:.12em;
      padding:10px 13px;
      border-radius:99px;
      transform:rotate(6deg)
    }
    .ff-addon-journey {
      padding:108px 0 114px;
      background:linear-gradient(180deg,rgba(10,20,41,.2),rgba(28,28,68,.50) 76%,rgba(11,20,44,.25));
    }
    .ff-addon-journey-head {
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:28px;
      margin-bottom:30px
    }
    .ff-addon-journey-head h2 {
      font:900 clamp(40px,5.2vw,72px)/1.04 Manrope,Inter,sans-serif;
      letter-spacing:-.065em;
      margin:16px 0 0
    }
    .ff-addon-journey-head h2 span {
      background:linear-gradient(90deg,#48d8ff,#c787ee);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent
    }
    .ff-addon-journey-head>p {
      max-width:390px;
      color:#bfd1e7;
      line-height:1.7;
      font-size:14px;
      margin:0 0 5px
    }
    .ff-addon-journey-stage {
      height:520px;
      position:relative;
      overflow:hidden;
      border:1px solid rgba(184,219,255,.24);
      border-radius:35px;
      isolation:isolate;
      background:#14274a;
      box-shadow:0 30px 63px rgba(0,0,0,.22)
    }
    .ff-addon-stage-photo,.ff-addon-stage-photo .ff-addon-step-img {
      position:absolute;
      inset:0;
      width:100%;
      height:100%
    }
    .ff-addon-stage-photo .ff-addon-step-img {
      object-fit:cover;
      object-position:center 40%;
      opacity:0;
      transform:scale(1.08);
      transition:opacity .7s ease,transform 1.9s ease;
      filter:saturate(1.08) brightness(.94)
    }
    .ff-addon-stage-photo .ff-addon-step-img.is-active {
      opacity:1;
      transform:scale(1)
    }
    .ff-addon-stage-overlay {
      position:absolute;
      inset:0;
      z-index:2;
      background:linear-gradient(90deg,rgba(4,15,45,.94),rgba(8,26,63,.79) 38%,rgba(13,25,59,.12) 79%),linear-gradient(0deg,rgba(10,14,41,.48),transparent 55%)
    }
    .ff-addon-stage-copy {
      position:absolute;
      z-index:4;
      left:60px;
      top:0;
      bottom:0;
      max-width:min(560px,65%);
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:flex-start
    }
    .ff-addon-counter {
      display:inline-block;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.36);
      padding:12px 18px;
      border-radius:90px;
      color:white;
      letter-spacing:.14em;
      font-size:11px;
      font-weight:900
    }
    .ff-addon-stage-copy h3 {
      font:900 clamp(38px,4.6vw,62px)/1.02 Manrope,Inter,sans-serif;
      letter-spacing:-.06em;
      margin:23px 0 17px
    }
    .ff-addon-stage-copy p {
      color:#d9e7f5;
      font-size:16px;
      line-height:1.75;
      max-width:490px;
      margin:0 0 25px
    }
    .ff-addon-stage-watermark {
      position:absolute;
      right:34px;
      bottom:5px;
      z-index:3;
      color:rgba(255,255,255,.17);
      font-size:210px;
      letter-spacing:-.13em;
      font-weight:900;
      font-family:Manrope,Inter,sans-serif;
      pointer-events:none
    }
    .ff-addon-step-track {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
      margin-top:22px;
      position:relative
    }
    .ff-addon-step-track:before {
      content:"";
      position:absolute;
      top:28px;
      left:10%;
      right:10%;
      height:4px;
      border-radius:999px;
      background:linear-gradient(90deg,#1bc8f7,#5181ec,#a778f0,#ef8dc3);
      opacity:.6
    }
    .ff-addon-step-button {
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      position:relative;
      padding:10px;
      border:1px solid transparent;
      border-radius:20px;
      background:transparent;
      color:#d3e2f2;
      cursor:pointer;
      transition:transform .25s,background .25s;
      border-color .25s;
      text-align:center
    }
    .ff-addon-step-button:hover {
      transform:translateY(-4px)
    }
    .ff-addon-step-button.is-active {
      background:rgba(132,164,250,.10);
      border-color:rgba(155,206,255,.19)
    }
    .ff-addon-step-index {
      display:grid;
      place-items:center;
      background:linear-gradient(160deg,#193151,#284668);
      border:1px solid rgba(200,224,255,.30);
      border-radius:16px;
      width:61px;
      height:59px;
      font-size:18px;
      font-weight:900;
      box-shadow:0 8px 0 rgba(77,123,210,.18)
    }
    .ff-addon-step-button.is-active .ff-addon-step-index {
      background:linear-gradient(130deg,#21c5f9,#6580f5,#a17bec);
      border-color:#c6d8ff;
      color:white;
      box-shadow:0 8px 0 rgba(77,123,210,.25)
    }
    .ff-addon-step-text b {
      display:block;
      font-size:13px;
      margin:5px 0
    }
    .ff-addon-step-text small {
      display:block;
      color:#8fa7c3;
      font-size:11px;
      line-height:1.45
    }
    .ff-addon-kemal {
      margin:38px 0 42px;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:23px;
      padding:28px;
      border-radius:24px;
      border:1px solid rgba(144,204,255,.28);
      background:linear-gradient(115deg,rgba(50,131,221,.17),rgba(157,92,214,.13));
      box-shadow:0 16px 32px rgba(3,14,36,.11)
    }
    .ff-addon-contact-icon {
      display:grid;
      place-items:center;
      width:68px;
      height:68px;
      border-radius:19px;
      font-size:32px;
      background:linear-gradient(135deg,#30bef2,#726beb);
      color:#fff
    }
    .ff-addon-kemal h3 {
      font:800 25px Manrope,Inter,sans-serif;
      letter-spacing:-.045em;
      margin:7px 0
    }
    .ff-addon-kemal p {
      font-size:13px;
      color:#d6e5f4;
      margin:0 0 7px
    }
    .ff-addon-kemal small {
      font-size:11px;
      color:#a0b7d0
    }
    @media(max-width:1100px) {
      .ff-addon-story-grid,.ff-addon-ride-card {
        grid-template-columns:1fr
      }
      .ff-addon-ride-art {
        display:none
      }
      .ff-addon-ride-copy {
        padding:46px
      }
      .ff-addon-story-copy {
        max-width:none
      }
      .ff-addon-journey-head {
        align-items:start;
        flex-direction:column
      }
      .ff-addon-kemal {
        grid-template-columns:auto 1fr
      }
      .ff-addon-kemal .ff-addon-action {
        grid-column:2
      }
    }
    @media(max-width:700px) {
      .ff-addon-hero-label {
        max-width:95%;
        margin-top:8px;
        padding:7px 10px;
        font-size:9px
      }
      .ff-addon-hero-label span:last-child {
        display:none
      }
      .ff-addon-brands {
        margin-top:42px;
        gap:10px;
        padding:17px
      }
      .ff-addon-brands>div:first-child {
        width:100%;
        text-align:center
      }
      .ff-addon-brand-box {
        min-width:0;
        flex:1;
        font-size:13px;
        padding:14px 9px;
        gap:8px
      }
      .ff-addon-brand-diamond {
        height:18px;
        width:15px;
        border-width:3px
      }
      .ff-addon-brand-logo {
        height:24px
      }
      .ff-addon-brand-logo.is-wordmark {
        height:13px;
        margin-block:5.5px
      }
      .ff-addon-brands>.ff-addon-demo-note {
        max-width:none;
        width:100%;
        text-align:center
      }
      .ff-addon-ride {
        padding:22px 0 70px
      }
      .ff-addon-ride-copy {
        padding:31px 24px
      }
      .ff-addon-ride h2 {
        font-size:37px
      }
      .ff-addon-ride-copy p {
        font-size:13px
      }
      .ff-addon-story {
        padding:73px 0
      }
      .ff-addon-story h2 {
        font-size:44px
      }
      .ff-addon-media-display {
        min-height:420px;
        padding:12px
      }
      .ff-addon-media-sticker {
        right:15px;
        top:16px;
        font-size:8px
      }
      .ff-addon-journey {
        padding:70px 0
      }
      .ff-addon-journey-head h2 {
        font-size:45px
      }
      .ff-addon-journey-stage {
        height:455px;
        border-radius:25px
      }
      .ff-addon-stage-copy {
        left:22px;
        right:20px;
        bottom:8px;
        top:auto;
        max-width:none;
        min-height:75%;
        justify-content:end;
        padding-bottom:34px
      }
      .ff-addon-stage-overlay {
        background:linear-gradient(0deg,rgba(3,11,37,.96),rgba(3,16,41,.71) 45%,rgba(3,11,37,.06) 100%)
      }
      .ff-addon-stage-copy h3 {
        font-size:37px
      }
      .ff-addon-stage-copy p {
        font-size:13px
      }
      .ff-addon-stage-watermark {
        right:24px;
        top:13px;
        bottom:auto;
        font-size:102px
      }
      .ff-addon-step-track {
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        gap:10px;
        padding:5px 4px 14px;
        scrollbar-width:thin
      }
      .ff-addon-step-track:before {
        display:none
      }
      .ff-addon-step-button {
        flex:0 0 165px;
        scroll-snap-align:center;
        padding:10px;
        align-items:center
      }
      .ff-addon-step-index {
        height:52px;
        width:52px
      }
      .ff-addon-step-text small {
        font-size:10px
      }
      .ff-addon-kemal {
        grid-template-columns:1fr;
        gap:10px
      }
      .ff-addon-kemal .ff-addon-action {
        grid-column:1
      }
      .ff-addon-kemal h3 {
        font-size:21px
      }
    }
    @media(prefers-reduced-motion:reduce) {
      .ff-addon-road,.ff-addon-ride-circle {
        animation:none!important
      }
      .ff-addon-step-img {
        transition:none!important
      }
    }
    /* ULAŞIM / DÖRT ADIM VE TEST SÜRÜŞÜ */
    /* The only visual changes: four-step copy motion and test-drive entry. */
    #ff-yolculuk .ff-addon-stage-copy {
      isolation:isolate
    }
    #ff-yolculuk .ff-addon-stage-copy h3 {
      transform-origin:left center;
      transition:transform .44s cubic-bezier(.17,.8,.23,1),text-shadow .44s ease,filter .44s ease;
      text-wrap:balance;
    }
    #ff-yolculuk .ff-addon-stage-copy p {
      transition:transform .44s cubic-bezier(.17,.8,.23,1),color .44s ease;
    }
    @media (hover:hover) and (pointer:fine) {
      #ff-yolculuk .ff-addon-stage-copy h3:hover,   #ff-yolculuk .ff-addon-stage-copy h3:has(+ p:hover) {
        transform:translate3d(9px,-5px,0) scale(1.018);
        text-shadow:0 12px 30px rgba(64,174,255,.34);
        filter:drop-shadow(0 3px 10px rgba(212,163,255,.12));
      }
      #ff-yolculuk .ff-addon-stage-copy p:hover {
        transform:translate3d(7px,-3px,0);
        color:#ffffff
      }
      #ff-yolculuk .ff-addon-step-button:hover .ff-addon-step-text b {
        transform:translateY(-3px);
        color:#f4fbff
      }
      #ff-yolculuk .ff-addon-step-button:hover .ff-addon-step-text small {
        transform:translateY(-2px)
      }
    }
    #ff-yolculuk .ff-addon-step-text b,#ff-yolculuk .ff-addon-step-text small {
      transition:transform .3s ease,color .3s ease;
    }
    #ff-yolculuk .ff-step-new-copy h3 {
      animation:ff-copy-rise .65s cubic-bezier(.17,.8,.23,1) backwards
    }
    #ff-yolculuk .ff-step-new-copy p {
      animation:ff-copy-rise .75s .08s cubic-bezier(.17,.8,.23,1) backwards
    }
    @keyframes ff-copy-rise {
      from {
        opacity:.1;
        transform:translate3d(0,22px,0);
        filter:blur(7px)
      }
      to {
        opacity:1;
        transform:translate3d(0,0,0);
        filter:blur(0)
      }
    }
    /* Scroll triggered arrival: test drive only */
    #ff-test-surusu.ff-ride-ready {
      perspective:1500px
    }
    #ff-test-surusu.ff-ride-ready .ff-addon-ride-card {
      opacity:.02;
      transform:translate3d(0,74px,0) scale(.94) rotateX(6deg);
      clip-path:inset(0 9% 0 9% round 35px);
      transition:opacity .85s ease,transform 1.15s cubic-bezier(.16,1,.3,1),clip-path 1.15s cubic-bezier(.16,1,.3,1);
      will-change:transform,opacity,clip-path;
    }
    #ff-test-surusu.ff-ride-ready.ff-ride-visible .ff-addon-ride-card {
      opacity:1;
      transform:translate3d(0,0,0) scale(1) rotateX(0);
      clip-path:inset(0 0 0 0 round 35px);
      will-change:auto;
    }
    #ff-test-surusu.ff-ride-ready .ff-addon-ride-copy>* {
      opacity:0;
      transform:translate3d(-34px,14px,0);
      transition:transform .8s cubic-bezier(.18,.8,.25,1),opacity .7s ease;
    }
    #ff-test-surusu.ff-ride-ready.ff-ride-visible .ff-addon-ride-copy>* {
      opacity:1;
      transform:translate3d(0,0,0)
    }
    #ff-test-surusu.ff-ride-visible .ff-addon-ride-copy>:nth-child(2) {
      transition-delay:.15s
    }
    #ff-test-surusu.ff-ride-visible .ff-addon-ride-copy>:nth-child(3) {
      transition-delay:.26s
    }
    #ff-test-surusu.ff-ride-visible .ff-addon-ride-copy>:nth-child(4) {
      transition-delay:.34s
    }
    #ff-test-surusu.ff-ride-visible .ff-addon-ride-copy>:nth-child(5) {
      transition-delay:.42s
    }
    #ff-test-surusu.ff-ride-ready .ff-addon-ride-art {
      opacity:0;
      transform:translate3d(95px,20px,0) rotate(7deg) scale(.88);
      transition:transform 1.35s .23s cubic-bezier(.16,1,.3,1),opacity .95s .23s ease;
    }
    #ff-test-surusu.ff-ride-ready.ff-ride-visible .ff-addon-ride-art {
      opacity:1;
      transform:none
    }
    @media (prefers-reduced-motion:reduce) {
      #ff-yolculuk .ff-step-new-copy h3,#ff-yolculuk .ff-step-new-copy p {
        animation:none!important
      }
      #ff-yolculuk .ff-addon-stage-copy h3,#ff-yolculuk .ff-addon-stage-copy p {
        transform:none!important;
        filter:none!important
      }
      #ff-test-surusu.ff-ride-ready .ff-addon-ride-card,#ff-test-surusu.ff-ride-ready .ff-addon-ride-copy>*,#ff-test-surusu.ff-ride-ready .ff-addon-ride-art {
        opacity:1!important;
        transform:none!important;
        clip-path:none!important;
        transition:none!important
      }
    }

    /* KADİR HİKÂYESİ / VİDEO KARUSELİ */
    .ff-icons {
      position:absolute;
      width:0;
      height:0;
      overflow:hidden
    }
    .ff-vid {
      --vid-gap:clamp(150px,25cqw,232px);
      position:relative;
      height:440px;
      border-radius:22px;
      overflow:hidden;
      container-type:inline-size;
      background:radial-gradient(circle at 50% 42%,rgba(86,170,255,.22),transparent 58%),radial-gradient(circle at 88% 92%,rgba(236,134,213,.18),transparent 46%),linear-gradient(160deg,rgba(9,24,56,.55),rgba(30,26,78,.55));
      border:1px solid rgba(214,232,255,.14)
    }
    .ff-vid::before {
      content:"";
      position:absolute;
      left:50%;
      top:44%;
      width:78cqw;
      height:78cqw;
      max-height:520px;
      max-width:520px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      border:1px solid rgba(160,210,255,.10);
      box-shadow:0 0 0 46px rgba(160,210,255,.025),0 0 0 92px rgba(160,210,255,.018);
      pointer-events:none
    }
    .ff-vid-stage {
      position:absolute;
      inset:0 0 58px;
      perspective:1300px;
      touch-action:pan-y;
      cursor:grab;
      outline:none
    }
    .ff-vid-stage:active {
      cursor:grabbing
    }
    .ff-vid-stage:focus-visible {
      outline:3px solid #8fe3ff;
      outline-offset:-6px;
      border-radius:22px
    }
    .ff-vid-card {
      --h1:#123f68;
      --h2:#3a5ea8;
      position:absolute;
      left:50%;
      top:50%;
      height:calc(100% - 26px);
      aspect-ratio:9/16;
      border-radius:22px;
      overflow:hidden;
      border:1px solid rgba(190,220,255,.28);
      background:linear-gradient(150deg,var(--h1),var(--h2));
      box-shadow:0 26px 54px rgba(3,10,30,.42),inset 0 1px 0 rgba(255,255,255,.16);
      transform:translate(-50%,-50%) translateX(calc(var(--offset,0) * var(--vid-gap))) scale(var(--scale,1)) rotateY(var(--angle,0deg));
      opacity:var(--opacity,1);
      filter:brightness(var(--brightness,1)) saturate(var(--sat,1));
      z-index:var(--z,1);
      transition:transform .8s cubic-bezier(.2,.75,.13,1),opacity .6s ease,filter .6s ease,border-color .4s ease,box-shadow .4s ease;
      cursor:pointer;
      user-select:none
    }
    .ff-vid-card:nth-child(4n+2),.ff-player-thumb.h2 {
      --h1:#1d3f7a;
      --h2:#6a4aa8
    }
    .ff-vid-card:nth-child(4n+3),.ff-player-thumb.h3 {
      --h1:#0f506a;
      --h2:#2e6fa0
    }
    .ff-vid-card:nth-child(4n+4),.ff-player-thumb.h4 {
      --h1:#3b2f7a;
      --h2:#8a4f9a
    }
    .ff-vid-card.is-active {
      border-color:rgba(150,215,255,.85);
      box-shadow:0 0 0 2px rgba(94,170,247,.25),0 0 44px rgba(78,160,250,.34),0 34px 70px rgba(3,10,30,.5),inset 0 1px 0 rgba(255,255,255,.2)
    }
    .ff-vid-cover {
      position:absolute;
      inset:0
    }
    .ff-vid-cover img,.ff-vid-preview {
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:transform 1.2s cubic-bezier(.2,.75,.13,1)
    }
    .ff-vid-preview {
      object-fit:cover;
      pointer-events:none
    }
    .ff-vid-card.is-active:hover .ff-vid-cover img,.ff-vid-card.is-active:hover .ff-vid-preview {
      transform:scale(1.045)
    }
    .ff-vid-cover::after {
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 18% 14%,rgba(110,220,255,.26),transparent 42%),linear-gradient(118deg,transparent 18%,rgba(255,255,255,.08) 34%,transparent 48%);
      pointer-events:none
    }
    .ff-vid-cover-glyph {
      position:absolute;
      right:-.04em;
      bottom:-.2em;
      font:900 150px/1 Manrope,Inter,sans-serif;
      letter-spacing:-.08em;
      color:transparent;
      -webkit-text-stroke:1.5px rgba(255,255,255,.2);
      pointer-events:none
    }
    .ff-vid-shade {
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(5,12,32,.42) 0%,transparent 28%,transparent 46%,rgba(5,12,32,.86) 100%);
      pointer-events:none
    }
    .ff-vid-top {
      position:absolute;
      left:12px;
      right:12px;
      top:12px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px
    }
    .ff-vid-num,.ff-vid-chip {
      font-size:10px;
      font-weight:900;
      letter-spacing:.1em;
      padding:6px 9px;
      border-radius:99px;
      background:rgba(6,16,40,.5);
      border:1px solid rgba(214,232,255,.22);
      -webkit-backdrop-filter:blur(10px);
      backdrop-filter:blur(10px);
      font-variant-numeric:tabular-nums
    }
    .ff-vid-num small {
      color:#94aecb;
      font-size:inherit
    }
    .ff-vid-chip:empty {
      display:none
    }
    .ff-vid-card.is-soon .ff-vid-chip {
      background:rgba(237,255,120,.16);
      border-color:rgba(237,255,120,.55);
      color:#f3ffad
    }
    .ff-vid-card.is-soon .ff-vid-chip::before {
      content:"";
      display:inline-block;
      width:6px;
      height:6px;
      border-radius:50%;
      background:#edff78;
      margin-right:7px;
      vertical-align:1px;
      box-shadow:0 0 8px #edff78
    }
    .ff-vid-play {
      position:absolute;
      left:50%;
      top:46%;
      width:64px;
      height:64px;
      border-radius:50%;
      border:0;
      display:grid;
      place-items:center;
      cursor:pointer;
      color:#0c2b49;
      background:linear-gradient(120deg,#3adeff,#b17bf7);
      box-shadow:0 0 0 14px rgba(255,255,255,.09),0 16px 34px rgba(4,12,34,.45);
      transform:translate(-50%,-50%) scale(.6);
      opacity:0;
      transition:transform .5s cubic-bezier(.2,.75,.13,1),opacity .35s ease,box-shadow .3s ease
    }
    .ff-vid-play svg {
      width:26px;
      height:26px;
      margin-left:3px
    }
    .ff-vid-card.is-active .ff-vid-play {
      opacity:1;
      transform:translate(-50%,-50%) scale(1)
    }
    .ff-vid-card.is-active .ff-vid-play::after {
      content:"";
      position:absolute;
      inset:-14px;
      border-radius:50%;
      border:2px solid rgba(143,227,255,.55);
      animation:ffVidPulse 2.4s ease-out infinite;
      pointer-events:none
    }
    .ff-vid-card.is-active:hover .ff-vid-play {
      transform:translate(-50%,-50%) scale(1.07);
      box-shadow:0 0 0 18px rgba(255,255,255,.12),0 18px 38px rgba(4,12,34,.5)
    }
    .ff-vid-play:focus-visible {
      outline:3px solid #fff;
      outline-offset:6px
    }
    .ff-vid-meta {
      position:absolute;
      left:14px;
      right:14px;
      bottom:14px;
      display:grid;
      gap:4px;
      text-align:left
    }
    .ff-vid-meta b {
      font:800 17px/1.15 Manrope,Inter,sans-serif;
      letter-spacing:-.03em;
      color:#fff
    }
    .ff-vid-meta span {
      font-size:12px;
      line-height:1.4;
      color:#cfe0f5
    }
    .ff-vid-arrow {
      position:absolute;
      z-index:20;
      top:calc(50% - 29px);
      transform:translateY(-50%);
      width:46px;
      height:46px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      cursor:pointer;
      background:linear-gradient(135deg,rgba(60,96,156,.6),rgba(8,23,51,.78));
      border:1px solid rgba(217,233,255,.55);
      box-shadow:0 9px 20px rgba(0,0,0,.25);
      transition:background .2s,transform .2s
    }
    .ff-vid-arrow svg {
      width:22px;
      height:22px
    }
    .ff-vid-arrow:hover {
      background:rgba(91,151,244,.6);
      transform:translateY(-50%) scale(1.08)
    }
    .ff-vid-arrow:focus-visible {
      outline:3px solid #8fe3ff;
      outline-offset:3px
    }
    .ff-vid-prev {
      left:14px
    }
    .ff-vid-next {
      right:14px
    }
    .ff-vid-bottom {
      position:absolute;
      left:20px;
      right:20px;
      bottom:18px;
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:12px;
      z-index:20
    }
    .ff-vid-count {
      font-size:13px;
      font-weight:800;
      letter-spacing:.1em;
      font-variant-numeric:tabular-nums
    }
    .ff-vid-count span {
      color:#7f98b4;
      font-weight:600
    }
    .ff-vid-dots {
      display:flex;
      gap:6px;
      align-items:center
    }
    .ff-vid-dot {
      position:relative;
      width:28px;
      height:24px;
      border:0;
      padding:0;
      background:none;
      cursor:pointer;
      transition:width .4s
    }
    .ff-vid-dot::before {
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:50%;
      height:3px;
      transform:translateY(-50%);
      border-radius:99px;
      background:rgba(204,227,255,.24);
      transition:background .4s,box-shadow .4s
    }
    .ff-vid-dot.is-active {
      width:44px
    }
    .ff-vid-dot.is-active::before {
      background:#8fd9ff;
      box-shadow:0 0 13px rgba(100,198,255,.55)
    }
    .ff-vid-dot:focus-visible {
      outline:2px solid #8fe3ff;
      outline-offset:2px;
      border-radius:6px
    }
    .ff-vid-hint {
      text-align:right;
      font-size:11px;
      font-weight:700;
      letter-spacing:.06em;
      color:#a4c8e8;
      white-space:nowrap
    }
    @keyframes ffVidPulse {
      0% {
        transform:scale(.92);
        opacity:.9
      }
      100% {
        transform:scale(1.38);
        opacity:0
      }
    }

    /* KADİR HİKÂYESİ / VİDEO OYNATICI */
    html.ff-player-open {
      overflow:hidden
    }
    .ff-player {
      width:100vw;
      height:100dvh;
      max-width:none;
      max-height:none;
      margin:0;
      padding:16px;
      border:0;
      background:transparent;
      color:#fff;
      overflow:auto
    }
    .ff-player[open] {
      display:grid;
      grid-template-columns:minmax(0,1fr);
      place-items:center
    }
    .ff-player::backdrop {
      background:radial-gradient(circle at 20% 10%,rgba(40,140,230,.28),transparent 45%),radial-gradient(circle at 85% 90%,rgba(190,90,230,.22),transparent 45%),rgba(4,9,26,.82);
      -webkit-backdrop-filter:blur(14px);
      backdrop-filter:blur(14px)
    }
    .ff-player[open] .ff-player-shell {
      animation:ffPlayerIn .5s cubic-bezier(.2,.75,.13,1)
    }
    .ff-player-shell {
      position:relative;
      width:min(1180px,100%);
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:18px;
      border-radius:30px;
      background:linear-gradient(145deg,rgba(25,56,112,.78),rgba(42,30,92,.78));
      border:1px solid rgba(190,220,255,.22);
      box-shadow:0 40px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
      -webkit-backdrop-filter:blur(24px);
      backdrop-filter:blur(24px)
    }
    .ff-player-head {
      display:flex;
      align-items:flex-start;
      gap:14px;
      padding:4px 4px 0 8px
    }
    .ff-player-heading {
      flex:1;
      min-width:0
    }
    .ff-player-over,.ff-player-fs-title span {
      display:block;
      font-size:10px;
      font-weight:900;
      letter-spacing:.18em;
      color:#90dfff
    }
    .ff-player-head h2 {
      margin:6px 0 2px;
      font:900 clamp(22px,2.6vw,30px)/1.1 Manrope,Inter,sans-serif;
      letter-spacing:-.04em
    }
    .ff-player-head p {
      margin:0;
      font-size:14px;
      color:#c9d9ee
    }
    .ff-player-index {
      align-self:center;
      font-size:12px;
      font-weight:800;
      letter-spacing:.12em;
      padding:9px 13px;
      border-radius:99px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.14);
      font-variant-numeric:tabular-nums;
      white-space:nowrap
    }
    .ff-pbtn {
      flex:none;
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#fff;
      cursor:pointer;
      transition:background .2s,border-color .2s,transform .2s
    }
    .ff-pbtn svg {
      width:22px;
      height:22px
    }
    .ff-pbtn:hover {
      background:rgba(255,255,255,.15);
      border-color:rgba(255,255,255,.26)
    }
    .ff-pbtn:active {
      transform:scale(.94)
    }
    .ff-pbtn:focus-visible,.ff-player-bigplay:focus-visible,.ff-player-end button:focus-visible,.ff-player-item:focus-visible {
      outline:3px solid #8fe3ff;
      outline-offset:2px
    }
    .ff-pbtn[hidden] {
      display:none
    }
    .ff-pbtn:disabled {
      opacity:.35;
      cursor:not-allowed
    }
    .ff-pbtn-main {
      width:52px;
      height:52px;
      border-radius:50%;
      border:0;
      color:#0c2b49;
      background:linear-gradient(120deg,#3adeff,#b17bf7);
      box-shadow:0 8px 20px rgba(58,180,255,.32)
    }
    .ff-pbtn-main:hover {
      background:linear-gradient(120deg,#62e6ff,#c399ff)
    }
    .ff-pbtn-main svg {
      width:24px;
      height:24px
    }
    .ff-pbtn-text {
      width:auto;
      min-width:52px;
      padding:0 10px;
      font:800 14px/1 Inter,sans-serif;
      font-variant-numeric:tabular-nums
    }
    .ff-pbtn[aria-pressed="true"] {
      background:linear-gradient(115deg,rgba(62,204,249,.32),rgba(145,117,246,.3));
      border-color:#80c5ff
    }
    .ff-player-close {
      border-radius:50%
    }
    .ff-player-frame {
      position:relative;
      width:min(100%,calc((100dvh - 250px) * var(--ar,1.7778)));
      aspect-ratio:var(--ar,1.7778);
      container-type:inline-size;
      margin-inline:auto;
      border-radius:22px;
      overflow:hidden;
      background:radial-gradient(circle at 50% 40%,#16325f,#060d20 70%);
      border:1px solid rgba(190,220,255,.16);
      box-shadow:0 24px 48px rgba(0,0,0,.35)
    }
    .ff-player-frame video {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:contain;
      background:#050b1a
    }
    .ff-player-frame.is-idle {
      cursor:none
    }
    .ff-player-frame:fullscreen {
      width:100vw;
      height:100vh;
      aspect-ratio:auto;
      border-radius:0;
      border:0
    }
    .ff-player-frame.is-fs {
      width:100vw;
      height:100vh;
      aspect-ratio:auto;
      border-radius:0;
      border:0
    }
    .ff-player-frame video::cue {
      background:rgba(6,14,36,.84);
      color:#fff;
      font:600 1.1em/1.4 Inter,system-ui,sans-serif
    }
    .ff-player-fs-title {
      position:absolute;
      left:0;
      right:0;
      top:0;
      padding:26px 30px 60px;
      background:linear-gradient(180deg,rgba(4,10,28,.78),transparent);
      display:none;
      pointer-events:none;
      transition:opacity .35s ease
    }
    .ff-player-fs-title b {
      display:block;
      margin-top:6px;
      font:900 clamp(22px,2.4vw,34px)/1.1 Manrope,Inter,sans-serif;
      letter-spacing:-.04em
    }
    .ff-player-frame.is-fs .ff-player-fs-title {
      display:block
    }
    .ff-player-frame.is-idle .ff-player-fs-title {
      opacity:0
    }
    .ff-player-bigplay {
      position:absolute;
      left:50%;
      top:46%;
      width:96px;
      height:96px;
      border-radius:50%;
      border:0;
      display:grid;
      place-items:center;
      color:#0c2b49;
      background:linear-gradient(120deg,#3adeff,#b17bf7);
      box-shadow:0 0 0 18px rgba(255,255,255,.09),0 20px 44px rgba(0,0,0,.4);
      transform:translate(-50%,-50%);
      cursor:pointer;
      transition:opacity .3s ease,transform .4s cubic-bezier(.2,.75,.13,1)
    }
    .ff-player-bigplay svg {
      width:38px;
      height:38px;
      margin-left:4px
    }
    .ff-player-bigplay:hover {
      transform:translate(-50%,-50%) scale(1.06)
    }
    .ff-player-frame.is-playing .ff-player-bigplay,.ff-player-frame.is-ended .ff-player-bigplay,.ff-player-frame.is-soon .ff-player-bigplay {
      opacity:0;
      transform:translate(-50%,-50%) scale(.8);
      pointer-events:none
    }
    .ff-player-spinner {
      position:absolute;
      left:50%;
      top:46%;
      width:64px;
      height:64px;
      margin:-32px 0 0 -32px;
      border-radius:50%;
      border:4px solid rgba(255,255,255,.14);
      border-top-color:#3adeff;
      border-right-color:#b17bf7;
      opacity:0;
      pointer-events:none;
      transition:opacity .2s
    }
    .ff-player-frame.is-loading .ff-player-spinner {
      opacity:1;
      animation:ffSpin .9s linear infinite
    }
    .ff-player-soon,.ff-player-end {
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:24px;
      text-align:center
    }
    .ff-player-soon {
      background:radial-gradient(circle at 18% 15%,rgba(77,213,255,.2),transparent 40%),linear-gradient(150deg,#123f68,#344b85 55%,#79518b)
    }
    .ff-player-soon[hidden],.ff-player-end[hidden] {
      display:none
    }
    .ff-player-soon-icon {
      display:grid;
      place-items:center;
      width:84px;
      height:84px;
      margin-bottom:10px;
      border-radius:50%;
      color:#0c2b49;
      background:linear-gradient(120deg,rgba(58,222,255,.55),rgba(177,123,247,.55));
      box-shadow:0 0 0 18px rgba(255,255,255,.06)
    }
    .ff-player-soon-icon svg {
      width:34px;
      height:34px;
      margin-left:4px
    }
    .ff-player-soon b,.ff-player-end b {
      font:800 clamp(20px,2.4vw,28px)/1.2 Manrope,Inter,sans-serif;
      letter-spacing:-.03em
    }
    .ff-player-soon span {
      max-width:440px;
      font-size:14px;
      line-height:1.6;
      color:#d0def0
    }
    .ff-player-end {
      background:rgba(5,12,32,.72);
      -webkit-backdrop-filter:blur(10px);
      backdrop-filter:blur(10px);
      animation:ffFade .4s ease
    }
    .ff-player-end-over {
      font-size:11px;
      font-weight:900;
      letter-spacing:.18em;
      color:#90dfff
    }
    .ff-player-end-actions {
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
      margin-top:10px
    }
    .ff-player-end button {
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:48px;
      padding:0 22px;
      border-radius:99px;
      font:800 15px/1 Inter,sans-serif;
      cursor:pointer;
      color:#fff;
      border:1px solid rgba(255,255,255,.22);
      background:rgba(255,255,255,.08)
    }
    .ff-player-end button svg {
      width:20px;
      height:20px
    }
    .ff-player-end .ff-player-end-next {
      border:0;
      color:#0c2b49;
      background:linear-gradient(120deg,#3adeff,#b17bf7)
    }
    .ff-player-dock {
      position:absolute;
      left:14px;
      right:14px;
      bottom:14px;
      padding:8px 12px 10px;
      border-radius:20px;
      background:rgba(8,18,44,.66);
      border:1px solid rgba(190,220,255,.18);
      -webkit-backdrop-filter:blur(16px);
      backdrop-filter:blur(16px);
      box-shadow:0 14px 34px rgba(0,0,0,.32);
      transition:opacity .35s ease,transform .35s ease
    }
    .ff-player-frame.is-idle .ff-player-dock {
      opacity:0;
      transform:translateY(14px);
      pointer-events:none
    }
    .ff-player-frame.is-soon .ff-player-dock {
      display:none
    }
    .ff-player-seek {
      --p:0%;
      --b:0%;
      position:relative;
      height:26px;
      display:flex;
      align-items:center
    }
    .ff-player-seek::before,.ff-player-buffer {
      content:"";
      position:absolute;
      left:0;
      top:50%;
      height:6px;
      transform:translateY(-50%);
      border-radius:99px;
      pointer-events:none;
      transition:height .2s
    }
    .ff-player-seek::before {
      right:0;
      background:rgba(255,255,255,.16)
    }
    .ff-player-buffer {
      width:var(--b);
      background:rgba(255,255,255,.26)
    }
    .ff-player-seek:hover::before,.ff-player-seek:hover .ff-player-buffer {
      height:8px
    }
    .ff-range {
      -webkit-appearance:none;
      appearance:none;
      margin:0;
      width:100%;
      height:6px;
      border-radius:99px;
      cursor:pointer;
      background:linear-gradient(90deg,#3adeff,#a27cff,#f08bd6) no-repeat 0 0/var(--p,0%) 100%,transparent
    }
    .ff-player-vol {
      background:linear-gradient(90deg,#3adeff,#a27cff) no-repeat 0 0/var(--p,100%) 100%,rgba(255,255,255,.16)
    }
    .ff-player-progress {
      position:relative;
      z-index:1;
      transition:height .2s
    }
    .ff-player-seek:hover .ff-player-progress {
      height:8px
    }
    .ff-range::-webkit-slider-thumb {
      -webkit-appearance:none;
      width:18px;
      height:18px;
      border-radius:50%;
      background:#fff;
      border:0;
      box-shadow:0 0 0 5px rgba(143,227,255,.28),0 2px 8px rgba(0,0,0,.4)
    }
    .ff-range::-moz-range-thumb {
      width:18px;
      height:18px;
      border-radius:50%;
      background:#fff;
      border:0;
      box-shadow:0 0 0 5px rgba(143,227,255,.28),0 2px 8px rgba(0,0,0,.4)
    }
    .ff-range::-moz-range-track {
      background:transparent
    }
    .ff-range:focus-visible {
      outline:3px solid #8fe3ff;
      outline-offset:6px
    }
    .ff-player-tip {
      position:absolute;
      bottom:calc(100% + 4px);
      left:var(--tx,0%);
      transform:translateX(-50%);
      padding:5px 9px;
      border-radius:9px;
      background:#fff;
      color:#0c2b49;
      font:800 12px/1 Inter,sans-serif;
      font-variant-numeric:tabular-nums;
      opacity:0;
      pointer-events:none;
      transition:opacity .15s
    }
    .ff-player-seek.is-hover .ff-player-tip {
      opacity:1
    }
    .ff-player-controls {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:2px
    }
    .ff-player-group {
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0
    }
    .ff-player-time {
      margin-left:8px;
      font-size:14px;
      color:#b9cbe2;
      font-variant-numeric:tabular-nums;
      white-space:nowrap
    }
    .ff-player-time b {
      color:#fff
    }
    .ff-player-volume {
      display:flex;
      align-items:center;
      gap:6px
    }
    .ff-player-vol {
      width:86px
    }
    .ff-player-foot {
      display:flex;
      flex-direction:column;
      gap:10px;
      min-width:0
    }
    .ff-player-list {
      display:flex;
      gap:10px;
      overflow-x:auto;
      padding:4px 4px 6px;
      scrollbar-width:thin
    }
    .ff-player-item {
      flex:none;
      display:flex;
      align-items:center;
      gap:12px;
      width:250px;
      padding:8px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      color:#fff;
      text-align:left;
      cursor:pointer;
      transition:background .2s,border-color .2s
    }
    .ff-player-item:hover {
      background:rgba(255,255,255,.11)
    }
    .ff-player-item[aria-current="true"] {
      border-color:#80c5ff;
      background:linear-gradient(115deg,rgba(62,204,249,.2),rgba(145,117,246,.2))
    }
    .ff-player-thumb {
      --h1:#123f68;
      --h2:#3a5ea8;
      position:relative;
      flex:none;
      width:92px;
      aspect-ratio:16/10;
      border-radius:11px;
      overflow:hidden;
      display:grid;
      place-items:center;
      font:900 20px/1 Manrope,Inter,sans-serif;
      color:rgba(255,255,255,.75);
      background:linear-gradient(150deg,var(--h1),var(--h2))
    }
    .ff-player-thumb img {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover
    }
    .ff-player-item-text {
      display:grid;
      gap:3px;
      min-width:0
    }
    .ff-player-item-text b {
      font-size:13px;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis
    }
    .ff-player-item-text span {
      font-size:11px;
      font-weight:700;
      letter-spacing:.08em;
      color:#9fb6d2
    }
    .ff-player-item[aria-current="true"] .ff-player-item-text span {
      color:#90dfff
    }
    .ff-player-keys {
      margin:0;
      padding:0 8px;
      font-size:12px;
      color:#93a9c4
    }
    .ff-player-shell.is-portrait {
      width:min(1040px,100%);
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      grid-template-rows:auto minmax(0,1fr);
      column-gap:22px;
      row-gap:16px;
      max-height:calc(100dvh - 32px)
    }
    .ff-player-shell.is-portrait .ff-player-frame {
      grid-column:1;
      grid-row:1/3;
      width:auto;
      height:calc(100dvh - 68px);
      max-height:880px
    }
    .ff-player-shell.is-portrait .ff-player-head {
      grid-column:2;
      grid-row:1;
      padding:10px 0 0
    }
    .ff-player-shell.is-portrait .ff-player-index {
      align-self:flex-start
    }
    .ff-player-shell.is-portrait .ff-player-foot {
      grid-column:2;
      grid-row:2;
      min-height:0
    }
    .ff-player-shell.is-portrait .ff-player-list {
      flex-direction:column;
      overflow-x:hidden;
      overflow-y:auto;
      padding:4px 4px 4px 0;
      min-height:0
    }
    .ff-player-shell.is-portrait .ff-player-item {
      width:100%
    }
    .ff-player-shell.is-portrait .ff-player-thumb {
      width:52px;
      aspect-ratio:9/16;
      font-size:15px
    }
    .ff-player-shell.is-portrait .ff-player-keys {
      padding:0;
      line-height:1.6
    }
    @container (max-width:600px) {
      .ff-player-vol,#ffPlayerPrev,#ffPlayerNext {
        display:none
      }
      .ff-player-dock {
        left:8px;
        right:8px;
        bottom:8px;
        padding:6px 8px 8px
      }
      .ff-player-time {
        font-size:12px;
        margin-left:4px
      }
      .ff-player-controls,.ff-player-group {
        gap:4px
      }
    }
    @container (max-width:400px) {
      #ffPlayerBack,#ffPlayerFwd {
        display:none
      }
    }
    @keyframes ffPlayerIn {
      from {
        opacity:0;
        transform:translateY(24px) scale(.97)
      }
    }
    @keyframes ffFade {
      from {
        opacity:0
      }
    }
    @keyframes ffSpin {
      to {
        transform:rotate(360deg)
      }
    }
    @media(max-width:700px) {
      .ff-vid {
        --vid-gap:40cqw;
        height:420px
      }
      .ff-vid-arrow {
        width:40px;
        height:40px
      }
      .ff-vid-prev {
        left:8px
      }
      .ff-vid-next {
        right:8px
      }
      .ff-vid-hint {
        display:none
      }
      .ff-vid-bottom {
        grid-template-columns:auto 1fr;
        left:14px;
        right:14px
      }
      .ff-vid-dots {
        justify-content:flex-end
      }
      .ff-player {
        padding:8px
      }
      .ff-player-shell {
        padding:10px;
        gap:10px;
        border-radius:22px
      }
      .ff-player-head {
        padding:4px 2px 0 6px
      }
      .ff-player-index {
        display:none
      }
      .ff-player-frame {
        width:min(100%,calc((100dvh - 200px) * var(--ar,1.7778)));
        border-radius:16px
      }
      .ff-player-shell.is-portrait {
        display:flex;
        max-height:none
      }
      .ff-player-shell.is-portrait .ff-player-frame {
        width:min(100%,calc((100dvh - 200px) * var(--ar)));
        height:auto
      }
      .ff-player-shell.is-portrait .ff-player-list {
        flex-direction:row;
        overflow-x:auto;
        overflow-y:hidden
      }
      .ff-player-shell.is-portrait .ff-player-item {
        width:210px
      }
      .ff-player-bigplay {
        width:72px;
        height:72px
      }
      .ff-player-bigplay svg {
        width:28px;
        height:28px
      }
      .ff-player-dock {
        left:6px;
        right:6px;
        bottom:6px;
        padding:4px 8px 6px;
        border-radius:14px
      }
      .ff-player-controls .ff-pbtn {
        width:40px;
        height:40px
      }
      .ff-player-controls .ff-pbtn-main {
        width:44px;
        height:44px
      }
      .ff-player-keys {
        display:none
      }
      .ff-player-time {
        font-size:12px;
        margin-left:4px
      }
      .ff-player-item {
        width:210px
      }
    }
    @media(prefers-reduced-motion:reduce) {
      .ff-vid-card,.ff-vid-play,.ff-vid-cover img,.ff-player-dock,.ff-player-bigplay {
        transition:none!important
      }
      .ff-vid-card.is-active .ff-vid-play::after {
        animation:none
      }
      .ff-player[open] .ff-player-shell,.ff-player-end {
        animation:none
      }
    }