/* ============================= PRODUCTS PAGE — page hero ============================= */
.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:16ch; margin-top:0.9rem; }
.phero .sub{ color:#B7D1DF; font-size:1.08rem; line-height:1.65; max-width:60ch; margin-top:1.2rem; }
.pjump{ list-style:none; display:flex; flex-wrap:wrap; gap:0.7rem; margin:2.2rem 0 0; padding:0; }
.pjump a{ display:flex; align-items:center; gap:0.5rem; text-decoration:none; font-family:var(--font-mono); font-size:0.82rem; color:#CFE4EE; border:1px solid rgba(255,255,255,0.18); border-radius:99px; padding:0.55rem 1rem 0.55rem 0.7rem; transition:border-color .15s ease, background .15s ease; }
.pjump a:hover{ border-color:rgba(124,192,234,0.6); background:rgba(255,255,255,0.04); }
.pjump .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue-bright); flex:0 0 auto; }
.pjump a.action .dot{ background:var(--signal); }

/* ============================= DEEP-DIVE BLOCKS ============================= */
.section:has(> .wrap > .ppanel){ padding-top:clamp(1.6rem,3vw,2.6rem); padding-bottom:clamp(2.2rem,4vw,3.4rem); }
.pdeep{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:start; padding:clamp(1.6rem,3vw,2.4rem) 0 0; border-bottom:none; }
.pdeep.rev{ direction:rtl; }
.pdeep.rev > *{ direction:ltr; }
@media (max-width:900px){ .pdeep, .pdeep.rev{ direction:ltr; grid-template-columns:1fr; } }
.pdeep-media{ display:grid; grid-template-columns:1.3fr 1fr; gap:0.9rem; align-items:start; }
.pdeep-media.single{ grid-template-columns:1fr; }
@media (max-width:560px){ .pdeep-media{ grid-template-columns:1fr; } }
.pdeep-media .main-shot{ border-radius:var(--radius-l); overflow:hidden; background:var(--surface-2); border:1px solid var(--border); box-shadow:var(--shadow-1); }
.pdeep-media .main-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdeep-media .sub-shot{ border-radius:var(--radius-m); overflow:hidden; background:var(--surface-2); border:1px solid var(--border); align-self:stretch; }
.pdeep-media .sub-shot img{ width:100%; height:100%; object-fit:cover; display:block; min-height:140px; }
.pdeep-media .sub-cap{ font-family:var(--font-mono); font-size:0.7rem; color:var(--muted); margin-top:0.5rem; }
.pdeep-media .main-shot.cf{ position:relative; aspect-ratio:0.68; }
.pdeep-media .main-shot.cf img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pdeep-media .main-shot.cf .cf-a{ animation:cfA 7s ease-in-out infinite; }
.pdeep-media .main-shot.cf .cf-b{ animation:cfB 7s ease-in-out infinite; }
@keyframes cfA{ 0%,42%{ opacity:1; } 50%,92%{ opacity:0; } 100%{ opacity:1; } }
@keyframes cfB{ 0%,42%{ opacity:0; } 50%,92%{ opacity:1; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .pdeep-media .main-shot.cf img{ animation:none !important; }
  .pdeep-media .main-shot.cf .cf-a{ opacity:1; }
  .pdeep-media .main-shot.cf .cf-b{ opacity:0; }
}
.pdeep-tag{ display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; padding:0.3rem 0.7rem; border-radius:99px; border:1px solid var(--border-strong); color:var(--ink-soft); margin-bottom:1rem; }
.pdeep-tag.action{ color:var(--copper); border-color:var(--copper-soft); background:var(--copper-soft); }
.pdeep-code{ font-family:var(--font-mono); font-size:0.85rem; color:var(--blue-strong); letter-spacing:0.04em; }
.pdeep h2{ font-size:clamp(1.6rem,2.8vw,2.2rem); margin:0.4rem 0 0.9rem; }
.pdeep p.desc{ color:var(--ink-soft); font-size:1rem; line-height:1.7; max-width:52ch; }
.pdeep .pchips{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.3rem; }
.pdeep .pchip-light{ font-family:var(--font-mono); font-size:0.74rem; padding:0.3rem 0.7rem; border-radius:99px; border:1px solid var(--border-strong); color:var(--ink-soft); background:var(--surface); }
.pdeep .pfit{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--border); font-size:0.88rem; color:var(--muted); }
.pdeep .pfit b{ color:var(--ink); }

/* ============================= PRODUCT TABS ============================= */
.ptabs{ display:flex; flex-wrap:wrap; gap:0.6rem; border-bottom:1px solid var(--border); padding-bottom:1.2rem; margin-bottom:0.4rem; }
.ptab{ display:flex; align-items:baseline; gap:0.5rem; font-family:var(--font-display); font-weight:600; font-size:0.98rem; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:0.6rem 1.1rem; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.ptab .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue-bright); flex:0 0 auto; }
.ptab .dot.action{ background:var(--copper); }
.ptab small{ font-family:var(--font-mono); font-size:0.7rem; font-weight:500; color:var(--muted); }
.ptab:hover{ border-color:var(--border-strong); }
.ptab.active{ color:var(--ink); background:var(--blue-soft); border-color:var(--blue-bright); }
.ptab.active small{ color:var(--blue-strong); }
.ppanel{ animation:pfadein .35s ease; }
@keyframes pfadein{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }

