/* OST Bilişim — v3 "Professional" katmanı (style-v2.css üzerine biner) */
:root{
  --navy:#0E1A23;
  --navy-2:#14242F;
  --navy-3:#1C3140;
  --line-dark:rgba(255,255,255,.12);
}

/* ---------- top bar ---------- */
.topbar{ background:var(--navy); color:rgba(255,255,255,.72); font-size:.8rem; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:9px; padding-bottom:9px; }
.topbar-left, .topbar-right{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar a:hover{ color:#fff; }
.topbar .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#3DDC9A; margin-right:7px; box-shadow:0 0 0 3px rgba(61,220,154,.2); }
.topbar svg{ vertical-align:-2px; margin-right:6px; opacity:.8; }
@media (max-width:760px){ .topbar-right{ display:none; } .topbar-left{ gap:14px; } .topbar .hide-sm{ display:none; } }

/* header: düz beyaz, ince gölge */
header{ background:rgba(255,255,255,.94); border-bottom:1px solid var(--border); box-shadow:0 6px 24px -18px rgba(14,26,35,.35); }
.brand img{ height:44px; }

/* ---------- dark hero (home) ---------- */
.hero.hero-dark{
  padding:84px 0 150px;
  background:
    linear-gradient(105deg, rgba(14,26,35,.97) 30%, rgba(14,26,35,.80) 62%, rgba(20,36,47,.65) 100%),
    url('../img/hero-bg.png') center/cover no-repeat;
  color:#fff;
}
.hero.hero-dark::before{
  top:-120px; right:-120px; width:620px; height:620px;
  background:radial-gradient(circle, rgba(245,124,0,.32) 0%, transparent 65%);
}
.hero.hero-dark::after{ display:none; }
.hero-dark h1{ color:#fff; font-size:clamp(2.3rem,4.4vw,3.7rem); letter-spacing:-.02em; }
.hero-dark h1 em{ color:var(--accent); }
.hero-dark p.lead{ color:rgba(255,255,255,.78); font-size:1.12rem; }
.hero-dark .eyebrow{ background:rgba(245,124,0,.16); color:#FFB877; }
.hero-dark .btn-dark{ background:var(--accent); box-shadow:0 14px 30px -12px rgba(245,124,0,.7); }
.hero-dark .btn-dark:hover{ background:var(--accent-dark); }
.hero-dark .btn-outline{ color:#fff; border-color:rgba(255,255,255,.35); }
.hero-dark .btn-outline:hover{ background:rgba(255,255,255,.1); }
.hero-dark .tech-chips span{ background:rgba(255,255,255,.08); border-color:var(--line-dark); color:rgba(255,255,255,.88); backdrop-filter:blur(6px); }
.hero-points{ display:flex; gap:26px; flex-wrap:wrap; margin-bottom:30px; }
.hero-points li{ display:flex; align-items:center; gap:8px; font-size:.92rem; color:rgba(255,255,255,.85); }
.hero-points svg{ color:#3DDC9A; flex:none; }

/* glass tiles */
.glass-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative; }
.glass-tile{
  display:block; padding:22px 20px;
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border:1px solid var(--line-dark); border-radius:20px;
  backdrop-filter:blur(10px);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.glass-tile:nth-child(even){ transform:translateY(26px); }
.glass-tile:hover{ border-color:rgba(245,124,0,.6); background:linear-gradient(160deg, rgba(245,124,0,.2), rgba(255,255,255,.06)); }
.glass-tile:nth-child(odd):hover{ transform:translateY(-4px); }
.glass-tile:nth-child(even):hover{ transform:translateY(22px); }
.glass-tile .gi{ width:42px; height:42px; border-radius:12px; background:rgba(245,124,0,.2); color:#FFB877; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.glass-tile strong{ display:block; color:#fff; font-size:1rem; margin-bottom:4px; }
.glass-tile span{ display:block; color:rgba(255,255,255,.62); font-size:.8rem; line-height:1.45; }
.hero-dark .hero-grid{ align-items:center; }
@media (max-width:960px){ .glass-tile:nth-child(even){ transform:none; } .glass-tile:nth-child(even):hover{ transform:translateY(-4px); } .hero.hero-dark{ padding:60px 0 120px; } }
@media (max-width:480px){ .glass-grid{ grid-template-columns:1fr; } }

/* stats bar overlapping hero */
.stats-float{ margin-top:-74px; position:relative; z-index:3; padding:0 0 10px; background:none; border:0; }
.stats-float .stats-band{ box-shadow:0 30px 60px -28px rgba(14,26,35,.45); border-radius:22px; border:0; }
.stats-float .stats-band div{ padding:30px 28px; display:flex; gap:16px; align-items:center; }
.stats-band .si{ width:46px; height:46px; border-radius:14px; background:var(--accent-tint); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; flex:none; }
.stats-band .st b{ line-height:1.1; }
@media (max-width:700px){ .stats-float{ margin-top:-60px; } .stats-float .stats-band div{ padding:20px 16px; } .stats-band .si{ display:none; } }

/* ---------- tech strip ---------- */
.tech-strip{ padding:46px 0 10px; }
.tech-strip p.cap{ text-align:center; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--text-muted); margin-bottom:20px; }
.tech-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; }
.tech-row span{
  font-weight:700; font-size:1rem; color:var(--dark-2); letter-spacing:-.01em;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 22px;
  box-shadow:0 8px 20px -16px rgba(14,26,35,.5);
}

/* ---------- bento services ---------- */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.bento-feature{
  grid-column:span 6; position:relative; overflow:hidden;
  border-radius:26px; padding:38px 36px; color:#fff; min-height:340px;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.bento-feature:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -28px rgba(14,26,35,.6); }
.bento-feature.f-navy{ background:radial-gradient(circle at 100% 0%, rgba(245,124,0,.32), transparent 55%), linear-gradient(150deg, var(--navy-3), var(--navy)); }
.bento-feature.f-orange{ background:radial-gradient(circle at 0% 100%, rgba(255,255,255,.22), transparent 55%), linear-gradient(150deg, #FF9A2E, #E65100); }
.bento-feature .fi{ width:54px; height:54px; border-radius:16px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:#fff; }
.bento-feature .tag{ position:absolute; top:30px; right:30px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.18); padding:5px 12px; border-radius:999px; }
.bento-feature h3{ color:#fff; font-size:1.6rem; margin-bottom:12px; }
.bento-feature p{ color:rgba(255,255,255,.82); max-width:46ch; margin-bottom:18px; }
.bento-feature ul{ display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
.bento-feature li{ display:flex; gap:9px; font-size:.92rem; color:rgba(255,255,255,.92); align-items:flex-start; }
.bento-feature li svg{ flex:none; margin-top:3px; color:#3DDC9A; }
.f-orange li svg{ color:#fff; }
.bento-feature .go{ margin-top:auto; display:inline-flex; gap:8px; align-items:center; font-weight:700; font-size:.92rem; }
.bento-feature .go svg{ transition:transform .15s; }
.bento-feature:hover .go svg{ transform:translateX(4px); }
.bento .service-card{ grid-column:span 3; }
@media (max-width:1040px){ .bento .service-card{ grid-column:span 6; } .bento-feature{ grid-column:span 12; min-height:0; } }
@media (max-width:600px){ .bento .service-card{ grid-column:span 12; } .bento-feature{ padding:30px 24px; } }

/* ---------- why us split ---------- */
.split{ display:grid; grid-template-columns:.95fr 1.05fr; gap:60px; align-items:center; }
.split-visual{ position:relative; }
.split-visual img.photo{ width:100%; border-radius:26px; aspect-ratio:4/4.4; object-fit:cover; box-shadow:0 40px 70px -34px rgba(14,26,35,.55); }
.split-visual .badge-float{
  position:absolute; left:-18px; bottom:34px; background:#fff; border-radius:18px; padding:16px 22px;
  box-shadow:0 24px 50px -22px rgba(14,26,35,.5); display:flex; gap:14px; align-items:center;
}
.badge-float b{ font-size:1.9rem; color:var(--accent); line-height:1; }
.badge-float span{ font-size:.8rem; color:var(--text-muted); line-height:1.3; }
.split-visual::before{ content:""; position:absolute; inset:26px -22px -22px 26px; border-radius:26px; background:var(--accent-tint); z-index:-1; }
.check-list{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin-top:26px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; }
.check-list .ci{ width:38px; height:38px; border-radius:11px; background:var(--accent-tint); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; flex:none; }
.check-list strong{ display:block; font-size:.98rem; color:var(--dark); margin-bottom:2px; }
.check-list span{ font-size:.85rem; color:var(--text-muted); line-height:1.5; display:block; }
@media (max-width:960px){ .split{ grid-template-columns:1fr; gap:46px; } .split-visual .badge-float{ left:12px; } .check-list{ grid-template-columns:1fr; } }

/* timeline */
.timeline{ position:relative; }
.timeline .step{ background:#fff; }
.timeline .step .num{ background:var(--accent); width:44px; height:44px; font-size:1.05rem; box-shadow:0 10px 20px -8px rgba(245,124,0,.6); }
@media (min-width:901px){
  .timeline .step:not(:last-child)::after{ content:""; position:absolute; top:50px; right:-21px; width:22px; height:2px; background:repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 9px); }
}

/* ---------- FAQ ---------- */
.faq-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.faq-side{ position:sticky; top:110px; }
.faq-side h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); margin:14px 0; }
.faq-card{ margin-top:24px; background:var(--navy); color:#fff; border-radius:22px; padding:26px; }
.faq-card h4{ color:#fff; margin-bottom:8px; }
.faq-card p{ color:rgba(255,255,255,.72); font-size:.9rem; margin-bottom:18px; }
.faq details{ background:#fff; border:1px solid var(--border); border-radius:16px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.faq details[open]{ border-color:rgba(245,124,0,.5); box-shadow:0 18px 36px -26px rgba(245,124,0,.6); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; color:var(--dark); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; line-height:1; color:var(--accent); font-weight:500; flex:none; transition:transform .15s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 24px 22px; font-size:.95rem; }
@media (max-width:900px){ .faq-wrap{ grid-template-columns:1fr; gap:30px; } .faq-side{ position:static; } }

/* ---------- inner page hero (dark) ---------- */
.page-hero{
  padding:64px 0 70px; text-align:left;
  background:
    linear-gradient(100deg, rgba(14,26,35,.96) 35%, rgba(14,26,35,.78)),
    url('../img/hero-bg.png') center/cover no-repeat;
  color:#fff;
}
.page-hero::before{ left:auto; right:-100px; top:-140px; transform:none; width:520px; height:520px; background:radial-gradient(circle, rgba(245,124,0,.3), transparent 65%); }
.page-hero .wrap{ position:relative; }
.page-hero h1{ color:#fff; max-width:22ch; margin-top:16px; font-size:clamp(2rem,3.8vw,3rem); letter-spacing:-.015em; }
.page-hero p{ color:rgba(255,255,255,.78); margin:16px 0 0; max-width:60ch; }
.page-hero .eyebrow{ background:rgba(245,124,0,.16); color:#FFB877; }
.page-hero .service-hero-icon{ margin:0 0 18px; background:rgba(245,124,0,.18); color:#FFB877; width:60px; height:60px; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:.82rem; color:rgba(255,255,255,.6); margin-bottom:22px; }
.breadcrumb a{ color:rgba(255,255,255,.8); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb i{ font-style:normal; opacity:.5; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.page-hero .btn-outline{ color:#fff; border-color:rgba(255,255,255,.35); }
.page-hero .btn-outline:hover{ background:rgba(255,255,255,.1); }

/* ---------- about visual ---------- */
.about-visual{ position:relative; }
.about-visual img{ width:100%; border-radius:26px; aspect-ratio:4/3.4; object-fit:cover; box-shadow:0 40px 70px -34px rgba(14,26,35,.55); }
.about-visual .badge-float{ position:absolute; right:-14px; bottom:30px; left:auto; }

/* ---------- CTA band (v3) ---------- */
.cta-band{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 90% 10%, rgba(245,124,0,.45), transparent 50%),
    linear-gradient(120deg, rgba(14,26,35,.95), rgba(14,26,35,.88)),
    url('../img/hero-bg.png') center/cover;
  border-radius:28px; padding:60px 54px;
}
.cta-band h2{ font-size:clamp(1.6rem,2.8vw,2.2rem); max-width:24ch; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- footer (v3) ---------- */
footer{ background:var(--navy); padding:70px 0 26px; }
.footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; }
.footer-grid h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.5); margin-bottom:18px; }
.footer-grid li{ margin-bottom:11px; }
.footer-grid li a{ color:rgba(255,255,255,.82); }
.footer-grid li a:hover{ color:var(--accent); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.82); }
.footer-contact svg{ flex:none; margin-top:3px; color:var(--accent); }
.footer-bottom{ margin-top:10px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* service cards: biraz daha belirgin */
.service-card{ box-shadow:0 10px 26px -22px rgba(14,26,35,.45); }
.section-head h2{ letter-spacing:-.015em; }

/* mobil: sabit alt CTA */
.mobile-cta{ display:none; }
@media (max-width:760px){
  .mobile-cta{ display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:70; gap:10px; }
  .mobile-cta a{ flex:1; padding:14px; border-radius:999px; text-align:center; font-weight:700; font-size:.92rem; box-shadow:0 14px 30px -10px rgba(14,26,35,.5); }
  .mobile-cta .a1{ background:var(--accent); color:#fff; }
  .mobile-cta .a2{ background:var(--navy); color:#fff; }
  body{ padding-bottom:84px; }
}

/* ---------- Otomasyon & Enerji (yeşil) ---------- */
:root{ --green:#16A34A; --green-tint:#D9F2E3; }
.service-icon.c-green{ background:var(--green-tint); color:var(--green); }
.eyebrow.c-green{ background:var(--green-tint); color:var(--green); }
.eyebrow.c-green::before{ background:var(--green); }
.mega-col a .ic.c-green, .mobile-services-body a .ic.c-green{ background:var(--green-tint); color:var(--green); }
.service-card:has(.c-green) .more{ color:var(--green); }
.service-card:has(.c-green)::before{ background:linear-gradient(90deg, var(--green), #4ADE80); }
.mega-panel{ width:min(1140px, 94vw); }
.mega-grid{ grid-template-columns:repeat(5,1fr); gap:20px; }
@media (max-width:1280px){ .mega-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1040px){ .mega-grid{ grid-template-columns:repeat(2,1fr); } }
.auto-band{ background:linear-gradient(150deg, var(--navy-3), var(--navy)); border-radius:28px; padding:48px; color:#fff; position:relative; overflow:hidden; }
.auto-band::before{ content:""; position:absolute; right:-80px; top:-80px; width:360px; height:360px; background:radial-gradient(circle, rgba(22,163,74,.35), transparent 65%); }
.auto-band .section-head{ position:relative; margin-bottom:30px; }
.auto-band .section-head h2{ color:#fff; }
.auto-band .section-head p{ color:rgba(255,255,255,.75); }
.auto-grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.auto-card{ display:block; background:rgba(255,255,255,.07); border:1px solid var(--line-dark); border-radius:20px; padding:26px; transition:transform .2s, border-color .2s, background .2s; }
.auto-card:hover{ transform:translateY(-4px); border-color:rgba(74,222,128,.6); background:rgba(255,255,255,.1); }
.auto-card .gi{ width:48px; height:48px; border-radius:14px; background:rgba(22,163,74,.22); color:#86EFAC; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.auto-card h3{ color:#fff; font-size:1.15rem; margin-bottom:8px; }
.auto-card p{ color:rgba(255,255,255,.72); font-size:.92rem; margin-bottom:14px; }
.auto-card .more{ color:#86EFAC; font-weight:700; font-size:.88rem; }
@media (max-width:900px){ .auto-grid{ grid-template-columns:1fr; } .auto-band{ padding:32px 22px; } }