/* ============================================================
   "Sevdiğin teknolojiler / Birlikte, daha güçlü"
   Referans: tasarim/Sevdiğin teknolojiler-{dark,light,mobil}.png
   ============================================================ */
:root{
  --t-panel:#091620;--t-panel-2:#0b1c28;--t-line:#143045;
  --t-ink:#ffffff;--t-body:#9db8cc;--t-sub:#7e9bb0;
  --t-card:#0b1a26;--t-card-line:#17334a;
  --t-accent:#0abafe;
}
html[data-theme=light]{
  --t-panel:#f7fbfe;--t-panel-2:#eef6fd;--t-line:#dde9f4;
  --t-ink:#0b1424;--t-body:#4a6073;--t-sub:#6a8093;
  --t-card:#ffffff;--t-card-line:#e6eef7;
  --t-accent:#0b7fc4;
}

.tech-suite{padding:0;border:0;display:block;margin-block:0}
.tech-panel{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--t-line);border-radius:26px;background:linear-gradient(135deg,var(--t-panel-2),var(--t-panel) 45%,var(--t-panel));padding:44px 46px 46px}
html[data-theme=light] .tech-panel{background:linear-gradient(120deg,#eef6fd,#fbfdfe 40%,#f4f9fe);box-shadow:0 20px 50px -40px rgba(11,22,32,.35)}

/* Dekor */
.tech-decor{position:absolute;inset:0;z-index:-1;pointer-events:none}
.td-blob{position:absolute;border-radius:50%;filter:blur(46px)}
.td-blob-a{left:-90px;top:-120px;width:340px;height:340px;background:#1076c4;opacity:.24}
.td-blob-b{right:-140px;bottom:-180px;width:420px;height:420px;background:#0e5f9c;opacity:.16}
html[data-theme=light] .td-blob-a{background:#8cc6f5;opacity:.4}
html[data-theme=light] .td-blob-b{background:#a9d5f7;opacity:.42}
.td-dots{position:absolute;width:150px;height:74px;color:#2f89c9;opacity:.35}
.td-dots-a{right:34px;top:22px}
.td-dots-b{left:26px;bottom:26px;opacity:.18}
html[data-theme=light] .td-dots{color:#9cc9ec;opacity:.55}
html[data-theme=light] .td-dots-b{opacity:.4}

/* Üst satır: tanıtım + teknoloji kartları */
.tech-top{display:grid;grid-template-columns:minmax(196px,226px) minmax(0,1fr);gap:30px;align-items:center}
.tech-intro .eyebrow{margin-bottom:14px;font-size:11.5px;font-weight:650;letter-spacing:2.4px;color:var(--t-accent);text-transform:uppercase}
.tech-intro h2{margin:0;font-family:'Manrope',Arial,sans-serif;font-size:34px;line-height:1.14;letter-spacing:-1.3px;font-weight:750;color:var(--t-ink)}
.tech-intro h2>span{color:var(--t-accent)}
.tech-intro p{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--t-body);max-width:240px}

.tech-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tech-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;padding:16px 14px;border:1px solid var(--t-card-line);border-radius:16px;background:var(--t-card);min-width:0}
.tech-card:before{content:'';position:absolute;inset:0;background:radial-gradient(120% 130% at 14% 50%,color-mix(in srgb,var(--brand) 28%,transparent),transparent 62%);opacity:.5;pointer-events:none}
html[data-theme=light] .tech-card:before{background:radial-gradient(130% 140% at 12% 50%,color-mix(in srgb,var(--brand) 13%,transparent),transparent 66%);opacity:1}
.tech-card{border-color:color-mix(in srgb,var(--brand) 26%,var(--t-card-line))}
html[data-theme=light] .tech-card{border-color:color-mix(in srgb,var(--brand) 16%,var(--t-card-line));box-shadow:0 6px 18px -14px color-mix(in srgb,var(--brand) 60%,transparent)}
.tc-logo{position:relative;display:grid;place-items:center;width:34px;height:34px;flex-shrink:0}
.tc-logo svg{width:32px;height:32px;display:block}
.tech-card.wp .tc-logo{background:#1E88E5;border-radius:50%;width:32px;height:32px}
.tech-card.wp .tc-logo svg{width:30px;height:30px}
.tc-text{position:relative;min-width:0;display:flex;flex-direction:column;gap:3px}
.tc-text strong{font-family:'Manrope',Arial,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-text small{font-size:11.5px;color:var(--t-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Alt satır: üç vaat kartı */
.tech-promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.promise{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--brand) 24%,var(--t-card-line));border-radius:18px;background:var(--t-card);transition:border-color .18s,transform .18s}
.promise:before{content:'';position:absolute;inset:0;background:radial-gradient(90% 150% at 6% 50%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 58%);opacity:.55;pointer-events:none}
html[data-theme=light] .promise{box-shadow:0 8px 22px -18px rgba(11,22,32,.5)}
html[data-theme=light] .promise:before{background:radial-gradient(95% 160% at 5% 50%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 62%);opacity:1}
.promise:hover{border-color:color-mix(in srgb,var(--brand) 60%,transparent);transform:translateY(-2px)}
.pr-icon{position:relative;display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;border:1px solid color-mix(in srgb,var(--brand) 42%,transparent);border-radius:15px;background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)}
html[data-theme=light] .pr-icon{background:color-mix(in srgb,var(--brand) 12%,#fff);border-color:color-mix(in srgb,var(--brand) 26%,transparent)}
.pr-icon svg{width:26px;height:26px}
.pr-text{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pr-text strong{font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--t-ink)}
.pr-text small{font-size:13px;color:var(--t-body)}
.pr-go{position:relative;display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:50%;background:color-mix(in srgb,var(--brand) 26%,transparent);color:var(--t-ink)}
html[data-theme=light] .pr-go{background:#eef4fb;color:#22374a}
.pr-go svg{width:19px;height:19px}
.promise:hover .pr-go{background:var(--brand);color:#fff}

/* ---------- Duyarlı ---------- */
@media(max-width:1250px){
  .tech-panel{padding:38px 32px 40px}
  .tech-top{grid-template-columns:1fr;gap:26px}
  .tech-intro p{max-width:none}
  .tech-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tech-promises{gap:14px;margin-top:26px}
}
@media(max-width:850px){
  .tech-suite{width:calc(100% - 36px)}
  .tech-panel{border:0;border-radius:0;background:none;box-shadow:none;padding:6px 0 0}
  html[data-theme=light] .tech-panel{background:none;box-shadow:none}
  .td-dots{display:none}
  .td-blob-a{left:-120px;top:-60px;width:300px;height:300px}
  .td-blob-b{right:-160px;bottom:0;width:340px;height:340px}
  .tech-top{gap:22px}
  .tech-intro .eyebrow{font-size:10.5px;letter-spacing:2.6px;margin-bottom:12px}
  .tech-intro h2{font-size:34px;letter-spacing:-1.2px}
  .tech-intro p{font-size:15px;line-height:1.5;margin-top:12px}
  .tech-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .tech-card{flex-direction:column;align-items:center;text-align:center;gap:9px;padding:16px 8px 14px;border-radius:14px}
  .tech-card:before{background:radial-gradient(120% 90% at 50% 26%,color-mix(in srgb,var(--brand) 30%,transparent),transparent 66%)}
  html[data-theme=light] .tech-card:before{background:radial-gradient(130% 95% at 50% 24%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 70%)}
  .tc-logo{width:38px;height:38px}
  .tc-logo svg{width:36px;height:36px}
  .tech-card.wp .tc-logo{width:36px;height:36px}
  .tech-card.wp .tc-logo svg{width:34px;height:34px}
  .tc-text{align-items:center;gap:2px}
  .tc-text strong{font-size:13.5px}
  .tc-text small{font-size:10.5px;white-space:normal}
  .tech-promises{grid-template-columns:1fr;gap:11px;margin-top:20px}
  .promise{gap:13px;padding:12px 13px;border-radius:16px}
  .pr-icon{width:48px;height:48px;border-radius:14px}
  .pr-icon svg{width:24px;height:24px}
  .pr-text strong{font-size:14.5px}
  .pr-text small{font-size:12px}
  .pr-go{width:34px;height:34px}
  .pr-go svg{width:17px;height:17px}
}
@media(max-width:400px){
  .tech-intro h2{font-size:31px}
  .tech-cards{gap:8px}
  .tech-card{padding:14px 5px 12px}
  .tc-text strong{font-size:12.5px}
  .tc-text small{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){.promise:hover{transform:none}}

/* ---------- Tasarım ölçüleri (masaüstü) ---------- */
@media(min-width:1251px){
  .tech-suite{width:min(1560px,calc(100% - 48px))}
  .tech-panel{padding:42px 40px 44px}
  .tech-top{grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center}
  .tech-intro h2{font-size:33px;line-height:1.2;letter-spacing:-1.2px}
  .tech-intro p{font-size:12.5px;line-height:1.5;max-width:205px;margin-top:12px}
  .tech-intro .eyebrow{font-size:11px;letter-spacing:2.3px;margin-bottom:12px}
  .tech-cards{gap:12px}
  .tech-card{padding:15px 12px;gap:10px;border-radius:15px}
  .tc-logo{width:32px;height:32px}
  .tc-logo svg{width:30px;height:30px}
  .tech-card.wp .tc-logo{width:30px;height:30px}
  .tech-card.wp .tc-logo svg{width:28px;height:28px}
  .tc-text strong{font-size:15px}
  .tc-text small{font-size:10.5px}
  .tech-promises{margin-top:30px;gap:18px}
}
@media(min-width:1251px){
  .tech-panel{padding:42px 52px 44px}
  .td-dots-b{left:12px;bottom:54px;width:56px;height:96px;opacity:.14}
  html[data-theme=light] .td-dots-b{opacity:.35}
}

/* Açık temada eski h2 span kuralını geçersiz kıl */
html[data-theme=light] .tech-intro h2>span{color:var(--t-accent)}
html[data-theme=light] .tech-intro h2{color:var(--t-ink)}
html[data-theme=light] .tech-intro p{color:var(--t-body)}
html[data-theme=light] .pr-text small{color:var(--t-body)}
html[data-theme=light] .tc-text small{color:var(--t-sub)}

/* ============================================================
   Tam genişlik bant: kutucuk yok, kapsayıcı bandın kendisi
   ============================================================ */
.tech-suite{width:auto;margin:0;padding:0}
.tech-panel{border:0;border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line);border-radius:0;padding:56px 0 58px;background:linear-gradient(120deg,var(--t-panel-2),var(--t-panel) 42%,var(--t-panel-2))}
html[data-theme=light] .tech-panel{background:linear-gradient(120deg,#eaf4fd,#fbfdfe 42%,#eef6fd);box-shadow:none;border-top:1px solid #e1edf7;border-bottom:1px solid #e1edf7}
.tech-inner{position:relative}
.td-blob-a{left:-4%;top:-160px;width:420px;height:420px}
.td-blob-b{right:-6%;bottom:-220px;width:520px;height:520px}
.td-dots-a{right:2.2%;top:26px}
.td-dots-b{left:1.6%;bottom:30px}
@media(min-width:1251px){
  .tech-panel{padding:56px 0 58px}
  .td-dots-a{right:2.2%;top:26px;width:150px;height:74px}
  .td-dots-b{left:1.4%;bottom:34px;width:70px;height:110px;opacity:.14}
  html[data-theme=light] .td-dots-b{opacity:.32}
}
@media(max-width:1250px){.tech-panel{padding:46px 0 48px}}
@media(max-width:850px){
  .tech-suite{width:auto}
  .tech-panel{padding:40px 0 42px;border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line);background:linear-gradient(120deg,var(--t-panel-2),var(--t-panel) 45%,var(--t-panel-2))}
  html[data-theme=light] .tech-panel{background:linear-gradient(120deg,#eaf4fd,#fbfdfe 45%,#eef6fd)}
  .td-dots{display:none}
  .td-blob-a{left:-30%;top:-90px;width:320px;height:320px}
  .td-blob-b{right:-32%;bottom:-120px;width:360px;height:360px}
}
@media(min-width:1251px){
  .tech-top{grid-template-columns:190px minmax(0,1fr);gap:16px}
  .tech-card{padding:15px 11px;gap:9px}
  .tc-text small{font-size:10px;letter-spacing:-.1px}
  .tc-text strong{font-size:14.5px}
}
/* Tech bandı ile Tepegöz bandı arasındaki boşluğu kapat */
.tepegoz-flow{margin-top:0}

/* Hero'dan devam eden, aşağı indikçe dalgalanan kare desen */
.tech-grid{position:absolute;inset:0;width:100%;height:100%;color:#5b93b8;opacity:.16;pointer-events:none}
html[data-theme=light] .tech-grid{color:#7fb6dd;opacity:.34}
@media(max-width:850px){.tech-grid{opacity:.12}html[data-theme=light] .tech-grid{opacity:.3}}

/* Arka plan tonu hero ile birebir aynı olsun */
.tech-panel{background:linear-gradient(180deg,var(--h-bg) 0%,var(--h-bg-2) 55%,var(--h-bg) 100%);border-top:0;border-bottom:1px solid var(--h-soft-line)}
html[data-theme=light] .tech-panel{background:linear-gradient(180deg,#f2f9fe 0%,#f8fcfe 55%,#f2f9fe 100%);border-top:0;border-bottom:1px solid #e4eef7}
.td-blob-a{opacity:.16}
.td-blob-b{opacity:.11}
html[data-theme=light] .td-blob-a{opacity:.3}
html[data-theme=light] .td-blob-b{opacity:.3}
/* Ton farkı yaratan ışıma lekeleri kalkar; zemin hero ile birebir aynı */
.td-blob{display:none}