/* ============================================================
       LUMIGOODS — Elite Tech / AI-Fashion · 2026
       Anthracite-black + cool white · Clash Display × General Sans
       3D Spline · Spotlight · 3D-tilt hovers · glassmorphism
       ============================================================ */

    :root{
      --bg:#08090a;            /* deepest cool anthracite-black */
      --surface:#0c0e10;
      --surface-2:#111417;
      --card:rgba(255,255,255,.026);
      --card-hi:rgba(255,255,255,.05);
      --elevated:#16191d;

      --line:rgba(255,255,255,.08);
      --line-2:rgba(255,255,255,.15);
      --line-3:rgba(255,255,255,.28);

      --text:#f3f5f7;          /* cool near-white */
      --text-2:rgba(243,245,247,.66);
      --text-3:rgba(243,245,247,.5);

      /* brand accent — steel blue (used coolly, sparingly) */
      --accent:#286181;
      --accent-bright:#5a9ec4;

      --display:'Clash Display','General Sans',system-ui,sans-serif;
      --body:'General Sans',system-ui,-apple-system,sans-serif;
      --ease:cubic-bezier(.22,.61,.36,1);
      --gutter:clamp(1.25rem,5vw,6rem);
      --maxw:1480px;
    }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
    body{
      font-family:var(--body);
      /* ONE continuous page background (viewport-fixed) — same atmosphere everywhere.
         faint blueprint grid + cool steel-blue accent glow echo the AI-pattern language */
      background:
        linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px) 0 0/64px 64px,
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px) 0 0/64px 64px,
        radial-gradient(62% 52% at 90% 82%, rgba(40,97,129,.2), transparent 62%),
        radial-gradient(45% 40% at 6% 4%, rgba(40,97,129,.1), transparent 60%),
        radial-gradient(125% 88% at 82% 0%, #13171d 0%, rgba(19,23,29,0) 48%),
        radial-gradient(95% 70% at 2% 16%, rgba(16,20,26,.7) 0%, rgba(16,20,26,0) 52%),
        #08090a;
      background-attachment:fixed;
      color:var(--text);
      line-height:1.6;font-weight:400;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    ::selection{background:var(--text);color:var(--bg)}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
    .hidden{display:none !important}

    /* classy scroll touches */
    .scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;pointer-events:none;
      background:linear-gradient(90deg, var(--accent), var(--accent-bright));
      box-shadow:0 0 14px rgba(40,97,129,.6);transition:width .12s linear}
    .sec-line{width:3.5rem;height:1px;margin:0 auto 1.6rem;background:linear-gradient(90deg,transparent,var(--accent-bright),transparent)}

    /* top-level polish */
    section[id]{scroll-margin-top:88px}
    a:focus-visible,button:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px;border-radius:6px}
    .svc:hover{box-shadow:0 28px 60px -34px rgba(0,0,0,.7)}
    .svc:hover .svc__num{color:var(--accent-bright)}
    .btn--ghost:hover{border-color:rgba(90,158,196,.55);box-shadow:0 0 26px -6px rgba(40,97,129,.45)}
    .about__stats > div{transition:transform .4s var(--ease)}
    .about__stats > div:hover{transform:translateY(-4px)}
    .contact__info .val a{display:inline-block;transition:transform .4s var(--ease),opacity .3s}
    .contact__info > div:hover .val a{transform:translateY(-2px)}

    /* atmosphere: grain + faint top glow */
    body::before{
      content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
      background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.06), transparent 60%);
    }
    body::after{
      content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);width:100%;position:relative;z-index:2}

    /* ---------- shared type ---------- */
    .eyebrow{
      font-family:var(--body);font-size:.7rem;font-weight:500;
      letter-spacing:.28em;text-transform:uppercase;color:var(--text-2);
      display:inline-flex;align-items:center;gap:.7em;
    }
    .display{font-family:var(--display);font-weight:600;line-height:1.0;letter-spacing:-.02em}
    .grad-text{
      background:linear-gradient(176deg,#ffffff 0%, #eef1f3 42%, rgba(243,245,247,.5) 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

    .btn{
      display:inline-flex;align-items:center;gap:.7em;font-size:.76rem;font-weight:500;
      letter-spacing:.16em;text-transform:uppercase;padding:1.05em 2.1em;border-radius:999px;
      transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
      will-change:transform;
    }
    .btn .arw{transition:transform .4s var(--ease)}
    .btn:hover .arw{transform:translateX(.35em)}
    .btn--primary{background:var(--text);color:var(--bg);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 10px 40px -12px rgba(255,255,255,.4)}
    .btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 18px 60px -14px rgba(255,255,255,.55)}
    .btn--ghost{border:1px solid var(--line-2);color:var(--text);backdrop-filter:blur(6px)}
    .btn--ghost:hover{border-color:var(--line-3);transform:translateY(-2px);background:var(--card-hi)}

    /* ---------- Spotlight (aceternity) ---------- */
    .spotlight{position:absolute;top:0;left:0;height:169%;width:138%;pointer-events:none;z-index:1;opacity:0}
    @media(min-width:1024px){.spotlight{width:84%}}
    .animate-spotlight{animation:spotlight 2.4s var(--ease) .4s 1 forwards}
    @keyframes spotlight{0%{opacity:0;transform:translate(-72%,-62%) scale(.5)}100%{opacity:1;transform:translate(-50%,-40%) scale(1)}}

    /* ============================================================
       HEADER
       ============================================================ */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .5s var(--ease),border-color .5s,backdrop-filter .5s;border-bottom:1px solid transparent}
    .site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,2vw,2rem);height:84px;transition:height .5s var(--ease)}
    /* LumiGoods logo — pre-processed to white wordmark on transparent (logo-white.png), no box anywhere */
    .logo img{height:34px;width:auto}
    .nav{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem)}
    .nav__link{font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;position:relative;padding:.4em 0;color:var(--text-2);transition:color .4s var(--ease)}
    .nav__link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent-bright);box-shadow:0 0 8px rgba(90,158,196,.6);transition:width .4s var(--ease)}
    .nav__link:hover{color:var(--text)}
    .nav__link:hover::after{width:100%}
    .nav__cta{font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;padding:.7em 1.4em;border:1px solid var(--line-2);border-radius:999px;color:var(--text);transition:all .4s var(--ease)}
    .nav__cta:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
    .site-header.is-solid{background:rgba(8,9,10,.72);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line)}
    .site-header.is-solid .site-header__bar{height:66px}
    .menu-toggle{display:none;width:34px;height:34px;align-items:center;justify-content:center;color:var(--text)}
    .menu-toggle svg{width:24px;height:24px}
    .mobile-menu{border-top:1px solid var(--line);padding:1.25rem 0 1.75rem}
    .mobile-menu a{display:block;padding:.85rem 0;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--line)}
    .mobile-menu a:last-child{border-bottom:none;margin-top:.85rem;text-align:center;background:var(--text);color:var(--bg);border-radius:999px;padding:1rem}

    /* ============================================================
       HERO  (split: copy + 3D Spline)
       ============================================================ */
    .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
    .hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;padding-block:8rem 4rem}
    .hero__badge{display:inline-flex;align-items:center;gap:.6em;font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);
      border:1px solid var(--line);background:var(--card);backdrop-filter:blur(8px);padding:.55em 1em;border-radius:999px;margin-bottom:2rem}
    .hero__badge .dot{width:6px;height:6px;border-radius:999px;background:var(--text);box-shadow:0 0 12px 2px rgba(255,255,255,.7);animation:pulse 2.4s var(--ease) infinite}
    @keyframes pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
    .hero h1{font-size:clamp(2.9rem,7.5vw,6.6rem);font-weight:600;letter-spacing:-.03em;line-height:.98;margin-bottom:1.75rem}
    .hero h1 .l{display:block;overflow:hidden}
    /* gradient-clip lives on the inner span (which holds the actual text) */
    .hero h1 .l>span{
      background:linear-gradient(176deg,#ffffff 0%, #eef1f3 42%, rgba(243,245,247,.55) 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .hero__sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--text-2);max-width:40ch;margin-bottom:2.5rem;font-weight:300}
    .hero__actions{display:flex;flex-wrap:wrap;gap:1rem}

    /* HERO / ABOUT — floating 3D-render asset (white bg knocked out), no box; soft pedestal glow + parallax/tilt */
    .hero__visual{position:relative;height:min(82vh,680px);transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform}
    .visual-glow{position:absolute;inset:5% 3%;z-index:0;pointer-events:none;border-radius:50%;
      background:radial-gradient(52% 52% at 52% 46%, rgba(255,255,255,.17), rgba(255,255,255,.035) 46%, transparent 72%);filter:blur(18px)}
    /* black bg knocked out to transparent → floats cleanly on dark, soft contact shadow */
    .scene-asset{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
      filter:grayscale(1) brightness(1.05) contrast(1.04) drop-shadow(0 30px 55px rgba(0,0,0,.5));
      transform:scale(1.02);transition:transform .35s ease-out;will-change:transform}
    /* idle float — gives the 3D asset life even without mouse (independent layer, no transform conflict) */
    .scene-float{position:relative;z-index:1;width:100%;height:100%;animation:floaty 7s ease-in-out infinite;will-change:transform}
    .about__media .scene-float{animation-duration:8.5s;animation-delay:.6s}
    @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
    .loader{width:34px;height:34px;border-radius:999px;border:2px solid var(--line-2);border-top-color:var(--text);animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    .hero__meta{position:absolute;z-index:3;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-3)}
    .hero__meta.l{bottom:2.4rem;left:var(--gutter)}
    .scroll-ind{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.8rem}
    .scroll-ind span{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-3)}
    .scroll-ind .ln{width:1px;height:48px;background:linear-gradient(var(--text),transparent);position:relative;overflow:hidden}
    .scroll-ind .ln::after{content:"";position:absolute;top:-50%;left:0;width:1px;height:50%;background:var(--text);animation:drop 2.4s var(--ease) infinite}
    @keyframes drop{0%{top:-50%}60%,100%{top:100%}}

    /* ============================================================
       SECTIONS
       ============================================================ */
    .section{position:relative;padding-block:clamp(5rem,12vh,10rem);overflow:hidden}
    .section--alt{background:transparent}
    .sec-head{text-align:center;max-width:48rem;margin:0 auto clamp(3rem,7vw,5rem)}
    .sec-head .eyebrow{justify-content:center}
    .sec-head h2{font-size:clamp(2.4rem,5.5vw,4.2rem);margin:1.25rem 0 1rem}
    .sec-head p{color:var(--text-2);font-size:1.1rem;font-weight:300}

    /* ABOUT */
    .about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,7vw,6rem);align-items:center}
    .about__num{font-family:var(--display);font-size:clamp(3.5rem,9vw,7rem);line-height:1;color:var(--line-2);font-weight:500;margin-bottom:1rem}
    .about h2{font-size:clamp(2.2rem,5vw,3.6rem);margin:1.25rem 0 1.75rem}
    .about p{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--text-2);max-width:40ch;margin-bottom:2.5rem;font-weight:300}
    .about__stats{display:flex;gap:2.75rem;border-top:1px solid var(--line);padding-top:2rem}
    .about__stats .k{font-family:var(--display);font-size:2.1rem;line-height:1;display:block;font-weight:600}
    .about__stats .v{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-top:.55rem;display:block}
    .about__media{position:relative;height:min(64vh,580px);transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform}

    /* SERVICES */
    .services{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
    .svc{position:relative;padding:clamp(2rem,3vw,2.75rem);border-radius:20px;border:1px solid var(--line);
      background:var(--card);backdrop-filter:blur(8px);overflow:hidden;transform-style:preserve-3d;
      transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease)}
    .svc::before{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
      background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(90,158,196,.24),transparent 42%);
      opacity:0;transition:opacity .4s}
    .svc:hover{border-color:var(--line-2);background:var(--card-hi)}
    .svc:hover::before{opacity:1}
    .svc__num{font-family:var(--display);font-size:.95rem;font-weight:500;color:var(--text-3);margin-bottom:2rem;display:block}
    .svc__icon{margin-bottom:1.5rem;transform:translateZ(40px)}
    .svc__icon svg{width:40px;height:40px;stroke:var(--text);fill:none;transition:transform .45s var(--ease)}
    .svc:hover .svc__icon svg{transform:scale(1.08) translateY(-2px)}
    .svc h3{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;margin-bottom:.9rem;transform:translateZ(28px)}
    .svc p{font-size:.92rem;color:var(--text-2);line-height:1.7;font-weight:300;transform:translateZ(16px)}
    .svc-tag{text-align:center;margin-top:clamp(2.5rem,5vw,3.5rem);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-3)}

    /* CONTACT */
    .contact{max-width:56rem;margin:0 auto}
    .form{display:flex;flex-direction:column;gap:2rem}
    .form__row{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
    .field input,.field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-2);
      padding:.95rem 0;font-family:var(--body);font-size:1rem;font-weight:300;color:var(--text);transition:border-color .4s var(--ease)}
    .field textarea{resize:none;min-height:120px}
    .field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
    .field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--text)}
    .form__submit{align-self:center;margin-top:.5rem}
    .contact__info{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center;margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(3rem,6vw,4rem);border-top:1px solid var(--line)}
    .contact__info .lbl{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);margin-bottom:.8rem}
    .contact__info .val{font-family:var(--display);font-size:1.1rem;font-weight:500}
    .contact__info a:hover{color:var(--text-2);transition:color .3s}

    /* FOOTER */
    .site-footer{background:transparent;border-top:1px solid var(--line);padding-top:clamp(4rem,8vw,6rem)}
    .footer__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:3.5rem}
    .footer__brand p{color:var(--text-2);font-size:.9rem;max-width:24ch;font-weight:300}
    .footer__col h4{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);margin-bottom:1.4rem;font-weight:500}
    .footer__col ul{list-style:none;display:flex;flex-direction:column;gap:.85rem}
    .footer__col a,.footer__col li{font-size:.9rem;color:var(--text-2);font-weight:300;transition:color .3s}
    .footer__col a:hover{color:var(--text)}
    /* footer brand banner = exact logo (not text) */
    .footer__mark{border-top:1px solid var(--line);padding:clamp(2.25rem,5vw,4rem) 0;display:flex;justify-content:center}
    .footer__mark img{height:clamp(52px,10vw,128px);width:auto;opacity:.95}
    .footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding:1.75rem 0}
    .footer__bottom p,.footer__bottom a{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
    .footer__bottom .links{display:flex;gap:1.75rem}
    .footer__bottom a:hover{color:var(--text)}

    /* ============================================================
       MOTION
       ============================================================ */
    @keyframes riseIn{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}
    .js .hero__badge,.js .hero h1 .l>span,.js .hero__sub,.js .hero__actions,.js .hero__scene,.js .scroll-ind,.js .hero__meta{opacity:0}
    .hero__badge{animation:riseIn .9s var(--ease) .15s forwards}
    .hero h1 .l>span{display:block;animation:riseIn 1s var(--ease) forwards}
    .hero h1 .l:nth-child(1)>span{animation-delay:.3s}
    .hero h1 .l:nth-child(2)>span{animation-delay:.42s}
    .hero__sub{animation:riseIn .9s var(--ease) .65s forwards}
    .hero__actions{animation:riseIn .9s var(--ease) .8s forwards}
    .hero__scene{animation:riseIn 1.1s var(--ease) .5s forwards}
    .scroll-ind,.hero__meta{animation:riseIn .9s var(--ease) 1.3s forwards}

    .js [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
    .js [data-reveal].in{opacity:1;transform:none}
    [data-reveal-delay="1"]{transition-delay:.1s}
    [data-reveal-delay="2"]{transition-delay:.2s}
    [data-reveal-delay="3"]{transition-delay:.3s}

    @media (prefers-reduced-motion:reduce){
      *{animation:none !important;transition:none !important}
      .js [data-reveal],.js .hero *{opacity:1 !important;transform:none !important}
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    /* mobile menu open → solid header backdrop */
    .site-header.menu-open{background:rgba(8,9,10,.96);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line)}

    /* nav 7 link + CTA ~1300px altında sığmıyor → yarı-window/tablet aralığında temiz hamburger */
    @media (max-width:1340px){ .nav{display:none} .menu-toggle{display:flex} }
    @media (max-width:980px){
      .site-header__bar{height:68px}
      .hero{min-height:auto}
      .hero__grid{grid-template-columns:1fr;gap:2.25rem;padding-block:6.5rem 3.5rem}
      .hero__copy{order:1}
      .hero__visual{order:2;height:min(56vh,430px)}
      .about{grid-template-columns:1fr;gap:2.5rem}
      .about__media{order:-1;height:min(54vh,430px)}
      .services{grid-template-columns:1fr}
      .split{grid-template-columns:1fr;gap:2.5rem}
      .asset-slot{height:min(54vh,430px)}
      .footer__cols{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}
    }
    @media (max-width:560px){
      .site-header__bar{height:60px}
      .logo img{height:30px}
      .hero__grid{padding-block:5.5rem 2.5rem;gap:2rem}
      .hero__visual,.about__media,.asset-slot{height:min(46vh,360px)}
      .page-hero{padding-top:7rem}
      .form__row{grid-template-columns:1fr}
      .contact__info{grid-template-columns:1fr;gap:1.5rem}
      .footer__cols{grid-template-columns:1fr;gap:2rem}
      .brand-grid{grid-template-columns:repeat(2,1fr)}
      .hero__actions{width:100%}
      .hero__actions .btn,.cta-band .btn,.form__submit .btn{width:100%;justify-content:center}
    }

    /* ============================================================
       INNER PAGES (about / services / brands / contact)
       ============================================================ */
    main{display:block}
    .page-hero{position:relative;padding:clamp(8.5rem,18vh,13rem) 0 clamp(2.5rem,6vw,4.5rem)}
    .page-hero .eyebrow{margin-bottom:1.6rem}
    .page-hero h1{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:.98;
      font-size:clamp(3rem,8vw,6.4rem)}
    .page-hero .lead{font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--text-2);max-width:54ch;margin-top:1.85rem;font-weight:300}
    .page-section{position:relative;padding-block:clamp(3rem,8vh,7rem)}
    .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
    .split .lead-2{font-size:clamp(1rem,1.6vw,1.2rem);color:var(--text-2);font-weight:300;line-height:1.7;max-width:42ch}
    .split .eyebrow{margin-bottom:1.4rem}
    .split h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:clamp(2rem,4.5vw,3.4rem);margin:.4rem 0 1.5rem}

    /* floating asset slot (same language as hero) + placeholder while awaiting art */
    .asset-slot{position:relative;height:min(64vh,560px)}
    .asset-slot.is-empty{border:1px dashed var(--line-2);border-radius:20px;display:grid;place-items:center;
      background:radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.03), transparent 70%)}
    .slot-label{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-3);text-align:center;line-height:2}
    .slot-label b{display:block;color:var(--text-2);font-weight:600;letter-spacing:.18em;margin-top:.4rem}

    /* CTA band */
    .cta-band{text-align:center;padding-block:clamp(4rem,9vw,7rem)}
    .cta-band h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:clamp(2.4rem,6vw,4.5rem);margin-bottom:2.25rem}
    .cta-band .btn{margin:0 auto}

    /* brands grid placeholder */
    .brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
    .brand-cell{height:120px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;
      background:var(--card);color:var(--text-3);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
    @media(max-width:900px){.split{grid-template-columns:1fr;gap:3rem}.brand-grid{grid-template-columns:repeat(2,1fr)}}

    /* contact form on inner page */
    .contact-wrap{max-width:56rem;margin:0 auto}
    .page-active{color:var(--text) !important}

    /* ============================================================
       UI/UX POLISH PASS (a11y, touch, feedback)
       ============================================================ */
    a,button{touch-action:manipulation}

    /* accessible names without visual labels */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* skip-to-content (keyboard) */
    .skip-link{position:fixed;top:-100px;left:1rem;z-index:300;background:var(--text);color:var(--bg);
      padding:.7rem 1.1rem;border-radius:8px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
      transition:top .25s var(--ease)}
    .skip-link:focus{top:1rem}

    /* touch target ≥44px + pressed states (immediate feedback) */
    .menu-toggle{width:44px;height:44px;margin-right:-10px}
    .menu-toggle:active{opacity:.55}
    .btn:active{transform:translateY(0) scale(.98)}
    .nav__cta:active,.nav__link:active{opacity:.6}

    /* scroll-to-top */
    .to-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:150;
      width:46px;height:46px;border-radius:999px;display:grid;place-items:center;
      background:rgba(12,15,18,.6);border:1px solid var(--line-2);backdrop-filter:blur(12px);color:var(--text);
      opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
      transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .35s,box-shadow .35s}
    .to-top.show{opacity:1;transform:none;pointer-events:auto}
    .to-top:hover{border-color:var(--accent-bright);box-shadow:0 0 22px -4px rgba(74,111,153,.5)}
    .to-top:active{transform:scale(.92)}
    .to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
    @media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s}}

    /* ============================================================
       PREMIUM UI LAYER — intro preloader · custom cursor · page transitions
       ============================================================ */

    /* 1) Cinematic intro preloader (first visit only; .seen skips it) */
    #preloader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:grid;place-items:center;
      transition:transform .85s var(--ease),opacity .5s ease;will-change:transform}
    #preloader.done{transform:translateY(-101%)}
    .seen #preloader{display:none}
    .pre__inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
    .pre__logo{height:40px;width:auto;opacity:.95;animation:preLogo .9s var(--ease) both}
    .pre__bar{width:150px;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
    .pre__bar span{display:block;height:100%;width:0;border-radius:2px;
      background:linear-gradient(90deg,var(--accent),var(--accent-bright));box-shadow:0 0 12px rgba(40,97,129,.6);
      animation:preBar 1.05s var(--ease) .15s forwards}
    @keyframes preLogo{from{opacity:0;transform:translateY(10px)}to{opacity:.95;transform:none}}
    @keyframes preBar{to{width:100%}}

    /* 2) Custom cursor — precise dot + lagging ring, difference-blended (theme-proof) */
    @media (hover:hover) and (pointer:fine){ body.has-cursor{cursor:none} body.has-cursor a,body.has-cursor button{cursor:none} }
    .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9500;border-radius:50%;mix-blend-mode:difference;opacity:0}
    .cursor-dot{width:7px;height:7px;background:#fff;transition:opacity .3s}
    .cursor-ring{width:38px;height:38px;border:1.5px solid #fff;transition:width .28s var(--ease),height .28s var(--ease),opacity .3s,background .28s}
    .cursor-dot.on,.cursor-ring.on{opacity:1}
    .cursor-ring.hot{width:66px;height:66px;background:rgba(255,255,255,.14)}
    body.cursor-down .cursor-ring{width:28px;height:28px}
    @media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none !important}}

    /* 3) Page transition fade (fade-out on internal navigation — safe, fade-out only) */
    .page-fade{position:fixed;inset:0;z-index:9000;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .42s ease}
    .page-fade.show{opacity:1;pointer-events:auto}

    @media (prefers-reduced-motion:reduce){
      #preloader{transition:opacity .3s}.pre__bar span{animation:none;width:100%}
      .cursor-dot,.cursor-ring{display:none !important}
      .page-fade{transition:opacity .15s}
    }

    /* ============================================================
       LIGHT THEME (html[data-theme="light"]) + theme toggle
       ============================================================ */
    /* theme toggle button (in header bar — visible on desktop + mobile) */
    .theme-toggle{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;
      border:1px solid var(--line-2);color:var(--text);background:transparent;flex-shrink:0;
      transition:border-color .35s,background .35s,color .35s,transform .3s var(--ease)}
    .theme-toggle:hover{border-color:var(--accent-bright);background:var(--card-hi)}
    .theme-toggle:active{transform:scale(.92)}
    .theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
    .theme-toggle .ic-sun{display:none}.theme-toggle .ic-moon{display:block}
    html[data-theme="light"] .theme-toggle .ic-sun{display:block}
    html[data-theme="light"] .theme-toggle .ic-moon{display:none}
    .nav .theme-toggle{margin-left:.4rem}
    @media (max-width:1340px){ .nav .theme-toggle{display:none} .site-header__bar .theme-toggle{margin-right:.4rem} }
    @media (min-width:1341px){ .site-header__bar > .theme-toggle{display:none} }

    html[data-theme="light"]{
      --bg:#eceef1; --surface:#ffffff; --surface-2:#f4f5f7;
      --card:rgba(18,24,28,.035); --card-hi:rgba(18,24,28,.07);
      --line:rgba(18,24,28,.1); --line-2:rgba(18,24,28,.18); --line-3:rgba(18,24,28,.3);
      --text:#12181c; --text-2:rgba(18,24,28,.66); --text-3:rgba(18,24,28,.5);
      --accent:#286181; --accent-bright:#2f7099;
    }
    html[data-theme="light"] body{
      background:
        linear-gradient(rgba(18,24,28,.04) 1px,transparent 1px) 0 0/64px 64px,
        linear-gradient(90deg, rgba(18,24,28,.04) 1px,transparent 1px) 0 0/64px 64px,
        radial-gradient(62% 52% at 90% 82%, rgba(40,97,129,.1), transparent 62%),
        radial-gradient(45% 40% at 6% 4%, rgba(40,97,129,.06), transparent 60%),
        radial-gradient(125% 88% at 82% 0%, #ffffff 0%, rgba(255,255,255,0) 48%),
        #eceef1;
    }
    html[data-theme="light"] body::before{background:radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,.05), transparent 60%)}
    html[data-theme="light"] body::after{mix-blend-mode:multiply;opacity:.035}
    html[data-theme="light"] .grad-text{background:linear-gradient(176deg,#12181c 0%,#2a3037 46%,rgba(18,24,28,.55) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
    html[data-theme="light"] .btn--primary{background:var(--text);color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 14px 40px -14px rgba(0,0,0,.45)}
    html[data-theme="light"] .btn--primary:hover{box-shadow:0 0 0 1px rgba(0,0,0,.12),0 20px 60px -16px rgba(0,0,0,.5)}
    html[data-theme="light"] .site-header.is-solid{background:rgba(236,238,241,.82)}
    html[data-theme="light"] .site-header.menu-open{background:rgba(236,238,241,.97)}
    html[data-theme="light"] #preloader{background:#eceef1}
    /* white logo → invert to dark wordmark on light theme */
    html[data-theme="light"] .logo img,html[data-theme="light"] .footer__mark img,html[data-theme="light"] .pre__logo{filter:invert(1)}
    /* light 3D renders need a dark stage to stay visible on a light page */
    html[data-theme="light"] .hero__visual,html[data-theme="light"] .about__media,html[data-theme="light"] .asset-slot{
      background:radial-gradient(120% 100% at 50% 28%, #161b20, #0c0f12);border-radius:24px;
      box-shadow:0 34px 80px -34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05)}
    html[data-theme="light"] .visual-glow{opacity:.7}
    /* smooth theme cross-fade */
    html.theme-anim,html.theme-anim body,html.theme-anim *{transition:background-color .4s ease,color .35s ease,border-color .35s ease !important}

    /* light theme: hero H1 inner-span gradient (was white) → dark so it's visible on light bg */
    html[data-theme="light"] .hero h1 .l>span{
      background:linear-gradient(176deg,#12181c 0%,#2a3037 46%,rgba(18,24,28,.55) 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent}

/* ===================== v2 — PDF stratejik bölümler ===================== */
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;margin-top:clamp(2rem,4vw,3rem)}
.method-step{padding:1.9rem 1.7rem;border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:.35s var(--ease)}
.method-step:hover{border-color:var(--line-2);transform:translateY(-3px)}
.method-step .n{font-family:var(--display);font-size:.85rem;color:var(--accent-bright);letter-spacing:.12em}
.method-step h4{font-family:var(--display);font-weight:500;font-size:1.06rem;margin:.7rem 0 .45rem;color:var(--text)}
.method-step p{color:var(--text-2);font-size:.88rem;font-weight:300;line-height:1.55}
@media(max-width:900px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.method-grid{grid-template-columns:1fr}}

.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.cap-grid h3{font-family:var(--display);font-weight:500;font-size:1.3rem;margin-bottom:1.3rem;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{padding:.6rem 1.05rem;border:1px solid var(--line);border-radius:999px;font-size:.92rem;color:var(--text-2);transition:.25s var(--ease)}
.chip:hover{border-color:var(--accent-bright);color:var(--text);transform:translateY(-1px)}
.seg-list{display:flex;flex-direction:column;gap:.7rem;list-style:none;padding:0}
.seg-list li{color:var(--text-2);font-size:1.02rem;font-weight:300;padding-left:1.5rem;position:relative}
.seg-list li::before{content:"";position:absolute;left:0;top:.68em;width:.32rem;height:.32rem;border-radius:50%;background:var(--accent-bright)}
@media(max-width:760px){.cap-grid{grid-template-columns:1fr;gap:2.5rem}}

.presence{text-align:center}
.presence .cities{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;margin-top:1.4rem}
.presence .cities span{font-family:var(--display);font-size:clamp(1.05rem,2.1vw,1.55rem);color:var(--text-3);font-weight:400;transition:.25s}
.presence .cities span.base{color:var(--text)}
.presence .cities span:hover{color:var(--accent-bright)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.why{padding:1.9rem 1.7rem;border:1px solid var(--line);border-radius:18px;transition:.35s var(--ease)}
.why:hover{border-color:var(--line-2);transform:translateY(-3px)}
.why h4{font-family:var(--display);font-weight:500;font-size:1.02rem;margin-bottom:.55rem;color:var(--text)}
.why p{color:var(--text-2);font-size:.88rem;font-weight:300;line-height:1.5}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}

/* ===================== v2 — framed editorial photos (tam sahne, knockout değil) ===================== */
.scene-asset.v2img{object-fit:cover!important;border-radius:20px!important;filter:none!important;transform:none!important;
  border:1px solid var(--line-2);box-shadow:0 40px 90px -45px rgba(0,0,0,.75)}
.hero__visual:has(.v2img) .visual-glow,.about__media:has(.v2img) .visual-glow,.asset-slot:has(.v2img) .visual-glow{display:none}
html[data-theme="light"] .scene-asset.v2img{border-color:rgba(10,20,30,.12);box-shadow:0 40px 90px -50px rgba(0,0,0,.4)}
/* tam-genişlik görsel bandı (Method / Global) */
.v2-band{position:relative;margin-top:clamp(2.5rem,5vw,3.5rem);border-radius:22px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 50px 120px -60px rgba(0,0,0,.8);aspect-ratio:21/9;transition:transform .5s var(--ease)}
.v2-band img{width:100%;height:100%;object-fit:cover;display:block}
.v2-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,9,10,.35));pointer-events:none}
html[data-theme="light"] .v2-band{border-color:rgba(10,20,30,.12);box-shadow:0 50px 120px -65px rgba(0,0,0,.4)}
@media(max-width:640px){.v2-band{aspect-ratio:4/3}}