/* =========================================================
   TIMCOM BİLİŞİM — site stili
   Tasarım fikri: logodaki "co" harflerini oluşturan aç/kapa anahtarı.
   Anahtar sitenin ana motifi: girişte açılır, seçilen hizmetin anahtarı yanar.
   Renkleri değiştirmek için sadece :root bloğunu düzenleyin.
   ========================================================= */
:root{
  --black:#050607;     /* logo zemini, giriş ve alt bilgi */
  --black-2:#111417;   /* koyu kart */
  --black-line:#23282d;
  --bg:#f4f6f6;        /* açık bölümler zemini */
  --panel:#ffffff;
  --ink:#121417;
  --muted:#5c646c;
  --line:#dde2e4;
  --green:#00DE8C;     /* logo gradyanı başlangıç */
  --teal:#00B4C6;      /* logo gradyanı orta */
  --blue:#039FDA;      /* logo gradyanı bitiş */
  --grad:linear-gradient(90deg, var(--green), var(--teal) 55%, var(--blue));
  --off:#2a2f35;       /* kapalı anahtar rengi */
  --font-display:"Lexend", "Segoe UI", system-ui, sans-serif;
  --font-body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius:14px;
  --wrap:1200px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--black)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *,*::before,*::after{animation:none!important; transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font:400 1.0625rem/1.6 var(--font-body); -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
::selection{background:var(--teal); color:#fff}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.025em; text-wrap:balance}
p{margin:0}
.label{font:500 .74rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- MİNİ ANAHTAR (her yerde kullanılan motif) ---------- */
.sw{--w:34px; --h:18px; position:relative; display:inline-block; flex:none; width:var(--w); height:var(--h); border-radius:999px; background:var(--off); overflow:hidden; vertical-align:middle}
.sw::before{content:""; position:absolute; inset:0; background:var(--grad); opacity:0; transition:opacity .35s}
.sw::after{content:""; position:absolute; top:calc(var(--h)*.12); left:calc(var(--h)*.12); width:calc(var(--h)*.76); height:calc(var(--h)*.76); border-radius:50%; background:#fff; transition:transform .45s cubic-bezier(.6,-0.3,.3,1.4)}
.sw.on::before{opacity:1}
.sw.on::after{transform:translateX(calc(var(--w) - var(--h)))}
.light .sw,.gcard .sw{background:#cfd6da}

/* ---------- ÜST MENÜ ---------- */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(5,6,7,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--black-line); color:#fff}
.nav .wrap{display:flex; align-items:center; gap:28px; height:68px}
.brand{display:flex; align-items:center}
.brand img{height:30px; width:auto; display:block}
.nav ul{display:flex; gap:22px; list-style:none; margin:0 0 0 auto; padding:0}
.nav ul a{text-decoration:none; font-size:.95rem; color:#aab3bb}
.nav ul a:hover{color:#fff}
.nav .tel{font:500 .85rem/1 var(--font-mono); color:#fff; text-decoration:none; display:flex; align-items:center; gap:10px; white-space:nowrap}
.nav .rd{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; text-decoration:none; color:#fff; font:600 .82rem/1 var(--font-sans,inherit); white-space:nowrap;
  background:linear-gradient(#0b1012,#0b1012) padding-box, linear-gradient(90deg,#00DE8C,#00B4C6,#039FDA) border-box; border:1.5px solid transparent; transition:box-shadow .2s, transform .2s}
.nav .rd svg{color:#00DE8C; flex:none}
.nav .rd:hover{box-shadow:0 0 0 3px rgba(0,222,140,.15), 0 0 18px rgba(0,180,198,.35); transform:translateY(-1px)}
.nav .rd:focus-visible{outline:2px solid #00DE8C; outline-offset:3px}
.rd-link{display:inline-flex; align-items:center; gap:8px}
.rd-link svg{color:#00B4C6; flex:none}
@media (max-width:980px){ .nav ul{display:none} .nav .rd{margin-left:auto} .nav .wrap{gap:14px} }
@media (max-width:560px){ .nav .rd span{display:none} .nav .rd{padding:8px 10px} }
@media (max-width:420px){ .nav .tel span.t{display:none} }

.btn{display:inline-flex; align-items:center; gap:10px; height:48px; padding-inline:22px; border-radius:999px; font:600 .95rem/1 var(--font-body); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s}
.btn:hover{transform:translateY(-1px)}
.btn.grad{background:var(--grad); color:#03131a; box-shadow:0 10px 30px -12px rgba(0,180,198,.7)}
.btn.line{background:transparent; color:#fff; border-color:#3a4148}
.btn.line:hover{border-color:#fff}
.btn.dark{background:var(--ink); color:#fff}

/* ---------- GİRİŞ ---------- */
.hero{background:var(--black); color:#fff; position:relative; overflow:hidden; padding-block:clamp(56px,9vw,120px) clamp(48px,7vw,96px)}
.hero::before{content:""; position:absolute; left:50%; top:30%; width:min(900px,120vw); aspect-ratio:2.4/1; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(0,190,190,.28), transparent 70%); opacity:0; transition:opacity 1.2s; pointer-events:none}
.hero.is-on::before{opacity:1}
.hero .wrap{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(28px,4vw,44px)}

/* Büyük logo: harfler SVG, "co" anahtarı gerçek bir düğme */
.logo-big{position:relative; width:min(860px,100%); aspect-ratio:1032/392}
.logo-big img{position:absolute; inset:0; width:100%; height:100%}
.power{position:absolute; left:40.89%; top:19.9%; width:34.5%; height:37.24%; border:0; padding:0; border-radius:999px; background:var(--off); cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent}
.power::before{content:""; position:absolute; inset:0; background:var(--grad); opacity:0; transition:opacity .5s .15s}
.power .knob{position:absolute; top:50%; left:6.04%; width:33.7%; aspect-ratio:1; border-radius:50%; background:#fff; transform:translate(0,-50%); transition:transform .7s cubic-bezier(.65,-0.25,.3,1.35); box-shadow:0 4px 18px rgba(0,0,0,.35)}
.power[aria-checked="true"]::before{opacity:1}
.power[aria-checked="true"] .knob{transform:translate(160.9%,-50%)}
.power:focus-visible{outline:3px solid #fff; outline-offset:6px}
.power-hint{font:500 .72rem/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:#7d8790; display:flex; align-items:center; gap:10px; margin-top:-8px}
.power-hint b{font-weight:500; color:#fff}
.hero.is-on .power-hint b{color:var(--green)}

.hero h1{font-size:clamp(2.3rem,5.6vw,4.4rem); line-height:1.02; transition:opacity .6s}
.hero .lead{font-size:1.15rem; color:#a9b2ba; max-width:56ch; transition:opacity .6s}
.hero:not(.is-on) h1,.hero:not(.is-on) .lead{opacity:.35}
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}

/* ---------- RAKAMLAR ---------- */
.stats{background:var(--black); color:#fff; border-top:1px solid var(--black-line)}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:28px 22px; border-left:1px solid var(--black-line); display:flex; flex-direction:column; gap:8px; min-width:0}
.stat:first-child{border-left:0; padding-left:0}
.stat b{font:600 clamp(1.7rem,3vw,2.3rem)/1 var(--font-display); font-variant-numeric:tabular-nums}
.stat span{color:#8e98a1; font-size:.92rem}
.n{font-style:normal}
@media (max-width:760px){ .stats .wrap{grid-template-columns:1fr 1fr} .stat{padding-left:20px} .stat:nth-child(odd){border-left:0; padding-left:0} .stat:nth-child(n+3){border-top:1px solid var(--black-line)} }

/* ---------- BÖLÜMLER ---------- */
section.block{padding-block:clamp(64px,9vw,112px)}
section.tight{padding-top:0}
.sec-head{display:grid; grid-template-columns:1fr 1.25fr; gap:32px; align-items:end; margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.06}
.sec-head .label{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.sec-head p{color:var(--muted); max-width:56ch}
@media (max-width:760px){ .sec-head{grid-template-columns:1fr} }

/* Çözümler: her sekme bir anahtar, seçilince açılır */
.sol{display:grid; grid-template-columns:360px 1fr; gap:24px; align-items:start}
.sol-list{display:flex; flex-direction:column; gap:8px; position:sticky; top:92px}
.sol-tab{display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); font:600 .98rem/1.3 var(--font-body); color:var(--ink); cursor:pointer; transition:border-color .2s, box-shadow .2s}
.sol-tab:hover{border-color:#b9c3c8}
.sol-tab[aria-selected="true"]{border-color:transparent; box-shadow:0 0 0 2px var(--teal) inset}
.sol-tab .sw{background:#cfd6da}
.sol-tab[aria-selected="true"] .sw::before{opacity:1}
.sol-tab[aria-selected="true"] .sw::after{transform:translateX(calc(var(--w) - var(--h)))}
.sol-panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,44px); min-width:0}
.sol-panel + .sol-panel{margin-top:16px}
.js .sol-panel + .sol-panel{margin-top:0}
.sol-panel header{display:flex; flex-direction:column; gap:12px; padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:6px}
.sol-panel h3{font-size:clamp(1.4rem,2.4vw,1.95rem); line-height:1.12}
.sol-panel header p{color:var(--muted); max-width:62ch}
.sol-panel .label{color:var(--teal)}
.feat{display:grid; grid-template-columns:1fr 1fr; gap:0 32px; list-style:none; padding:0; margin:0}
.feat li{padding:18px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; min-width:0}
.feat b{font-weight:600; display:flex; align-items:flex-start; gap:10px}
.feat b::before{content:""; margin-top:.55em; width:8px; height:8px; border-radius:50%; background:var(--grad); flex:none}
.feat span{color:var(--muted); font-size:.95rem}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px}
.chips span{font:500 .72rem/1 var(--font-mono); padding:8px 11px; border-radius:999px; background:var(--bg); color:var(--muted)}
@media (max-width:920px){ .sol{grid-template-columns:1fr} .sol-list{position:static; flex-direction:row; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin} .sol-tab{flex:none; min-width:250px} }
@media (max-width:600px){ .feat{grid-template-columns:1fr} }

/* Kurumsal */
.corp{background:var(--black); color:#e9edf0}
.corp .label{color:#8e98a1}
.corp .eyebrow{color:var(--green)}
.corp-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,6vw,80px); align-items:start}
.corp .quote{margin-top:18px; font:500 clamp(1.45rem,2.7vw,2.1rem)/1.25 var(--font-display); letter-spacing:-0.02em; text-wrap:balance}
.corp .body{color:#a9b2ba; margin-top:22px; max-width:58ch}
.strengths{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.strengths li{display:flex; align-items:center; gap:16px; padding:18px 20px; background:var(--black-2); border:1px solid var(--black-line); border-radius:var(--radius)}
.strengths b{font-weight:600; display:block}
.strengths span{display:block; color:#8e98a1; font-size:.92rem}
@media (max-width:860px){ .corp-grid{grid-template-columns:1fr} }

/* Referanslar: beyaz kutularda logolar, üzerine gelince renklenir */
.refs{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; list-style:none; padding:0; margin:0}
.refs li{background:#fff; border:1px solid var(--line); border-radius:12px; aspect-ratio:16/10; display:grid; place-items:center; padding:16px 20px; transition:border-color .2s, box-shadow .2s, transform .2s}
.refs li > a{display:grid; place-items:center; width:100%; height:100%}
.refs img{max-width:100%; max-height:72px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .25s, opacity .25s}
.refs li:hover{border-color:var(--teal); box-shadow:0 12px 28px -18px rgba(0,120,140,.45); transform:translateY(-2px)}
.refs li:hover img{filter:none; opacity:1}
@media (hover:none){ .refs img{filter:none; opacity:1} }
@media (max-width:420px){ .refs{grid-template-columns:repeat(2,1fr)} }

/* Markalar: sağdan sola sonsuz kayan logo şeridi (JS listeyi bir kez kopyalar) */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; width:max-content; animation:marquee 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.brand-row{display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0 14px 0 0}
.brand-row li{flex:none; width:200px; height:104px; display:grid; place-items:center; padding:20px 26px; background:#fff; border:1px solid var(--line); border-radius:12px; transition:border-color .2s, transform .2s}
.brand-row li:hover{border-color:var(--teal); transform:translateY(-2px)}
.brand-row img{max-width:100%; max-height:40px; width:auto; height:auto; object-fit:contain}
.brand-row li.thin img{max-height:30px}
.brand-row li.sq img{max-height:56px}
.brand-row li.tall img{max-height:54px}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marquee{-webkit-mask-image:none; mask-image:none}
  .marquee-track{width:auto; animation:none; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
  .brand-row{flex-wrap:wrap; padding:0}
  .brand-row[aria-hidden="true"]{display:none}
}
@media (max-width:600px){ .brand-row li{width:150px; height:84px; padding:16px 18px} .brand-row img{max-height:32px} .marquee-track{animation-duration:35s} }

/* Grup markaları */
.group{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.gcard{position:relative; display:flex; flex-direction:column; gap:14px; padding:clamp(24px,4vw,36px); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; transition:transform .2s, box-shadow .2s}
.gcard:hover{transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.gcard:hover .sw::before{opacity:1}
.gcard:hover .sw::after{transform:translateX(calc(var(--w) - var(--h)))}
.gcard .top{display:flex; justify-content:space-between; align-items:center}
.gcard h3{font-size:1.7rem}
.gcard p{color:var(--muted)}
.gcard .go{font:500 .8rem/1 var(--font-mono); color:var(--teal)}
@media (max-width:700px){ .group{grid-template-columns:1fr} }

/* İletişim */
.contact{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,48px)}
.cinfo{display:flex; flex-direction:column; margin:0; border-top:2px solid var(--ink)}
.cinfo div{display:grid; grid-template-columns:130px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.cinfo dt{font:500 .74rem/1.7 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.cinfo dd{margin:0}
.cinfo dd a{text-decoration:none; border-bottom:1px solid var(--line)}
.cinfo dd a:hover{border-color:var(--teal); color:#00808d}
.cinfo .sub{display:block; font-size:.85rem; color:var(--muted)}
.career{margin-top:24px; padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; gap:8px}
.career p{color:var(--muted); font-size:.95rem}
form{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,4vw,36px); display:flex; flex-direction:column; gap:16px; min-width:0}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font:500 .72rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.field input,.field textarea,.field select{font:400 1rem/1.4 var(--font-body); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--teal); background:#fff}
.field textarea{resize:vertical; min-height:110px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
form .btn{align-self:flex-start}
.form-note{font:400 .85rem/1.4 var(--font-mono); color:var(--muted); min-height:1.4em}
.form-note.ok{color:#00808d}
.form-legal{font-size:.72rem;line-height:1.45;color:var(--muted);margin:.4rem 0 0;opacity:.85}
.form-legal a{color:inherit;text-decoration:underline}
.grecaptcha-badge{visibility:hidden}
@media (max-width:860px){ .contact{grid-template-columns:1fr} }
@media (max-width:520px){ .row{grid-template-columns:1fr} .cinfo div{grid-template-columns:1fr; gap:4px} }

/* Alt bilgi */
footer{background:var(--black); color:#8e98a1; padding-block:56px 32px; font-size:.92rem}
.foot{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px}
.foot .flogo{width:220px; height:auto; display:block}
.foot h4{margin:0 0 12px; font:500 .72rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:#68727b}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.foot a{text-decoration:none; color:#c5ccd2}
.foot a:hover{color:#fff}
.foot p{margin-top:16px; max-width:36ch}
.legal{margin-top:40px; padding-top:20px; border-top:1px solid var(--black-line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font:400 .75rem/1.5 var(--font-mono)}
@media (max-width:760px){ .foot{grid-template-columns:1fr} }

/* WhatsApp düğmesi */
.wa{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:30; width:54px; height:54px; border-radius:50%; background:#25d366; display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.wa svg{width:28px; height:28px}
.power-hint .live{width:8px; height:8px; border-radius:50%; background:#5b636c; flex:none; transition:background .4s, box-shadow .4s}
.hero.is-on .power-hint .live{background:var(--green); box-shadow:0 0 0 0 rgba(0,222,140,.6); animation:live 2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(0,222,140,.55)} 100%{box-shadow:0 0 0 10px rgba(0,222,140,0)}}

/* Bölüm üst başlıkları (Çözümlerimiz, Kurumsal, Referanslar…): marka rengi + gradyan çizgi */
.sec-head .label,.eyebrow{display:flex; align-items:center; gap:12px; font-size:.82rem; font-weight:600; letter-spacing:.16em; color:#00808d}
.sec-head .label::before,.eyebrow::before{content:""; width:28px; height:3px; border-radius:3px; background:var(--grad); flex:none}
.corp .eyebrow{color:var(--green)}