/* ============================= ÖZEL IoT ÇÖZÜMLERİ SAYFASI ============================= */
.phero{ position:relative; background-color:var(--deep); background-image:radial-gradient(ellipse 820px 620px at 86% -8%, rgba(31,157,217,0.20), transparent 60%), radial-gradient(ellipse 560px 560px at -8% 108%, rgba(106,198,183,0.12), transparent 60%); color:#EAF3F8; padding:clamp(7.5rem,13vw,9.5rem) 0 clamp(3.5rem,7vw,5rem); overflow:hidden; }
.phero::before{ content:""; position:absolute; inset:0; z-index:0; background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:40px 40px, 40px 40px; border-bottom:1px solid rgba(255,255,255,0.08); }
.phero::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:1px; z-index:0; background:linear-gradient(rgba(255,255,255,0), #1F9DD9, rgba(255,255,255,0)); opacity:0.4; }
.phero .wrap{ position:relative; z-index:1; }
.phero h1{ color:#fff; font-family:var(--font-hero); font-weight:700; font-size:clamp(2.4rem,4.8vw,3.8rem); line-height:0.98; letter-spacing:0.002em; max-width:18ch; margin-top:0.9rem; }
.phero .sub{ color:#B7D1DF; font-size:1.08rem; line-height:1.65; max-width:62ch; margin-top:1.2rem; }
.phero .btn-row{ margin-top:2rem; }

/* ===== 01 standart / özel karşılaştırma ===== */
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:2.8rem; }
@media (max-width:820px){ .compare-grid{ grid-template-columns:1fr; } }
.compare-card{ border:1px solid var(--border); border-radius:var(--radius-l); padding:1.8rem 1.9rem; background:var(--surface); }
.compare-card.accent{ border-color:rgba(31,157,217,0.4); background:linear-gradient(160deg, var(--blue-soft), var(--surface) 55%); }
.compare-card .tag{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.compare-card.accent .tag{ color:var(--blue-strong); }
.compare-card h3{ font-size:1.3rem; margin:0.5rem 0 1rem; }
.compare-card ul{ list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
.compare-card li{ font-size:0.92rem; color:var(--ink-soft); padding-left:1.1rem; position:relative; line-height:1.5; }
.compare-card li::before{ content:"—"; position:absolute; left:0; color:var(--border-strong); }
.compare-card .foot{ font-size:0.86rem; color:var(--muted); border-top:1px solid var(--border); padding-top:1rem; }
.compare-card .foot a{ color:var(--blue-strong); text-decoration:none; font-weight:600; }

/* ===== 02 bileşen paleti ===== */
.component-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-m); overflow:hidden; margin-top:2.8rem; }
@media (max-width:860px){ .component-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .component-grid{ grid-template-columns:1fr; } }
.component-card{ background:var(--deep-2); padding:1.7rem 1.6rem; }
.component-card .cn{ font-family:var(--font-mono); font-size:0.72rem; color:var(--blue-bright); }
.component-card h4{ color:#fff; font-size:1.08rem; margin:0.6rem 0 0.5rem; }
.component-card p{ color:#9FBACB; font-size:0.85rem; line-height:1.55; }

/* ===== 03 süreç — dikey timeline ===== */
.process-track{ position:relative; margin-top:3rem; max-width:760px; }
.process-track::before{ content:""; position:absolute; left:27px; top:10px; bottom:10px; width:2px; background:linear-gradient(rgba(20,95,128,0), var(--blue-strong) 12%, var(--blue-strong) 88%, rgba(20,95,128,0)); }
.p-step{ position:relative; display:grid; grid-template-columns:56px 1fr; gap:1.3rem; padding:1.15rem 0; }
.p-step .node{ position:relative; z-index:1; width:56px; height:56px; border-radius:50%; background:var(--surface); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:1rem; color:var(--blue-strong); flex:0 0 auto; }
.p-step h4{ font-size:1.02rem; margin-bottom:0.3rem; }
.p-step p{ font-size:0.88rem; color:var(--muted); line-height:1.55; max-width:56ch; }

/* ===== 04 örnek proje alanları ===== */
.example-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.8rem; }
@media (max-width:900px){ .example-grid{ grid-template-columns:1fr; } }
.example-card{ background:var(--deep-3); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-l); padding:1.6rem 1.5rem; display:flex; flex-direction:column; }
.example-card .badge{ align-self:flex-start; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.28rem 0.6rem; border-radius:var(--radius-s); background:rgba(63,217,190,0.14); border:1px solid rgba(63,217,190,0.35); color:#8FF0DC; margin-bottom:0.9rem; }
.example-card .badge.concept{ background:rgba(184,134,11,0.16); border-color:rgba(184,134,11,0.4); color:#E8B94A; }
.example-card h4{ color:#fff; font-size:1.12rem; margin-bottom:0.9rem; }
.mini-flow{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.mini-flow li{ display:grid; grid-template-columns:78px 1fr; gap:0.7rem; padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:0.82rem; }
.mini-flow li:last-child{ border-bottom:none; }
.mini-flow b{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase; color:#6E8B9C; }
.mini-flow span{ color:#CFE4EE; line-height:1.45; }

/* ===== hero eyebrow icon reuse — inherited from shared ============================= */

.has-megamenu .mega-menu{ list-style:none; margin:0; padding:1.5rem; position:absolute; top:calc(100% + 0.9rem); left:50%; transform:translateX(-50%) translateY(-6px); width:min(880px, 94vw); background:#04222C; border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-m); box-shadow:0 22px 44px -14px rgba(0,0,0,0.6); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, visibility .16s ease, transform .16s ease; z-index:120; display:grid; grid-template-columns:1fr 1fr 1.15fr 1.05fr; gap:1.4rem; }
@media (min-width:1261px){
  .has-megamenu.megamenu-compact .mega-menu{ grid-template-columns:1fr 1fr; width:min(620px,92vw); }
  .has-megamenu.megamenu-single .mega-menu{ grid-template-columns:1fr; width:min(300px,92vw); }
}
.has-megamenu:hover .mega-menu, .has-megamenu:focus-within .mega-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-menu h5{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:#5C8DA3; margin:0 0 0.7rem; }
.mega-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.1rem; }
.mega-items li{ opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease; transition-delay:0s; }
.has-megamenu:hover .mega-items li, .has-megamenu:focus-within .mega-items li{ opacity:1; transform:translateY(0); transition-delay:calc(var(--i) * 0.05s); }
.mega-items a{ display:flex; align-items:flex-start; gap:0.65rem; padding:0.5rem 0.5rem; border-radius:var(--radius-s); text-decoration:none; }
.mega-items a:hover{ background:rgba(255,255,255,0.07); }
.mi-icon{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:rgba(106,198,183,0.12); border:1px solid rgba(106,198,183,0.28); display:flex; align-items:center; justify-content:center; color:#6AC6B7; }
.mi-icon svg{ width:16px; height:16px; }
.mi-text{ display:flex; flex-direction:column; gap:0.18rem; min-width:0; }
.mi-text b{ font-size:0.85rem; color:#fff; font-weight:600; }
.mi-sum{ font-size:0.72rem; color:#8FB2BF; line-height:1.35; }
.mi-badges{ display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.2rem; }
.mi-badges .mb{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.01em; color:#B9CEDA; border:1px solid rgba(255,255,255,0.14); border-radius:99px; padding:0.14rem 0.45rem; white-space:nowrap; }
.mega-cta{ background:linear-gradient(160deg, rgba(31,157,217,0.18), rgba(106,198,183,0.08)); border:1px solid rgba(31,157,217,0.35); border-radius:var(--radius-m); padding:1.1rem 1.15rem; display:flex; flex-direction:column; justify-content:space-between; opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease; transition-delay:0.24s; }
.has-megamenu:hover .mega-cta, .has-megamenu:focus-within .mega-cta{ opacity:1; transform:translateY(0); }
.mega-cta-icon{ width:34px; height:34px; border-radius:9px; background:rgba(31,157,217,0.18); border:1px solid rgba(31,157,217,0.4); display:flex; align-items:center; justify-content:center; color:#7FC9E8; margin-bottom:0.7rem; }
.mega-cta-icon svg{ width:18px; height:18px; }
.mega-cta .eb{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:#7FC9E8; }
.mega-cta h4{ color:#fff; font-family:var(--font-body); font-weight:600; font-size:0.96rem; margin:0.4rem 0 0.4rem; line-height:1.2; }
.mega-cta p{ color:#AFC7D3; font-size:0.75rem; line-height:1.5; margin-bottom:0; }
.mega-cta-go{ margin-top:0.9rem; font-family:var(--font-mono); font-size:0.76rem; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:0.4rem; }
@media (max-width:1180px){
  .has-megamenu .mega-menu{ grid-template-columns:1fr 1fr; width:min(620px,92vw); }
  .mega-cta{ grid-column:1 / -1; }
}
@media (max-width:1260px){
  .has-megamenu .mega-menu{ position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; box-shadow:none; border:none; background:transparent; padding:0.2rem 0 0.2rem 1.1rem; margin-top:0.3rem; width:auto; display:flex; flex-direction:column; gap:1.1rem; }
  .mega-items li{ opacity:1; transform:none; }
  .mega-cta{ opacity:1; transform:none; margin-top:0.2rem; }
}