/* ============================= SPEC GRID ============================= */
.pspecs{ display:grid; grid-template-columns:1fr 1fr; gap:0 2.4rem; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border); }
@media (max-width:640px){ .pspecs{ grid-template-columns:1fr; } }
.pspec-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:0.48rem 0; border-bottom:1px dashed var(--border); }
.pspec-row .k{ font-size:0.82rem; color:var(--muted); }
.pspec-row .v{ font-family:var(--font-mono); font-size:0.82rem; font-weight:600; color:var(--ink); text-align:right; }

/* ============================= COMPARISON TABLE ============================= */
.data-table{ margin-top:2.4rem; border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; overflow-x:auto; background:var(--surface); }
.data-table table{ width:100%; border-collapse:collapse; font-size:0.88rem; min-width:640px; }
.data-table th{ text-align:left; font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); padding:0.85rem 1.1rem; background:var(--surface-2); border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td{ padding:0.85rem 1.1rem; color:var(--ink-soft); border-bottom:1px solid var(--border); }
.data-table tr:last-child td{ border-bottom:none; }
.data-table td.strong{ color:var(--ink); font-weight:600; }
.data-table .role-read{ color:var(--blue-strong); font-family:var(--font-mono); font-size:0.78rem; }
.data-table .role-action{ color:var(--copper); font-family:var(--font-mono); font-size:0.78rem; }
.data-table .row-link{ font-family:var(--font-mono); font-size:0.78rem; color:var(--blue-strong); text-decoration:none; white-space:nowrap; }
.data-table .row-link:hover{ text-decoration:underline; }


/* ============================= HERO GLOW — enerjik ağ/sinyal dekorasyonu ============================= */
.hero-glow{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-glow svg{ width:100%; height:100%; display:block; }
.hg-nodes circle{ transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 11px currentColor); animation:hgNodePulse 2.2s ease-in-out infinite; }
@keyframes hgPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
@keyframes hgNodePulse{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.55); } }
.hg-lines path{ stroke-dasharray:10 6; stroke-linecap:round; animation:hgFlow 6.5s linear infinite; }
@keyframes hgFlow{ to{ stroke-dashoffset:-560; } }
.hg-lines[stroke="#1F9DD9"]{ color:#1F9DD9; }
.hg-lines[stroke="#6AC6B7"]{ color:#6AC6B7; }
.hg-lines[stroke-opacity="0.16"]{ stroke-opacity:0.24; }
.hg-lines[stroke-opacity="0.35"]{ stroke-opacity:0.42; }
.hg-lines path{ stroke-width:1.5px; filter:drop-shadow(0 0 1.2px currentColor); }
.hg-photons circle{ filter:drop-shadow(0 0 1.6px currentColor) drop-shadow(0 0 5px currentColor); animation-name:hgPhotonFade; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes hgPhotonFade{ 0%,100%{ opacity:0; } 12%,55%{ opacity:1; } 90%{ opacity:0; } }

/* diyagram düğümlerine / sinyal halkalarına ince neon parıltısı */
.big-diagram svg circle[fill="none"], .lorawan-diagram svg circle[fill="none"]{ animation:hgPulse 2.8s ease-in-out infinite; }
.big-diagram svg rect[fill="none"], .lorawan-diagram svg rect[fill="none"]{ filter:drop-shadow(0 0 5px rgba(31,157,217,0.28)); }

.hero-glow.light .hg-nodes circle{ filter:none; animation:hgNodePulseLight 2.5s ease-in-out infinite; }
@keyframes hgNodePulseLight{ 0%,100%{ opacity:.42; transform:scale(1); } 50%{ opacity:1; transform:scale(1.45); } }

.section{ overflow:hidden; }
.section > .wrap{ position:relative; z-index:1; }

/* ============================= KATALOG INDIR (PDF) — kirmizi buton ============================= */
.catalog-dl{ display:flex; align-items:center; justify-content:center; gap:0.55rem; width:100%; margin-top:0.9rem; padding:0.8rem 1.1rem; font-family:var(--font-body); font-size:0.95rem; font-weight:600; line-height:1.2; color:#fff; background:#D93A3A; border:1px solid #D93A3A; border-radius:var(--radius-s); cursor:pointer; box-shadow:0 10px 24px -10px rgba(217,58,58,0.65); transition:background .15s ease, border-color .15s ease, transform .15s ease; }
.catalog-dl:hover{ background:#E64B4B; border-color:#E64B4B; transform:translateY(-1px); }
.catalog-dl:active{ transform:translateY(0); }
.catalog-dl svg{ flex:none; }
.catalog-dl .dl-label{ font-weight:700; }
.catalog-dl .dl-sub{ font-weight:500; opacity:0.9; }