:root{
    --ink:#080b09;
    --ink-2:#0e1410;
    --ink-3:#182019;
    --panel:#121a15;
    --line: rgba(255,255,255,0.12);
    --green:#c9cfd6;
    --green-dim: rgba(201,207,214,0.14);
    --cyan:#c9cfd6;
    --cyan-dim: rgba(201,207,214,0.14);
    --burgundy:#8f96a0;
    --burgundy-dim: rgba(143,150,160,0.16);
    --grad: linear-gradient(135deg, #f4f5f7 0%, #b7bcc4 55%, #71767e 100%);
    --amber:#8f96a0;
    --text:#f4f2ec;
    --muted:#9aa0a8;
    --muted-2:#63686f;
    --radius: 14px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--text);
    font-family:'Inter', sans-serif;
    line-height:1.55;
    overflow-x:hidden;
  }
  ::selection{ background:var(--cyan); color:var(--ink); }
  h1,h2,h3,h4{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; }
  a{ color:inherit; text-decoration:none; }
  .mono{ font-family:'JetBrains Mono', monospace; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
  img,svg{ display:block; max-width:100%; }

  /* Language toggling: visibility is controlled entirely via inline
     styles set by JS (see applyLang), so no CSS specificity fights
     with .btn / flex / grid display rules defined elsewhere. */

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:3px;
    border-radius:4px;
  }

  /* Header */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(10,20,14,0.78);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
  }
  .logo-img{
    height:66px; width:auto; display:block;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.16)) drop-shadow(0 2px 6px rgba(0,0,0,0.5)) brightness(1.08) contrast(1.15);
  }
  .navlinks{ display:flex; gap:34px; align-items:center; }
  .navlinks a{
    font-size:0.92rem; color:var(--muted); transition:color .2s;
    position:relative;
  }
  .navlinks a:hover{ color:var(--text); }
  .nav-right{ display:flex; align-items:center; gap:18px; }
  .lang-switch{
    display:flex; border:1px solid var(--line); border-radius:100px; overflow:hidden;
    font-family:'JetBrains Mono', monospace; font-size:0.72rem;
  }
  .lang-switch button{
    background:transparent; border:none; color:var(--muted); padding:7px 13px; cursor:pointer;
    transition:all .2s;
  }
  .lang-switch button.active{ background:var(--grad); color:var(--ink); font-weight:600; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--grad); color:var(--ink); font-weight:600; font-size:0.88rem;
    padding:11px 22px; border-radius:100px; border:none; cursor:pointer;
    transition:transform .2s, box-shadow .2s;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,255,255,0.18); }
  .btn.ghost{
    background:transparent; color:var(--text); border:1px solid var(--line);
  }
  .btn.ghost:hover{ border-color:var(--cyan); box-shadow:none; }
  .burger{ display:none; background:none; border:none; color:var(--text); font-size:1.4rem; cursor:pointer; }

  /* Hero */
  .hero{
    position:relative;
    padding:190px 0 120px;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(ellipse 60% 50% at 78% 8%, rgba(255,255,255,0.12), transparent 60%),
      radial-gradient(ellipse 55% 45% at 8% 85%, rgba(23,54,37,0.55), transparent 65%);
    animation: heroDrift 22s ease-in-out infinite alternate;
  }
  @keyframes heroDrift{
    0%{ background-position:0 0, 0 0; filter:hue-rotate(0deg); }
    100%{ background-position:30px -20px, -20px 20px; filter:hue-rotate(6deg); }
  }
  .hero-grid{ position:relative; }
  .hero-copy{ position:relative; z-index:2; min-width:0; }
  .grid-canvas{
    position:absolute; inset:0; z-index:0; opacity:0.35;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 60% 20%, black, transparent 75%);
  }
  .hero-inner{ position:relative; z-index:1; }
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--green);
    display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
    border:1px solid var(--green-dim); background:var(--green-dim);
    padding:7px 16px; border-radius:100px;
  }
  .hero h1{
    font-size:clamp(2.6rem, 5.6vw, 4.6rem);
    max-width:920px; line-height:1.06;
    margin-bottom:28px;
  }
  .hero h1 .accent{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-sub{
    font-size:1.15rem; color:var(--muted); max-width:640px; margin-bottom:44px;
  }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px; }

  /* Capability marquee - continuously moving strip under the hero copy */
  .marquee{
    position:relative; overflow:hidden; padding:12px 0 10px;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee-track{
    display:flex; align-items:center; gap:0; width:max-content;
    animation: marquee 52s linear infinite;
  }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .node{
    flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:12px;
    padding:0 34px; position:relative;
  }
  .node::after{
    content:''; position:absolute; top:30px; right:-4px; width:60px; height:1px;
    background:linear-gradient(90deg, var(--line), transparent);
  }
  .node-dot{
    width:62px; height:62px; border-radius:15px;
    background:var(--panel); border:1px solid var(--line);
    box-shadow:0 10px 24px rgba(0,0,0,0.35);
    display:flex; align-items:center; justify-content:center;
    color:var(--green); font-size:1.5rem;
    transition:border-color .2s, transform .2s;
  }
  .node:hover .node-dot{ border-color:var(--green); transform:translateY(-3px); }
  .node-label{
    font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--text);
    font-weight:600; text-align:center; white-space:nowrap; letter-spacing:0.04em;
  }


  section{ padding:110px 0; position:relative; }
  .section-head{ max-width:680px; margin-bottom:56px; }
  .kicker{
    font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--green);
    text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; display:block;
  }
  .section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom:18px; }
  .section-head p{ color:var(--muted); font-size:1.05rem; }

  /* About */
  #about{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start; }
  .about-copy p{ color:var(--muted); margin-bottom:20px; font-size:1.02rem; }
  .value-list{ display:flex; flex-direction:column; gap:22px; }
  .value-item{ display:flex; gap:16px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
  .value-item .ic{ color:var(--green); font-size:1.3rem; flex:0 0 auto; }
  .value-item h4{ font-size:1rem; margin-bottom:6px; }
  .value-item p{ color:var(--muted); font-size:0.92rem; }

  /* Services */
  .services-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  }
  .service-card{
    background:var(--ink); padding:34px 28px; transition:background .25s;
  }
  .service-card:hover{ background:var(--ink-2); }
  .service-num{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--muted-2); margin-bottom:22px; display:block; }
  .service-card h3{ font-size:1.08rem; margin-bottom:12px; }
  .service-card p{ color:var(--muted); font-size:0.9rem; }

  /* Solutions */
  #solutions{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .solutions-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; }
  .solution-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:32px; position:relative; overflow:hidden;
  }
  .solution-card::before{
    content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--green);
    opacity:0; transition:opacity .2s;
  }
  .solution-card:hover::before{ opacity:1; }
  .solution-card h3{ font-size:1.2rem; margin-bottom:12px; }
  .solution-card p{ color:var(--muted); font-size:0.94rem; margin-bottom:18px; }
  .tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .tag{
    font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--green);
    background:var(--green-dim); padding:5px 11px; border-radius:100px;
  }

  /* Insights */
  .insights-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
  .insight-card{ display:flex; flex-direction:column; gap:16px; }
  .insight-thumb{
    height:160px; border-radius:var(--radius); background:linear-gradient(135deg, var(--ink-3), var(--panel));
    border:1px solid var(--line); position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .insight-thumb::after{
    content:''; position:absolute; width:200%; height:200%;
    background:radial-gradient(circle, var(--green-dim), transparent 60%);
    animation:float 8s ease-in-out infinite;
  }
  @keyframes float{ 0%,100%{ transform:translate(-30%,-30%); } 50%{ transform:translate(-10%,-10%); } }
  .insight-thumb .glyph{ position:relative; z-index:1; font-size:2rem; color:var(--green); opacity:0.7; }
  .insight-card .cat{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; color:var(--muted-2); text-transform:uppercase; }
  .insight-card h4{ font-size:1.05rem; }
  .insight-card p{ color:var(--muted); font-size:0.9rem; }

  /* Contact */
  #contact{ background:var(--ink-2); border-top:1px solid var(--line); }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  .contact-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:40px;
  }
  .contact-row{
    display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
  }
  .contact-row:last-child{ border-bottom:none; }
  .contact-row .ic{
    width:42px; height:42px; border-radius:10px; background:var(--green-dim); color:var(--green);
    display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:1.1rem;
  }
  .contact-row .label{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; color:var(--muted-2); text-transform:uppercase; margin-bottom:4px; display:block; }
  .contact-row .value{ font-size:1rem; }
  .contact-row a.value:hover{ color:var(--green); }

  footer{
    padding:36px 0; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  }
  footer p{ color:var(--muted-2); font-size:0.85rem; }
  .footer-links{ display:flex; gap:24px; }
  .footer-links a{ color:var(--muted); font-size:0.85rem; transition:color .2s; }
  .footer-links a:hover{ color:var(--green); }

  /* Social links */
  .social-row{ display:flex; align-items:center; gap:10px; }
  .social-link{
    width:42px; height:42px; border-radius:10px;
    background:var(--panel); border:1px solid var(--line); color:var(--muted);
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    transition:color .2s, border-color .2s, transform .2s;
  }
  .social-link:hover{ color:var(--text); border-color:var(--green); transform:translateY(-2px); }
  .social-link svg{ width:19px; height:19px; }
  .social-link .mark{
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.05rem; line-height:1;
  }

  /* WhatsApp kulakçığı */
  .wa-tab{
    position:fixed; right:22px; bottom:22px; z-index:98;
    display:flex; align-items:center; gap:0;
    height:56px; padding:0 17px; border-radius:100px;
    background:var(--panel); border:1px solid var(--line); color:var(--text);
    box-shadow:0 12px 34px rgba(0,0,0,0.5);
    overflow:hidden; white-space:nowrap;
    transition:gap .25s ease, padding .25s ease, border-color .2s, transform .2s, box-shadow .2s;
  }
  .wa-tab:hover{
    gap:11px; padding-right:24px; border-color:var(--green);
    transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,0.6);
  }
  .wa-tab .wa-icon{ font-size:1.5rem; line-height:1; flex:0 0 auto; }
  /* display:inline-block is required for max-width to apply, and it is the
     value applyLang() restores when it clears the inline display style. */
  .wa-tab .wa-text{
    display:inline-block; overflow:hidden;
    max-width:0; opacity:0; font-size:0.9rem; font-weight:600;
    transition:max-width .25s ease, opacity .2s ease;
  }
  .wa-tab:hover .wa-text{ max-width:220px; opacity:1; }
  @media (prefers-reduced-motion: reduce){
    .wa-tab, .wa-tab .wa-text{ transition:none !important; }
  }
  @media (max-width:560px){
    .wa-tab{ right:16px; bottom:16px; height:52px; padding:0 15px; }
    .wa-tab:hover .wa-text{ max-width:0; opacity:0; }
    .wa-tab:hover{ gap:0; padding-right:15px; }
  }

  .mobile-menu{
    display:none; position:fixed; inset:0; z-index:99; background:var(--ink);
    padding:110px 32px 40px; flex-direction:column; gap:26px;
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a{ font-size:1.3rem; font-family:'Space Grotesk',sans-serif; }

  @media (max-width:960px){
    .navlinks{ display:none; }
    .burger{ display:block; }
    .about-grid, .contact-grid{ grid-template-columns:1fr; gap:40px; }
    .services-grid{ grid-template-columns:repeat(2,1fr); }
    .solutions-grid{ grid-template-columns:1fr; }
    .insights-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:560px){
    .services-grid{ grid-template-columns:1fr; }
    .wrap{ padding:0 20px; }
    .hero{ padding:150px 0 80px; }
  }

  /* ---------- Yazı sayfaları (insights) ---------- */
  .article{ padding:170px 0 90px; }
  .article-head{ max-width:760px; margin:0 auto 48px; }
  .article-meta{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px;
    font-family:'JetBrains Mono', monospace; font-size:0.74rem; color:var(--muted-2);
    text-transform:uppercase; letter-spacing:0.06em;
  }
  .article-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted-2); }
  .article-head h1{ font-size:clamp(1.9rem, 4vw, 3rem); line-height:1.12; margin-bottom:20px; }
  .article-lede{ font-size:1.12rem; color:var(--muted); }

  .prose{ max-width:760px; margin:0 auto; }
  .prose h2{ font-size:1.5rem; margin:44px 0 16px; }
  .prose h3{ font-size:1.15rem; margin:32px 0 12px; }
  .prose p{ color:var(--muted); margin-bottom:20px; font-size:1.02rem; }
  .prose ul, .prose ol{ color:var(--muted); margin:0 0 22px 22px; }
  .prose li{ margin-bottom:10px; font-size:1.02rem; }
  .prose strong{ color:var(--text); font-weight:600; }
  .prose a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
  .prose a:hover{ color:var(--green); }
  .prose blockquote{
    border-left:3px solid var(--line); padding:4px 0 4px 22px; margin:0 0 22px;
    color:var(--muted); font-style:italic;
  }
  .prose code{
    font-family:'JetBrains Mono', monospace; font-size:0.88em;
    background:var(--panel); border:1px solid var(--line);
    padding:2px 6px; border-radius:5px; color:var(--text);
  }
  .prose hr{ border:none; border-top:1px solid var(--line); margin:40px 0; }
  .prose table{ width:100%; border-collapse:collapse; margin-bottom:22px; font-size:0.95rem; }
  .prose th, .prose td{ border:1px solid var(--line); padding:10px 12px; text-align:left; color:var(--muted); }
  .prose th{ color:var(--text); font-weight:600; background:var(--panel); }
  .prose-scroll{ overflow-x:auto; }

  .article-foot{
    max-width:760px; margin:56px auto 0; padding-top:32px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  }
  .back-link{ color:var(--muted); font-size:0.92rem; }
  .back-link:hover{ color:var(--text); }

  .insight-card a.insight-link{ display:flex; flex-direction:column; gap:16px; height:100%; }
  .insight-card a.insight-link:hover h4{ color:var(--green); }
  .insight-card h4{ transition:color .2s; }
  .insight-date{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; color:var(--muted-2); }

  @media (max-width:560px){
    .article{ padding:130px 0 70px; }
  }

  /* ---------- Hizmet sayfaları ---------- */
  .service-card a.service-link{ display:block; height:100%; }
  .service-card a.service-link h3{ transition:color .2s; }
  .service-card:hover a.service-link h3{ color:var(--green); }
  .service-more{
    display:inline-block; margin-top:16px;
    font-family:'JetBrains Mono', monospace; font-size:0.72rem;
    color:var(--muted-2); letter-spacing:0.04em;
  }
  .service-card:hover .service-more{ color:var(--green); }

  .svc-hero{ padding:170px 0 0; }
  .svc-hero .wrap{ max-width:900px; }
  .svc-num{
    font-family:'JetBrains Mono', monospace; font-size:0.75rem; color:var(--muted-2);
    letter-spacing:0.08em; display:block; margin-bottom:18px;
  }
  .svc-hero h1{ font-size:clamp(2rem, 4.4vw, 3.2rem); line-height:1.1; margin-bottom:20px; }
  .svc-hero .svc-lede{ font-size:1.14rem; color:var(--muted); max-width:680px; }

  .svc-body{ padding:56px 0 90px; }
  .svc-body .wrap{ max-width:900px; }

  .svc-cta{
    margin-top:56px; padding:36px; border:1px solid var(--line);
    border-radius:var(--radius); background:var(--panel);
    display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  }
  .svc-cta h3{ font-size:1.2rem; margin-bottom:6px; }
  .svc-cta p{ color:var(--muted); font-size:0.94rem; }

  .svc-nav{
    margin-top:56px; padding-top:32px; border-top:1px solid var(--line);
  }
  .svc-nav .kicker{ margin-bottom:20px; }
  .svc-nav-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
  .svc-nav-grid a{
    padding:14px 16px; border:1px solid var(--line); border-radius:10px;
    background:var(--panel); font-size:0.9rem; color:var(--muted);
    transition:color .2s, border-color .2s;
  }
  .svc-nav-grid a:hover{ color:var(--text); border-color:var(--green); }

  @media (max-width:960px){
    .svc-nav-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:560px){
    .svc-hero{ padding:130px 0 0; }
    .svc-nav-grid{ grid-template-columns:1fr; }
    .svc-cta{ padding:26px; }
  }

  /* Dil anahtarı artık gerçek bağlantı (JS toggle yerine ayrı adresler) */
  .lang-switch a{
    display:inline-flex; align-items:center;
    background:transparent; color:var(--muted); padding:7px 13px;
    font-family:'JetBrains Mono', monospace; font-size:0.72rem;
    transition:all .2s;
  }
  .lang-switch a:hover{ color:var(--text); }
  .lang-switch a.active{ background:var(--grad); color:var(--ink); font-weight:600; }