/* Font yedekleri — web font yüklenene kadar ölçüleri eşleştirip CLS'i önler */
@font-face{font-family:'Manrope Fallback';src:local('Arial');size-adjust:105%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'JBMono Fallback';src:local('Courier New');size-adjust:110%;ascent-override:100%;descent-override:26%;line-gap-override:0%}

/* ERPKolay — ortak stil (v3) */
:root{
  --navy:#0B2545; --blue:#0F4C81; --blue-lt:#1C6FB8;
  --teal:#0E8C7F; --green:#12A87A;  --green-tx:#0B7C5A;  --teal-tx:#0C7C71; --green-lt:#E6F6F1;
  --blue-wash:#EAF1F8; --paper:#fff; --wash:#F6F9FC;
  --rule:#DEE7F0; --ink:#0B2545; --ink-soft:#5A6D85; --ink-mute:#64758A;
  --amber:#D98A0B; --rose:#E11D48; --r:8px;
  /* modül ikon renkleri — her biri farklı */
  --c-hr:#2563EB;      --cb-hr:#E5EDFD;
  --c-pdks:#0891B2;    --cb-pdks:#DFF4F8;
  --c-bordro:#059669;  --cb-bordro:#DEF5EC;
  --c-crm:#7C3AED;     --cb-crm:#EDE7FD;
  --c-teklif:#0E7C86;  --cb-teklif:#DDF2F4;
  --c-proje:#EA580C;   --cb-proje:#FDEBE0;
  --c-denetim:#0D9488; --cb-denetim:#DCF2F0;
  --c-saha:#CA8A04;    --cb-saha:#FBF1D9;
  --c-zimmet:#4F46E5;  --cb-zimmet:#E7E6FC;
  /* sektör çözümleri — her biri farklı renk */
  --s-denetim:#0D9488;   --sb-denetim:#D5F0EC;
  --s-servis:#CA8A04;    --sb-servis:#F7EFCF;
  --s-uretim:#7E22CE;    --sb-uretim:#F0E4FB;
  --s-yazilim:#EA580C;   --sb-yazilim:#FCE6D8;
  --s-insaat:#B45309;    --sb-insaat:#F5E7CE;
  --s-perakende:#2563EB; --sb-perakende:#DEE9FE;
  --s-danisman:#7C3AED;  --sb-danisman:#ECE4FC;
  --s-lojistik:#0891B2;  --sb-lojistik:#D3EFF6;
  --s-medikal:#0F766E;   --sb-medikal:#D2EEE9;
  --s-muhendis:#4338CA;  --sb-muhendis:#E2E2FB;
  --s-otel:#BE185D;      --sb-otel:#FBE0EC;
  --s-egitim:#0369A1;    --sb-egitim:#D6EAF7;
  /* sektör metin tonları — WCAG AA (beyaz zeminde >=4.5) */
  --st-denetim:#0B7A70;   --st-servis:#8A6100;   --st-uretim:#7E22CE;   --st-yazilim:#C2410C;
  --st-insaat:#B45309;    --st-perakende:#2563EB;--st-danisman:#7C3AED; --st-lojistik:#07697F;
  --st-medikal:#0F766E;   --st-muhendis:#4338CA; --st-otel:#BE185D;     --st-egitim:#0369A1;
  --c-perf:#DC2626;    --cb-perf:#FCE6E6;
  --c-uretim:#7E22CE;  --cb-uretim:#F1E5FB;
  --c-egitim:#0369A1;  --cb-egitim:#E0EEF8;
  --c-odeme:#15803D;   --cb-odeme:#E2F4E7;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:Inter,'Inter Fallback',system-ui,sans-serif;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:Manrope,'Manrope Fallback',sans-serif;font-weight:800;line-height:1.14;letter-spacing:-.025em}
a{color:inherit;text-decoration:none}
svg{flex-shrink:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.mono{font-family:'JetBrains Mono','JBMono Fallback',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* LOGO */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{max-width:100%}
@media(max-width:980px){header .logo img{height:44px!important}}
@media(max-width:480px){header .logo img{height:38px!important}}






/* NAV */
/* CLS önleme: kabuk JS ile render edilene kadar yerini ayır */
#shell{display:block;min-height:113px}
@media(max-width:980px){ #shell{min-height:109px} }
#footer{display:block;min-height:420px}
@media(max-width:980px){ #footer{min-height:640px} }
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:30px;height:72px}
.nav nav{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--ink-soft)}
.nav nav a{padding:6px 0;border-bottom:2px solid transparent;transition:.15s}
.nav nav a:hover,.nav nav a.on{color:var(--blue);border-bottom-color:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--r);font-weight:600;font-size:14.5px;transition:.17s;border:1px solid transparent;font-family:Inter,'Inter Fallback';cursor:pointer}
.btn-p{background:var(--blue);color:#fff}.btn-p:hover{background:var(--navy)}
.btn-o{border-color:var(--rule);color:var(--navy);background:#fff}.btn-o:hover{border-color:var(--blue);color:var(--blue)}
.btn-g{background:linear-gradient(135deg,var(--teal),var(--green));color:#fff;box-shadow:0 4px 14px -4px rgba(14,140,127,.5)}
.btn-g:hover{filter:brightness(1.07);transform:translateY(-1px)}

.crumb{padding:16px 0;font-size:13px;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.crumb a:hover{color:var(--blue)}
.crumb b{color:var(--navy);font-weight:500}

/* SECTION */
section{padding:86px 0;border-bottom:1px solid var(--rule)}
.sh{max-width:none;margin-bottom:42px}
.sh h2{max-width:19em}
.sh p{max-width:56em}
.sh.mid{margin-left:auto;margin-right:auto;text-align:center}
.sh .mono{color:var(--teal-tx);display:block;margin-bottom:13px}
.sh h2{font-size:clamp(28px,3.4vw,43px);margin-bottom:13px}
.sh p{color:var(--ink-soft);font-size:17px}

/* APP MOCKUP */
.app{background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 30px 70px -30px rgba(11,37,69,.35),0 2px 6px rgba(11,37,69,.05);overflow:hidden;font-size:12.5px}
.app-top{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--wash);border-bottom:1px solid var(--rule)}
.app-top i{width:9px;height:9px;border-radius:50%;background:#D3DDE8;display:block}
.app-top .url{margin-left:8px;font-family:'JetBrains Mono','JBMono Fallback',monospace;font-size:10.5px;color:var(--ink-mute);background:#fff;border:1px solid var(--rule);border-radius:5px;padding:3px 10px}
.app-body{display:grid;grid-template-columns:170px 1fr;min-height:400px}
.side{border-right:1px solid var(--rule);padding:12px 0;background:#fff}
.side .grp{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);padding:11px 14px 5px;font-weight:600}
.side a{display:flex;align-items:center;gap:9px;padding:6.5px 14px;color:var(--ink-soft);font-size:12.5px;border-left:2px solid transparent}
.side a svg{width:14px;height:14px;opacity:.75}
.side a.on{background:var(--blue-wash);color:var(--blue);font-weight:600;border-left-color:var(--blue)}
.side a.on svg{opacity:1}
.tabs{display:flex;gap:2px;padding:10px 14px 0;border-bottom:1px solid var(--rule);background:#fff;overflow-x:auto}
.tabs b{font-size:12px;font-weight:500;color:var(--ink-soft);padding:7px 12px;border-bottom:2px solid transparent;white-space:nowrap}
.tabs b.on{color:var(--blue);font-weight:600;border-bottom-color:var(--blue)}
.main{background:var(--wash);padding:14px 16px}
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.mhead h4{font-size:15.5px}
.mhead .sub{font-size:11px;color:var(--ink-mute);margin-top:2px}
.mbtn{background:var(--blue);color:#fff;border-radius:6px;padding:6px 12px;font-size:11.5px;font-weight:600;white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.kpi{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:11px 12px}
.kpi .l{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.kpi .v{font-family:Manrope,'Manrope Fallback';font-size:20px;font-weight:800;letter-spacing:-.03em;margin-top:3px;line-height:1;font-variant-numeric:tabular-nums}
.kpi .v.g{color:var(--green)}.kpi .v.b{color:var(--blue)}.kpi .v.a{color:var(--amber)}.kpi .v.p{color:var(--c-teklif)}
.card{background:#fff;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.tr{display:grid;padding:9.5px 13px;border-bottom:1px solid #EFF4F9;align-items:center;grid-template-columns:1.5fr .9fr .7fr .9fr}
.tr:last-child{border-bottom:0}
.tr.h{background:#FBFDFE;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.who{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--navy)}
.who em{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#fff;background:var(--blue)}
.who em.t{background:var(--teal)}.who em.g{background:var(--green)}.who em.n{background:#7A8CA3}.who em.v{background:var(--c-crm)}
.num{text-align:right;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono','JBMono Fallback',monospace;font-size:11.5px}
.bdg{display:inline-flex;align-items:center;gap:5px;padding:2.5px 8px;border-radius:100px;font-size:10.5px;font-weight:600;white-space:nowrap}
.bdg svg{width:11px;height:11px}
.b-ok{background:var(--green-lt);color:#0A7A5A}
.b-w{background:#FDF3E3;color:#9A6205}
.b-n{background:#EEF3F8;color:#5A6D85}
.b-b{background:var(--blue-wash);color:var(--blue)}
.b-r{background:#FCE6EA;color:#B01236}
/* teklif kalem türü rozetleri — MEGACORE ile birebir */
.k-fixed{background:#E0F2FE;color:#0369A1}
.k-pos{background:#FEF3C7;color:#B45309}
.k-prod{background:#D1FAE5;color:#047857}
.k-cfg{background:#E0E7FF;color:#4338CA}
.k-mfg{background:#EDE9FE;color:#6D28D9}
.grow{background:#F8FAFD;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:7px 13px;display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.grow svg{width:13px;height:13px}
.tot{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:12px 14px;margin-top:10px;font-size:12px}
.tot div{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink-soft)}
.tot div span:last-child{font-variant-numeric:tabular-nums;color:var(--navy);font-family:'JetBrains Mono','JBMono Fallback',monospace}
.tot .gt{border-top:1px solid var(--rule);margin-top:7px;padding-top:9px;font-weight:700;color:var(--navy);font-size:14px}
.tot .gt span:last-child{color:var(--green);font-size:15px;font-weight:700}
.tot .neg span:last-child{color:var(--rose)}

/* FOOTER */
footer{background:var(--navy);color:#A8BCD2;padding:56px 0 30px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:34px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.11)}

.fgrid h5,.fgrid .fh{font-family:Inter,'Inter Fallback';font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#fff;margin-bottom:14px;font-weight:600}
.fgrid a{display:block;padding:4px 0}
.fgrid a:hover{color:var(--green)}
.fbot{padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:#7F94AC}
.fbot .powered{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#9AAFC6;font-family:'JetBrains Mono','JBMono Fallback',monospace;letter-spacing:.01em;border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:5px 13px;background:rgba(255,255,255,.03)}
.fbot .powered .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(18,168,122,.22);flex-shrink:0}

.final{text-align:center;padding:92px 0;border-bottom:0;background:linear-gradient(180deg,#fff,var(--blue-wash))}
.final h2{font-size:clamp(30px,4.1vw,48px);max-width:15em;margin:0 auto 17px}
.final p{color:var(--ink-soft);max-width:34em;margin:0 auto 27px;font-size:17px}

@media(max-width:980px){
 .nav nav{display:none}
 .app-body{grid-template-columns:1fr}.side{display:none}
 .kpis{grid-template-columns:repeat(2,1fr)}
 .fgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= DUYURU ÇUBUĞU ================= */
.annbar{background:linear-gradient(90deg,var(--navy),#0F3E6B 45%,var(--teal));color:#fff;font-size:13.5px;position:relative;z-index:90}
.annbar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;height:40px;flex-wrap:nowrap;overflow:hidden}
.annbar .pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:2px 10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.annbar p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.annbar a.lnk{display:inline-flex;align-items:center;gap:6px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px;white-space:nowrap}
.annbar a.lnk:hover{border-bottom-color:#fff}
.annbar a.lnk svg{width:13px;height:13px}
.annbar .x{position:absolute;right:20px;top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(255,255,255,.65);cursor:pointer;padding:5px;line-height:0;border-radius:5px}
.annbar .x:hover{color:#fff;background:rgba(255,255,255,.12)}
.annbar .x svg{width:14px;height:14px}
body.ann-off .annbar{display:none}
.annbar .short{display:none}
@media(max-width:640px){
  .annbar .full{display:none}
  .annbar .short{display:inline}
  .annbar a.lnk span{display:none}
  .annbar a.lnk{border-bottom:0;padding:8px 12px;min-height:32px;background:rgba(255,255,255,.16);border-radius:8px}
  .annbar a.lnk svg{width:15px;height:15px}
}

/* ================= MEGA MENU ================= */
.nav nav{position:static}
.nav{position:relative}
.navitem{position:static}
.navitem > a,.navitem > button{display:inline-flex;align-items:center;gap:5px;padding:6px 0;border-bottom:2px solid transparent;transition:.15s;background:none;border-left:0;border-right:0;border-top:0;font:inherit;color:inherit;cursor:pointer;font-weight:500}
.navitem > a:hover,.navitem > button:hover,.navitem.open > button,.navitem > a.on{color:var(--blue);border-bottom-color:var(--teal)}
.navitem .caret{width:13px;height:13px;transition:.2s}
.navitem.open .caret{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 14px);left:0;transform:translateY(-6px);background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 28px 64px -24px rgba(11,37,69,.34),0 2px 8px rgba(11,37,69,.06);padding:22px;opacity:0;visibility:hidden;transition:.19s;z-index:95}
.navitem.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-mod{width:min(860px,calc(100vw - 48px));display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.mega-sol{width:min(880px,calc(100vw - 48px));display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.mega-sol .mega-foot{grid-column:1/-1}
.mm{display:flex;gap:11px;align-items:flex-start;padding:10px 11px;border-radius:9px;transition:.15s}
.mm:hover{background:var(--wash)}
.mm .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:var(--mb);color:var(--mc)}
.mm .ic svg{width:16px;height:16px}
.mm h5{font-family:Manrope,'Manrope Fallback';font-size:14px;font-weight:700;letter-spacing:-.015em;margin-bottom:2px;color:var(--navy)}
.mm p{font-size:12.3px;color:var(--ink-soft);line-height:1.42}
.mega-foot{grid-column:1/-1;margin-top:12px;padding-top:14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.mega-foot span{font-size:13px;color:var(--ink-soft)}
.mega-foot a.mf{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--blue)}
.mega-foot a.mf:hover{color:var(--teal)}
.mega-foot a.mf svg{width:14px;height:14px}

/* dil seçici */
.lang{display:flex;align-items:center;gap:2px;border:1px solid var(--rule);border-radius:100px;padding:3px;background:#fff}
.lang button{border:0;background:none;font-family:Inter,'Inter Fallback';font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--ink-mute);padding:4px 9px;border-radius:100px;cursor:pointer;transition:.15s}
.lang button[aria-pressed=true]{background:var(--navy);color:#fff}
.lang button:hover:not([aria-pressed=true]){color:var(--navy)}

/* hamburger */
.burger{display:none;width:40px;height:40px;border:1px solid var(--rule);background:#fff;border-radius:9px;cursor:pointer;padding:0;place-items:center;color:var(--navy)}
.burger svg{width:20px;height:20px}

/* ================= MOBİL MENÜ ================= */
.mob{position:fixed;inset:0;z-index:200;visibility:hidden;opacity:0;transition:.22s}
.mob.on{visibility:visible;opacity:1}
.mob-bd{position:absolute;inset:0;background:rgba(11,37,69,.45);backdrop-filter:blur(3px)}
.mob-pn{position:absolute;top:0;right:0;bottom:0;width:min(400px,90vw);background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:.26s cubic-bezier(.4,0,.2,1);box-shadow:-16px 0 50px -20px rgba(11,37,69,.4)}
.mob.on .mob-pn{transform:none}
.mob-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--rule);flex-shrink:0}
.mob-hd button{width:38px;height:38px;border:1px solid var(--rule);background:#fff;border-radius:9px;cursor:pointer;display:grid;place-items:center;color:var(--navy)}
.mob-hd button svg{width:18px;height:18px}
.mob-bd2{flex:1;overflow-y:auto;padding:10px 14px 20px}
.mob-acc{border-bottom:1px solid var(--rule)}
.mob-acc > button{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:15px 6px;font-family:Manrope,'Manrope Fallback';font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--navy);cursor:pointer;text-align:left}
.mob-acc > button svg{width:16px;height:16px;color:var(--ink-mute);transition:.2s}
.mob-acc.open > button svg{transform:rotate(180deg);color:var(--teal)}
.mob-acc .inner{max-height:0;overflow:hidden;transition:.26s}
.mob-acc.open .inner{max-height:1400px}
.mob-acc .inner > div{padding:2px 0 14px}
.mob-lnk{display:block;padding:14px 6px;font-family:Manrope,'Manrope Fallback';font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--navy);border-bottom:1px solid var(--rule)}
.mob-ft{padding:16px 20px;border-top:1px solid var(--rule);display:grid;gap:9px;flex-shrink:0;background:var(--wash)}
.mob-ft .btn{width:100%;justify-content:center}
.mob-lang{display:flex;gap:6px;margin-top:4px}
.mob-lang button{flex:1;border:1px solid var(--rule);background:#fff;border-radius:8px;padding:9px;font-family:Inter,'Inter Fallback';font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.mob-lang button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
body.noscroll{overflow:hidden}

@media(max-width:1080px){
  .nav nav,.nav .btn.hide-md{display:none}
  .burger{display:grid}
  .nav{gap:12px;height:64px}
  .nav .lang{margin-left:auto}
  .nav .btn{padding:9px 15px;font-size:13.5px}
  .annbar .wrap{gap:10px}
  .annbar .x{right:14px}
}
@media(max-width:560px){
  .nav .btn{display:none}
}
@media(max-width:400px){
  .nav{gap:8px}
  .lang button{padding:5px 8px}
  .lang button span{display:none}
  .lang .flag{width:20px;height:14px}
}
@media(max-width:640px){
  .annbar{font-size:12.5px}
  .annbar .wrap{height:44px;gap:9px;padding-right:36px}
  .annbar p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .annbar .pill{flex-shrink:0}
  .annbar a.lnk{flex-shrink:0}
}

/* ================= BAYRAKLI DİL SEÇİCİ ================= */
.lang button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px}
.lang .flag{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(11,37,69,.12);flex-shrink:0}
.lang button[aria-pressed=true] .flag{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.mob-lang button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.mob-lang .flag{width:20px;height:13px;border-radius:2px;box-shadow:0 0 0 1px rgba(11,37,69,.14)}
.navitem > button.act{color:var(--blue);border-bottom-color:var(--teal)}
.mm-all{justify-content:center;font-family:Manrope,'Manrope Fallback';font-weight:700;font-size:14px;color:var(--blue);padding:13px 11px}
.mm-all:hover{background:var(--blue-wash)}

/* ================= BÖLÜM ARKA PLANLARI (geçişler) ================= */
/* koyu lacivert bölüm — fiyat/CTA/vurgu */
.sec-dark{background:var(--navy);border:0;position:relative;overflow:hidden;color:#fff}
.sec-dark:before{content:"";position:absolute;top:-30%;right:-10%;width:62%;height:165%;background:radial-gradient(circle,rgba(18,168,122,.17),transparent 62%);pointer-events:none}
.sec-dark:after{content:"";position:absolute;bottom:-40%;left:-10%;width:52%;height:150%;background:radial-gradient(circle,rgba(28,111,184,.20),transparent 62%);pointer-events:none}
.sec-dark .wrap{position:relative;z-index:1}
.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.sec-dark .sh p{color:#A8BCD2}
.sec-dark .mono{color:var(--green)}
/* açık mavi-yeşil bölüm */
.sec-wash{background:linear-gradient(168deg,#EAF1F8 0%,#EDF6F5 48%,#F6F9FC 100%);position:relative;overflow:hidden}
.sec-wash:before{content:"";position:absolute;top:-25%;left:-8%;width:52%;height:150%;background:radial-gradient(circle,rgba(14,124,134,.10),transparent 62%);pointer-events:none}
.sec-wash .wrap{position:relative;z-index:1}
/* ızgara dokulu bölüm */
.sec-grid{position:relative;overflow:hidden}
.sec-grid:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(15,76,129,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(15,76,129,.07) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 72%);pointer-events:none}
.sec-grid .wrap{position:relative;z-index:1}

/* koyu bölüm içi kart */
.dcard{border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:26px 24px;background:rgba(255,255,255,.045)}
.dcard.hi{border-color:var(--green);background:rgba(18,168,122,.10)}
.dcard p{color:#A8BCD2}
.dcard ul{list-style:none;font-size:14.3px;color:#D2DEEA}
.dcard li{padding:6px 0 6px 24px;position:relative}
.dcard li svg{position:absolute;left:0;top:11px;width:14px;height:14px;color:var(--green)}

/* ================= ORTAK BLOKLAR ================= */
/* breadcrumb */
.crumb .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crumb svg{width:13px;height:13px;color:var(--ink-mute)}

/* sayfa hero */
.phero{background:linear-gradient(170deg,var(--blue-wash) 0%,#F1F8F9 58%,#fff 100%);border-bottom:1px solid var(--rule);padding:56px 0 0;position:relative;overflow:hidden}
.phero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(15,76,129,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(15,76,129,.07) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(120% 85% at 74% -5%,#000,transparent 70%);pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.ph{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;padding-bottom:58px}
.ph.solo{grid-template-columns:1fr;max-width:900px;padding-bottom:56px}
.tag{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--rule);border-radius:100px;padding:6px 15px;color:var(--teal);box-shadow:0 1px 3px rgba(11,37,69,.05)}
.tag svg{width:14px;height:14px}
.phero h1{font-size:clamp(33px,4.3vw,52px);margin:20px 0 18px;max-width:16em}
.phero h1 em{font-style:normal;background:linear-gradient(120deg,var(--blue),var(--teal) 55%,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.phero .lead{font-size:17.5px;color:var(--ink-soft);max-width:44em}
.hcta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* özellik ızgarası */
.fgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.fcard{border:1px solid var(--rule);border-radius:11px;padding:24px 22px;background:#fff;transition:.18s}
.fcard:hover{border-color:#C6D8E8;box-shadow:0 12px 30px -18px rgba(11,37,69,.26)}
.fcard .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;background:var(--fb);color:var(--fc)}
.fcard .ic svg{width:20px;height:20px}
.fcard h3{font-size:17.5px;margin-bottom:8px}
.fcard p{font-size:14.2px;color:var(--ink-soft);line-height:1.55}

/* kazanım listesi */
.wins{list-style:none;font-size:15px}
.wins li{padding:8px 0 8px 27px;position:relative;color:var(--ink-soft)}
.wins li svg{position:absolute;left:0;top:13px;width:15px;height:15px;color:var(--green)}

/* öncesi/sonrası */
.ba{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#fff}
.ba > div{padding:30px 28px}
.ba .l{background:var(--wash);border-right:1px solid var(--rule)}
.ba .r{background:linear-gradient(160deg,#fff,var(--green-lt))}
.ba h4{font-size:15px;margin-bottom:18px;font-family:Inter,'Inter Fallback';font-weight:600;letter-spacing:0;display:flex;align-items:center;gap:9px}
.ba h4 svg{width:17px;height:17px}
.ba .l h4{color:var(--ink-soft)} .ba .r h4{color:#0A7A5A}
.ba ul{list-style:none;font-size:14.8px}
.ba li{padding:9px 0 9px 26px;position:relative;color:var(--ink-soft)}
.ba li svg{position:absolute;left:0;top:13px;width:15px;height:15px}
.ba .l li svg{color:#B6C7D6} .ba .r li svg{color:var(--green)}

/* ilgili modüller */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel a{border:1px solid var(--rule);border-radius:11px;padding:20px 22px;transition:.18s;display:flex;gap:13px;align-items:flex-start;background:#fff}
.rel a:hover{border-color:#C6D8E8;box-shadow:0 10px 26px -18px rgba(11,37,69,.26);transform:translateY(-2px)}
.rel .ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--mb);color:var(--mc)}
.rel .ic svg{width:18px;height:18px}
.rel h3,.rel h4{font-size:16px;margin-bottom:4px}
.rel p{font-size:13.3px;color:var(--ink-soft);line-height:1.5}

/* SSS */
.faq details{border-bottom:1px solid var(--rule);padding:20px 0}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{font-family:Manrope,'Manrope Fallback';font-weight:700;font-size:18.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--teal);font-weight:500;font-size:25px;line-height:1}
.faq details[open] summary:after{content:"−"}
.faq p{color:var(--ink-soft);font-size:15.5px;margin-top:12px;max-width:56em}

/* SEO metin bloğu */
.copy{max-width:52em}
.copy h2{font-size:30px;margin-bottom:16px;max-width:19em}
.copy h3{font-size:20px;margin:30px 0 10px}
.copy p{color:var(--ink-soft);margin-bottom:14px}
.copy ul{color:var(--ink-soft);margin:0 0 14px 20px}
.copy li{padding:4px 0}
.copy a{color:var(--blue);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#B9D2E6}
.copy a:hover{color:var(--teal)}

/* adımlar */
.steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.step{padding:0 22px 0 0;position:relative}
.step .n{width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--rule);display:grid;place-items:center;font-family:Manrope,'Manrope Fallback';font-weight:800;font-size:15px;color:var(--blue);margin-bottom:16px;position:relative;z-index:2}
.step:before{content:"";position:absolute;top:19px;left:38px;right:0;height:2px;background:var(--rule)}
.step:last-child:before{display:none}
.step h3,.step h4{font-size:17px;margin-bottom:7px}
.step p{font-size:14px;color:var(--ink-soft)}
.step .t{font-size:11.5px;font-family:'JetBrains Mono','JBMono Fallback',monospace;color:#4EE0AC;margin-top:9px;display:block}
.sec-dark .step .n{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:var(--green)}
.sec-dark .step:before{background:rgba(255,255,255,.15)}
.sec-dark .step p{color:#A8BCD2}

/* footer iletişim */
.fcontact{margin-top:14px;display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.fcontact a:hover{color:var(--green)}

/* CTA bölümü */
.final{text-align:center;padding:92px 0;border-bottom:0;background:linear-gradient(180deg,#fff,var(--blue-wash))}
.final h2{font-size:clamp(30px,4.1vw,48px);max-width:15em;margin:0 auto 17px}
.final p{color:var(--ink-soft);max-width:36em;margin:0 auto 27px;font-size:17px}
.sec-dark.final{background:var(--navy)}
.sec-dark.final p{color:#A8BCD2}

@media(max-width:980px){
 .ph,.fgrid3,.fgrid2,.ba,.rel,.steps{grid-template-columns:1fr}
 .steps{gap:16px}
 .step{padding-right:0}.step:before{display:none}
 .ba .l{border-right:0;border-bottom:1px solid var(--rule)}
 .sh h2,.copy h2{max-width:none}
}

/* ================= EKRAN MOCKUP EK BİLEŞENLER ================= */
.tr b{font-weight:600}
.sm{font-size:10.5px;color:var(--ink-mute);display:block;margin-top:2px}
.mono2{font-family:'JetBrains Mono','JBMono Fallback',monospace;font-size:10px}
.tr .bdg{margin-top:3px}
.note{margin-top:10px;background:var(--blue-wash);border:1px solid #CFE0EE;border-radius:7px;padding:9px 12px;font-size:11.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.note svg{width:13px;height:13px;color:var(--blue);flex-shrink:0;margin-top:2px}
.note i{font-style:italic}
.subh{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;margin:12px 0 7px}
.fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.fld2{background:#fff;border:1px solid var(--rule);border-radius:7px;padding:9px 11px}
.fld2 span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;display:block}
.fld2 b{font-size:12px;font-weight:600;color:var(--navy);display:block;margin-top:2px}
.pay{font-size:11px;color:var(--ink-soft)}
.pay.ok{color:var(--green);font-weight:600}
/* puantaj renkleri */
.c-ok{color:var(--ink-soft)} .c-ot{color:var(--c-uretim);font-weight:700}
.c-lt{color:var(--amber);font-weight:700} .c-lv{color:var(--blue);font-weight:700}
.c-ab{color:var(--rose);font-weight:700}
.c-good{color:var(--green);font-weight:700} .c-bad{color:var(--rose);font-weight:700}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:10px;color:var(--ink-mute)}
.legend .lg{white-space:nowrap}
/* denetim risk ekranı */
.rbanner{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--rule);border-radius:7px;padding:9px 12px;margin-bottom:10px}
.qcard{padding:0}
.q{padding:14px}
.qh{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.4}
.qn{width:19px;height:19px;border-radius:5px;background:var(--blue-wash);color:var(--blue);display:grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0}
.req{margin-left:auto;font-size:9.5px;color:var(--rose);font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0}
.opts{margin-top:11px;display:grid;gap:5px}
.opt{display:flex;align-items:center;gap:9px;border:1px solid var(--rule);border-radius:7px;padding:8px 11px;font-size:12px;color:var(--ink-soft)}
.opt.sel{border-color:var(--rose);background:#FEF2F4;color:var(--navy);font-weight:600}
.rad{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--ink-mute);flex-shrink:0;display:block}
.rad.on{border-color:var(--rose);border-width:4px}
.opt .w{margin-left:auto;font-family:'JetBrains Mono','JBMono Fallback',monospace;font-size:10.5px;color:var(--ink-mute)}
.opt .w.flag{color:var(--rose);font-weight:700;font-family:Inter,'Inter Fallback';font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.qf{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-soft);background:var(--wash);border-radius:6px;padding:7px 10px}
.qf svg{width:13px;height:13px;color:var(--c-teklif)}
.qf .ev{margin-left:auto;font-size:10px;color:var(--green);font-weight:600}
.riskbar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--rule);border-radius:8px;padding:11px 13px;margin-top:10px;flex-wrap:wrap}
.rb-l{display:flex;align-items:baseline;gap:8px}
.rb-l b{font-family:Manrope,'Manrope Fallback';font-size:20px;font-weight:800;color:var(--navy)}
.rb-r{display:flex;align-items:center;gap:8px}
.override{margin-top:9px;background:#FEF2F4;border:1px solid #F8CDD5;border-radius:7px;padding:10px 12px;font-size:11.5px;color:#9F1239;display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.override svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}
/* 9 kutu */
.ninebox{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:14px;display:grid;grid-template-columns:16px 1fr;grid-template-rows:1fr 18px 16px;gap:7px;align-items:center}
.nb-y{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;text-align:center}
.nb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.nb{border-radius:7px;padding:11px 9px;text-align:center;border:1px solid transparent}
.nb b{font-family:Manrope,'Manrope Fallback';font-size:19px;font-weight:800;display:block;line-height:1}
.nb span{font-size:9.5px;display:block;margin-top:3px;line-height:1.25}
.nb.c1{background:#FDECEC;color:#B42318;border-color:#F8D3D3}
.nb.c2{background:#FEF6E7;color:#B25E09;border-color:#FAE5C0}
.nb.c3{background:#EEF3F8;color:#41556E;border-color:#DCE6F0}
.nb.c4{background:#E4F3EE;color:#0A7A5A;border-color:#C7E7DC}
.nb.c5{background:#DDF0EC;color:#065F46;border-color:#A9DCCE}
.nb-x{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;text-align:center;font-size:10px;color:var(--ink-soft);font-weight:500}
.nb-xl{grid-column:2;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;text-align:center}
@media(max-width:560px){
 .fieldgrid{grid-template-columns:1fr}
 .nb span{display:none}
 .legend{font-size:9px;gap:8px}
}

/* ================= FORM ================= */
.formcard{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:30px 28px;box-shadow:0 18px 44px -26px rgba(11,37,69,.28)}
.frow{margin-bottom:14px}
.frow label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
.frow input,.frow select,.frow textarea{width:100%;border:1px solid var(--rule);border-radius:8px;padding:11px 13px;font-family:Inter,'Inter Fallback';font-size:14.5px;color:var(--navy);background:#fff;transition:.15s}
.frow input:focus,.frow select:focus,.frow textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,140,127,.13)}
.frow input::placeholder,.frow textarea::placeholder{color:#A9BACB}
.frow textarea{resize:vertical;min-height:80px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;border:1px solid var(--rule);border-radius:100px;padding:6px 13px;font-size:12.8px;color:var(--ink-soft);transition:.15s;background:#fff}
.chip:hover span{border-color:#BBD0E2;color:var(--navy)}
.chip input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(14,140,127,.22)}
.fnote{font-size:12px;color:var(--ink-mute);margin-top:12px;line-height:1.5}
.kvkk{display:flex;align-items:flex-start;gap:9px;margin:4px 0 14px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;cursor:pointer}
.kvkk input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--teal);cursor:pointer}
.fmsg{margin-top:12px;border-radius:8px;padding:11px 13px;font-size:13.5px;font-weight:500}
.fmsg.ok{background:var(--green-lt);border:1px solid #B7E3D2;color:#0A7A5A}
.fmsg.err{background:#FEF2F4;border:1px solid #F8CDD5;color:#9F1239}
@media(max-width:640px){ .f2{grid-template-columns:1fr} .formcard{padding:24px 20px} }

/* koyu bölümde "neden" kartları */
.sec-dark .why > div{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.15)}
.sec-dark .why p{color:#A8BCD2}
.sec-dark .pc{border-color:rgba(255,255,255,.15)}

/* ================= MODÜL GALERİSİ (kaydırmalı) ================= */
.gal{position:relative}
.gal-frame{background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 30px 70px -30px rgba(11,37,69,.35),0 2px 6px rgba(11,37,69,.05);overflow:hidden}
.gal-top{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--wash);border-bottom:1px solid var(--rule)}
.gal-top i{width:10px;height:10px;border-radius:50%;background:#D3DDE8;display:block}
.gal-top i:nth-child(2){background:#E4D28C}.gal-top i:nth-child(3){background:#B7DDBE}
.gal-top .url{margin-left:8px;font-family:'JetBrains Mono','JBMono Fallback',monospace;font-size:11px;color:var(--ink-mute);background:#fff;border:1px solid var(--rule);border-radius:6px;padding:4px 12px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-track{position:relative}
.gal-slide{display:none;animation:galfade .4s ease}
.gal-slide.on{display:block}
.gal-slide img{width:100%;display:block;background:#F3F7FB}
.gal-slide .mock{padding:16px}
@keyframes galfade{from{opacity:0}to{opacity:1}}
.gal-cap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;border-top:1px solid var(--rule);background:#fff}
.gal-cap .t{font-size:13px;font-weight:600;color:var(--navy)}
.gal-cap .real{font-size:10.5px;font-family:'JetBrains Mono','JBMono Fallback',monospace;color:var(--teal);letter-spacing:.03em;display:inline-flex;align-items:center;gap:5px;flex-shrink:0}
.gal-cap .real:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
/* oklar */
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--rule);box-shadow:0 6px 18px -6px rgba(11,37,69,.3);display:grid;place-items:center;cursor:pointer;z-index:3;transition:.15s}
.gal-nav:hover{background:#fff;box-shadow:0 8px 22px -6px rgba(11,37,69,.4);transform:translateY(-50%) scale(1.06)}
.gal-nav svg{width:18px;height:18px;color:var(--navy)}
.gal-nav.prev{left:-14px}.gal-nav.next{right:-14px}
/* noktalar */
.gal-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.gal-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#CBD9E7;cursor:pointer;padding:0;transition:.18s}
.gal-dots button.on{background:var(--teal);width:24px;border-radius:100px}
/* şerit sayaç */
.gal-count{position:absolute;top:14px;right:14px;background:rgba(11,37,69,.72);color:#fff;font-size:11px;font-family:'JetBrains Mono','JBMono Fallback',monospace;padding:3px 9px;border-radius:100px;z-index:3;backdrop-filter:blur(4px)}
@media(max-width:980px){
 .gal-nav.prev{left:6px}.gal-nav.next{right:6px}
 .gal-nav{width:34px;height:34px}
}

/* ================= MODÜLLER HUB IZGARASI ================= */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mods .mod{position:relative;border:1px solid var(--rule);border-radius:14px;padding:24px 22px 22px;background:#fff;transition:.2s;display:block;overflow:hidden}
.mods .mod:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mc);opacity:0;transition:.2s}
.mods .mod:hover{border-color:#C6D8E8;box-shadow:0 18px 40px -22px rgba(11,37,69,.3);transform:translateY(-3px)}
.mods .mod:hover:before{opacity:1}
.mods .mod .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--mb);color:var(--mc);margin-bottom:15px}
.mods .mod .ic svg{width:22px;height:22px}
.mods .mod h3{font-size:18px;margin-bottom:7px;letter-spacing:-.02em}
.mods .mod p{font-size:13.6px;color:var(--ink-soft);line-height:1.5;margin-bottom:14px}
.mods .mod .kw{font-size:11px;font-family:'JetBrains Mono','JBMono Fallback',monospace;color:var(--ink-mute);letter-spacing:.02em}
.mods .mod .go{position:absolute;top:22px;right:20px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--wash);color:var(--mc);opacity:0;transform:translateX(-4px);transition:.2s}
.mods .mod .go svg{width:15px;height:15px}
.mods .mod:hover .go{opacity:1;transform:translateX(0)}

/* ================= ÇÖZÜMLER HUB IZGARASI ================= */
.sect{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sect a{position:relative;border:1px solid var(--rule);border-radius:16px;padding:0;background:#fff;transition:.2s;display:block;overflow:hidden}
.sect a:hover{border-color:#C6D8E8;box-shadow:0 20px 44px -22px rgba(11,37,69,.32);transform:translateY(-3px)}
.sect a .top{padding:26px 24px 20px;background:linear-gradient(160deg,var(--sb),#fff);border-bottom:1px solid var(--rule)}
.sect a .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;background:#fff;color:var(--sc);box-shadow:0 6px 16px -8px rgba(11,37,69,.25);border:1px solid var(--rule)}
.sect a .ic svg{width:25px;height:25px}
.sect a .bd{padding:20px 24px 24px}
.sect a h3,.sect a h4{font-size:19px;margin-bottom:8px;letter-spacing:-.02em}
.sect a p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:16px;min-height:44px}
.sect a .ms{font-size:11.5px;font-family:'JetBrains Mono','JBMono Fallback',monospace;color:var(--stc,var(--sc));letter-spacing:.02em;display:block;padding-top:14px;border-top:1px solid var(--rule)}
.sect a .arw{position:absolute;top:26px;right:24px;color:var(--sc);opacity:0;transform:translateX(-4px);transition:.2s}
.sect a .arw svg{width:20px;height:20px}
.sect a:hover .arw{opacity:1;transform:translateX(0)}

@media(max-width:980px){ .mods,.sect{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .mods,.sect{grid-template-columns:1fr} }