/* =====================================================================
   ONGSEC — Tasarım Sistemi v3  ·  "PAFTA"
   Mühendislik çizim sayfası: düz mürekkep yüzeyler, çizilmiş cetveller,
   köşe işaretleri, iki sesli renk (mavi sistem · kırmızı imza),
   mekanik hareket. Yumuşak gradyan kutu ve parıltı yok.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Token'lar
   --------------------------------------------------------------------- */
:root{
  /* Yüzeyler — düz, gradyansız. Mavi tonlu koyu mürekkep. */
  --s-000:#05080E;   /* en dip: üst bar, footer */
  --s-050:#070B12;   /* sayfa zemini */
  --s-100:#0A0F18;   /* bölüm zemini (alternatif) */
  --s-200:#0E141F;   /* hücre */
  --s-300:#131B28;   /* hücre — vurgulu / hover */
  --s-400:#1A2432;   /* girinti, alan */

  /* Cetvel çizgileri — grid'in görünmesi bu değere bağlı */
  --rule:#1E2A3B;
  --rule-2:#2A3A50;
  --rule-3:#3A4E68;

  /* Sistem rengi — mavi */
  --b-900:#013A5E;
  --b-800:#014C7D;
  --b-700:#0166A6;
  --b-600:#0282CD;
  --b-500:#219EE2;
  --b-400:#4FB8F2;
  --b-300:#8ED3F8;
  --b-wash:rgba(2,130,205,.12);

  /* İmza rengi — logodan gelen kırmızı. Az ve kararlı kullanılır. */
  --sig:#E8503F;
  --sig-d:#BE3B2B;   /* beyaz metin arkası: AA */
  --sig-2:#FF7A6B;
  --sig-wash:rgba(232,80,63,.12);

  /* Durum */
  --ok:#35C07C;
  --warn:#E6A93C;
  --crit:#EF5B52;

  /* Metin — koyu zeminde */
  --t-000:#FFFFFF;
  --t-100:#E9EFF6;
  --t-200:#C6D3E2;
  --t-300:#9EB0C6;
  --t-400:#9AACC0;
  --t-500:#8497AE;

  /* İkinci malzeme — sıcak grafit. Mavi mürekkebin yanında belirgin
     ama koyu ailenin içinde kalır; beyaz blok sırıtması yoktur. */
  --pap-0:#191C1E;
  --pap-1:#212528;
  --pap-2:#141719;
  --pap-line:#2E3437;
  --pap-line-2:#404749;
  --pap-blue:rgba(180,200,215,.055);
  --i-900:#F2F4F5;
  --i-700:#D4D9DC;
  --i-600:#A4ADB2;
  --i-400:#7C868B;

  /* Tipografi */
  --f-display:"Archivo","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Ölçek — köşeler keskin; yuvarlaklık yalnızca hap ve düğmede */
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px; --r-pill:999px;
  --pad-sec:clamp(70px,7.4vw,120px);
  --wrap:1360px;
  --ease:cubic-bezier(.3,.7,.4,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-mech:cubic-bezier(.62,.02,.16,1);   /* mekanik: hızlı başla, sert otur */

  --sh-1:0 1px 0 rgba(255,255,255,.02), 0 18px 44px -30px #000;
  --sh-2:0 34px 80px -44px rgba(0,0,0,.9);
  --sh-pap:0 1px 0 rgba(17,24,32,.06), 0 22px 44px -30px rgba(17,24,32,.28);
}

/* ---------------------------------------------------------------------
   2. Temel
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--s-050);color:var(--t-100);
  font-family:var(--f-ui);font-size:16px;line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:600;margin:0;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--sig);color:#fff}
:focus-visible{outline:2px solid var(--b-400);outline-offset:3px}

.wrap{width:min(100% - 56px,var(--wrap));margin-inline:auto}
.wrap--tight{width:min(100% - 56px,1060px);margin-inline:auto}
@media(max-width:640px){.wrap,.wrap--tight{width:min(100% - 32px,var(--wrap))}}

.sec{padding-block:var(--pad-sec);position:relative}
.sec--pad-sm{padding-block:clamp(58px,6.4vw,96px)}
.sec--ink{background:var(--s-050)}
.sec--ink-2{background:var(--s-100)}
.sec--deep{background:var(--s-000)}
.sec--ink+.sec--ink,.sec--deep+.sec--deep,.sec--ink-2+.sec--ink-2{border-top:1px solid var(--rule)}

/* Bölüm kenarındaki dikey cetveller — sayfanın "pafta" hissi */
.sec--ruled::before,.sec--ruled::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--rule);pointer-events:none;
}
.sec--ruled::before{left:max(28px,calc(50% - var(--wrap)/2 - 1px))}
.sec--ruled::after{right:max(28px,calc(50% - var(--wrap)/2 - 1px))}
@media(max-width:900px){.sec--ruled::before,.sec--ruled::after{display:none}}

/* Kâğıt bölüm — teknik çizim kâğıdı: mavi kareli zemin + kırmızı marj çizgisi */
.sec--paper{background:var(--pap-0);color:var(--i-700);isolation:isolate;position:relative}
.sec--paper::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--pap-blue) 1px,transparent 1px),
                   linear-gradient(90deg,var(--pap-blue) 1px,transparent 1px);
  background-size:34px 34px;
}
.sec--paper h1,.sec--paper h2,.sec--paper h3,.sec--paper h4{color:var(--i-900)}
.sec--paper .mono{color:var(--i-400)}

/* Malzeme değişim şeridi — dalga değil, ölçü cetveli */
.band{
  position:relative;height:34px;overflow:hidden;pointer-events:none;
  border-block:1px solid var(--rule);
}
.band svg{display:none}
.band::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,var(--rule-2) 0 1px,transparent 1px 16px);
}
.band::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:96px;background:var(--sig);opacity:.9;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 16px);
  mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 16px);
}
.band--to-paper{background:var(--s-050)}
.band--to-ink{background:var(--pap-0);border-color:var(--pap-line)}
.band--to-ink::before{background-image:repeating-linear-gradient(90deg,var(--pap-line-2) 0 1px,transparent 1px 16px)}

/* ---------------------------------------------------------------------
   3. Tipografi
   --------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--t-400);
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:0;height:1px;background:var(--sig);flex:none;
  transition:width .8s var(--ease-out) .12s;
}
.eyebrow.in::before,.in .eyebrow::before,[data-anim].in .eyebrow::before{width:34px}
.eyebrow--c{justify-content:center}
.sec--paper .eyebrow{color:var(--i-400)}

/* Görülür ölçek sıçraması: 11px etiket → 120px başlık */
.h-xl{font-size:clamp(34px,4.4vw,66px);letter-spacing:-.036em;line-height:1.0;font-weight:700}
.h-lg{font-size:clamp(28px,3.2vw,46px);letter-spacing:-.032em;line-height:1.07;font-weight:700}
.h-md{font-size:clamp(22px,2.05vw,31px);letter-spacing:-.026em;line-height:1.18}
.h-sm{font-size:20px;letter-spacing:-.02em;line-height:1.28}

.lead{font-size:clamp(16.5px,1.22vw,18.5px);line-height:1.72;color:var(--t-300);max-width:62ch}
.sec--paper .lead{color:var(--i-600)}
.muted{color:var(--t-500)}
.sec--paper .muted{color:var(--i-400)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.hi{color:var(--b-400)}
.sec--paper .hi{color:var(--b-700)}

/* Satır maskeli başlık açılışı (JS sarar) */
.ln{display:block;overflow:hidden}
.ln>i{display:block;font-style:inherit;transform:translateY(104%);
  transition:transform .92s var(--ease-out)}
.split-ready.in .ln>i,.in .split-ready .ln>i{transform:none}
.split-ready .ln:nth-child(1)>i{transition-delay:.02s}
.split-ready .ln:nth-child(2)>i{transition-delay:.09s}
.split-ready .ln:nth-child(3)>i{transition-delay:.16s}
.split-ready .ln:nth-child(4)>i{transition-delay:.23s}
.split-ready .ln:nth-child(n+5)>i{transition-delay:.3s}

/* Bölüm başlığı — üstünde çizilen cetvel, solda bölüm numarası */
.sec-head{
  max-width:60ch;margin-bottom:clamp(44px,5vw,76px);
  border-top:1px solid var(--rule);padding-top:clamp(24px,2.4vw,34px);position:relative;
}
.sec-head::before{
  content:"";position:absolute;top:-1px;left:0;width:132px;height:1px;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .05s;
}
.sec-head.in::before,[data-anim].in.sec-head::before,.in>.sec-head::before{transform:scaleX(1)}
.sec-head--wide{max-width:78ch}
.sec-head--c{max-width:68ch;margin-inline:auto;text-align:center}
.sec-head--c::before{left:50%;transform:translateX(-50%) scaleX(0)}
.sec-head--c.in::before,[data-anim].in.sec-head--c::before{transform:translateX(-50%) scaleX(1)}
.sec-head--c .lead{margin-inline:auto}
.sec-head--split{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:34px;flex-wrap:wrap}
.sec-head--split>div{max-width:60ch}
.sec-head .lead{margin-top:22px}
.sec--paper .sec-head{border-top-color:var(--pap-line-2)}

/* İmza motifi — ölçü şeridi */
.ribbon{display:flex;gap:4px;height:4px;margin-bottom:24px;width:132px}
.ribbon i{flex:1;background:var(--rule-3);transform:scaleX(0);transform-origin:left}
.in .ribbon i,[data-anim].in .ribbon i{animation:ribbonIn .42s var(--ease-mech) forwards}
.ribbon i:nth-child(1){animation-delay:.04s}
.ribbon i:nth-child(2){animation-delay:.09s}
.ribbon i:nth-child(3){animation-delay:.14s}
.ribbon i:nth-child(4){animation-delay:.19s;background:var(--sig)}
.ribbon i:nth-child(5){animation-delay:.24s}
.ribbon i:nth-child(6){animation-delay:.29s;opacity:.5}
.ribbon i:nth-child(7){animation-delay:.34s;opacity:.28}
@keyframes ribbonIn{to{transform:scaleX(1)}}
.sec--paper .ribbon i{background:var(--pap-line-2)}
.sec--paper .ribbon i:nth-child(4){background:var(--sig)}

/* ---------------------------------------------------------------------
   4. Butonlar ve bağlantılar
   --------------------------------------------------------------------- */
.btn{
  --bg-b:var(--b-700);--fg-b:#fff;--bd:var(--b-700);
  display:inline-flex;align-items:center;gap:11px;position:relative;overflow:hidden;
  padding:16px 26px;border-radius:var(--r-sm);
  background:var(--bg-b);color:var(--fg-b);border:1px solid var(--bd);
  font-size:14px;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#013F68;
  transition:width .34s var(--ease-mech);z-index:0;
}
.btn:hover::before{width:100%}
.btn>*,.btn svg{position:relative;z-index:1}
.btn svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease-mech)}
.btn:hover svg{transform:translateX(5px)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--bg-b:transparent;--fg-b:var(--t-100);--bd:var(--rule-2)}
.btn--ghost::before{background:var(--s-300)}
.btn--ghost:hover{--bd:var(--rule-3);--fg-b:var(--t-000)}
.sec--paper .btn--ghost{--fg-b:var(--i-900);--bd:var(--pap-line-2)}
.sec--paper .btn--ghost::before{background:rgba(17,24,32,.06)}
.btn--sig{--bg-b:var(--sig-d);--bd:var(--sig-d)}
.btn--sig::before{background:#9E2F22}
.btn--sm{padding:11px 18px;font-size:13px}
.btn--lg{padding:19px 34px;font-size:15px}

.tlink{
  display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:12px;
  font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-300);position:relative;padding-bottom:6px;transition:color .22s;
}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule-3);
  transform-origin:left;transition:background .3s var(--ease)}
.tlink:hover{color:var(--t-000)}
.tlink:hover::after{background:var(--sig)}
.tlink svg{width:14px;height:14px;transition:transform .3s var(--ease-mech)}
.tlink:hover svg{transform:translateX(5px)}
.sec--paper .tlink{color:var(--i-600)}
.sec--paper .tlink:hover{color:var(--i-900)}

/* ---------------------------------------------------------------------
   5. Üst bar + navigasyon
   --------------------------------------------------------------------- */
.topbar{background:var(--s-000);border-bottom:1px solid var(--rule);font-size:12px;color:var(--t-400)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:40px}
.topbar__meta{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.topbar__meta a{display:inline-flex;align-items:center;gap:9px;transition:color .18s;
  padding-inline:18px;border-left:1px solid var(--rule);min-height:40px}
.topbar__meta a:first-child{padding-left:0;border-left:0}
.topbar__meta a:hover{color:var(--t-100)}
.topbar__meta svg{width:13px;height:13px;color:var(--b-500);flex:none}
.topbar__right{display:flex;align-items:center;gap:20px}
.langs{display:flex;align-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}
.langs a{padding:5px 9px;border:1px solid transparent;transition:.18s}
.langs a[aria-current="true"]{background:var(--sig-d);color:#fff}
.langs a:not([aria-current="true"]):hover{color:var(--t-100);border-color:var(--rule-2)}
.socials{display:flex;gap:14px}
.socials a{color:var(--t-500);transition:color .18s}
.socials a:hover{color:var(--sig)}
.socials svg{width:14px;height:14px}
@media(max-width:1000px){.topbar__meta a:nth-child(n+3){display:none}}
@media(max-width:700px){.topbar{display:none}}

.nav{
  position:sticky;top:0;z-index:90;background:rgba(7,11,18,.86);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--rule);transition:background .3s,border-color .3s;
}
.nav.is-stuck{background:rgba(5,8,14,.98);border-bottom-color:var(--rule-2)}
.nav__in{display:flex;align-items:center;gap:28px;min-height:78px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:38px;width:auto}
.nav__menu{display:flex;align-items:center;gap:0;margin-left:auto}
.nav__menu>li{position:relative}
.nav__menu>li>a{
  display:flex;align-items:center;gap:7px;padding:12px 16px;
  font-size:14px;font-weight:500;color:var(--t-300);transition:color .2s;position:relative;
}
.nav__menu>li>a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-mech);
}
.nav__menu>li>a:hover,.nav__menu>li.is-open>a,.nav__menu>li>a[aria-current="page"]{color:var(--t-000)}
.nav__menu>li>a:hover::after,.nav__menu>li.is-open>a::after,.nav__menu>li>a[aria-current="page"]::after{transform:scaleX(1)}
.nav__menu>li>a svg{width:10px;height:10px;opacity:.55;transition:transform .25s var(--ease)}
.nav__menu>li.is-open>a svg{transform:rotate(180deg)}
.nav__cta{margin-left:18px;flex:none}

/* Mega menü — ruled cell field */
.mega{
  position:absolute;top:calc(100% + 1px);left:50%;transform:translate(-50%,8px);
  width:min(92vw,980px);background:var(--s-100);
  border:1px solid var(--rule-2);box-shadow:var(--sh-2);
  padding:0;opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),transform .28s var(--ease-mech),visibility .22s;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background-color:var(--rule);
}
.nav__menu>li.is-open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega__col{background:var(--s-100);padding:22px 20px}
.mega__col h4{
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-500);padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--rule);
}
.mega a{
  display:flex;align-items:center;gap:9px;padding:9px 0;
  font-size:13.8px;color:var(--t-300);transition:color .18s,padding-left .22s var(--ease-mech);
}
.mega a::before{content:"";width:0;height:1px;background:var(--sig);flex:none;transition:width .22s var(--ease-mech)}
.mega a:hover{color:var(--t-000);padding-left:4px}
.mega a:hover::before{width:12px}
.mega__foot{grid-column:1/-1;background:var(--s-050);padding:20px;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.mega__foot p{font-size:12.5px;color:var(--t-500);max-width:56ch}

.mega--sol{grid-template-columns:repeat(2,1fr);width:min(92vw,720px)}
.mega--sol>a{background:var(--s-100);align-items:flex-start;gap:14px;padding:18px 20px}
.mega--sol>a:hover{background:var(--s-200);padding-left:20px}
.mega--sol a::before{display:none}
.mega--sol .ic{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule-2);color:var(--b-400);transition:.22s var(--ease);
}
.mega--sol a:hover .ic{border-color:var(--sig);color:var(--sig)}
.mega--sol .ic svg{width:16px;height:16px}
.mega--sol b{display:block;font-size:14.5px;color:var(--t-100);font-weight:600}
.mega--sol span{display:block;font-size:12.5px;color:var(--t-500);line-height:1.5;margin-top:3px}

.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--rule-2);align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--t-100);position:relative;transition:.22s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--t-100);transition:.22s}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1180px){
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--s-050)}
  .nav.is-stuck{background:var(--s-000)}
  .nav__menu,.nav__cta{display:none}
  .burger{display:flex}
  .nav__menu.is-mobile{
    display:block;position:fixed;inset:78px 0 0;background:var(--s-050);overflow-y:auto;
    padding:20px 28px 190px;margin:0;border-top:1px solid var(--rule);
  }
  .nav__menu.is-mobile>li>a{padding:17px 0;font-size:17px;border-bottom:1px solid var(--rule);justify-content:space-between}
  .nav__menu.is-mobile>li>a::after{display:none}
  .nav__menu.is-mobile .mega{
    position:static;transform:none;width:auto;opacity:1;visibility:visible;display:none;
    grid-template-columns:1fr;background:none;border:0;box-shadow:none;padding:6px 0 14px;gap:0;
  }
  .nav__menu.is-mobile>li.is-open .mega{display:block}
  .mega__col,.mega--sol>a{background:none;padding:10px 0}
  .mega__foot{display:none}
  body.menu-open .nav__cta{
    display:flex;position:fixed;left:28px;right:28px;bottom:24px;z-index:95;justify-content:center;padding:17px;font-size:15px;
  }
  /* Araç satırı menü listesinin son öğesi; menüyle birlikte kayar */
  .nav__menu.is-mobile .nav__util{display:block;padding-top:10px}
  .nav__util .themetog,.nav__util .langs{margin:0}
  /* Menü açıkken sabit düğmeler CTA'nın üstüne binmesin */
  body.menu-open .wafab,body.menu-open .totop{display:none}
}

/* ---------------------------------------------------------------------
   6. Hero + slider
   --------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--s-000);isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-3}
.hero__bg canvas{width:100%;height:100%;display:block;opacity:.4}
/* Pafta karesi — belirgin, maskesiz köşe alanı */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:68px 68px;opacity:.7;
  -webkit-mask-image:linear-gradient(105deg,transparent 34%,#000 62%);
  mask-image:linear-gradient(105deg,transparent 34%,#000 62%);
}
.hero::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 78% 24%,rgba(2,130,205,.14),transparent 62%);
}

.slides{position:relative}
.slide{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,4vw,76px);align-items:center;
  padding-block:clamp(46px,4.6vw,74px) clamp(28px,2.6vw,42px);min-height:min(66vh,640px);
  position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),visibility .5s;
}
.slide.is-on{position:relative;opacity:1;visibility:visible;pointer-events:auto}

/* Metin: satır maskesi + kademeli */
.slide__txt>*{opacity:0;transform:translateY(26px)}
.slide.is-on .slide__txt>*{animation:slideUp .7s var(--ease-out) forwards}
.slide.is-on .slide__txt>*:nth-child(1){animation-delay:.04s}
.slide.is-on .slide__txt>*:nth-child(2){animation-delay:.1s}
.slide.is-on .slide__txt>*:nth-child(3){animation-delay:.18s}
.slide.is-on .slide__txt>*:nth-child(4){animation-delay:.26s}
.slide.is-on .slide__txt>*:nth-child(5){animation-delay:.34s}
@keyframes slideUp{to{opacity:1;transform:none}}
/* Grafik: soldan açılan kesim — solmalı geçiş değil */
.slide__art{clip-path:inset(0 0 0 100%);opacity:.001}
.slide.is-on .slide__art{animation:artWipe .95s var(--ease-out) .12s forwards}
@keyframes artWipe{to{clip-path:inset(0 0 0 0);opacity:1}}

.slide h1{font-size:clamp(31px,3.7vw,54px);letter-spacing:-.034em;line-height:1.08;font-weight:700;max-width:17ch}
.slide h1 em{font-style:normal;position:relative;color:var(--t-000);white-space:nowrap}
.slide h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;background:var(--sig);
  transform:scaleX(0);transform-origin:left;
}
.slide.is-on h1 em::after{animation:sweep .7s var(--ease-mech) .55s forwards}
@keyframes sweep{to{transform:scaleX(1)}}
.slide .lead{margin-top:26px;max-width:54ch}
.slide__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.slide__trust{display:flex;flex-wrap:wrap;gap:0;margin-top:34px;border-top:1px solid var(--rule)}
.slide__trust li{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-500);
  padding:14px 20px 0 0;position:relative;
}
.slide__trust li+li{padding-left:20px;border-left:1px solid var(--rule)}
.slide__trust{position:relative;overflow:hidden}
.slide__trust::before{
  content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out) .45s;
}
.slide.is-on .slide__trust::before{transform:scaleX(1)}

/* Slider kontrolleri — sayaç + ilerleme cetveli */
.slider__ui{
  display:flex;align-items:center;gap:24px;padding-bottom:clamp(22px,2.6vw,36px);position:relative;z-index:3;
  border-top:1px solid var(--rule);padding-top:20px;
}
.slider__dots{display:flex;gap:0}
.slider__dots button{
  width:64px;height:2px;background:var(--rule-2);position:relative;overflow:hidden;transition:background .25s;
}
.slider__dots button+button{margin-left:8px}
.slider__dots button:hover{background:var(--rule-3)}
.slider__dots button i{position:absolute;inset:0;background:var(--sig);transform:scaleX(0);transform-origin:left;display:block}
.slider__dots button[aria-selected="true"] i{animation:dotFill var(--slider-dur,3s) linear forwards}
@keyframes dotFill{to{transform:scaleX(1)}}
.slider__num{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;color:var(--t-500)}
.slider__num b{color:var(--sig);font-weight:500}
.slider__arrows{display:flex;gap:0;margin-left:auto}
.slider__arrows button{
  width:46px;height:46px;border:1px solid var(--rule-2);display:grid;place-items:center;
  color:var(--t-300);transition:.22s var(--ease);
}
.slider__arrows button+button{margin-left:-1px}
.slider__arrows button:hover{border-color:var(--sig);color:var(--sig);z-index:1}
.slider__arrows svg{width:15px;height:15px}

/* Şerit */
.ticker{border-block:1px solid var(--rule);background:var(--s-000);overflow:hidden;padding-block:15px;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--s-000),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--s-000),transparent)}
.ticker__track{display:flex;width:max-content;animation:slideX 68s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slideX{to{transform:translateX(-50%)}}
.ticker__track span{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:var(--t-500);
  padding-inline:24px;display:flex;align-items:center;gap:24px;white-space:nowrap;transition:color .2s;
}
.ticker__track span:hover{color:var(--t-100)}
.ticker__track span::after{content:"";width:3px;height:3px;background:var(--sig);flex:none}

@media(max-width:980px){
  .slide{grid-template-columns:1fr;padding-block:48px 32px;min-height:0}
  .slide__art{order:-1;max-width:380px;margin-inline:auto}
  .slide h1{font-size:clamp(33px,7.4vw,46px)}
  .slide__trust li+li{border-left:0;padding-left:0}
}

/* ---------------------------------------------------------------------
   7. Halka diyagramı
   --------------------------------------------------------------------- */
.rings{position:relative;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto}
.rings svg{width:100%;height:100%;overflow:visible}
.rings .r-spin{transform-origin:250px 250px;animation:spin 74s linear infinite}
.rings .r-spin--rev{animation-direction:reverse;animation-duration:104s}
@keyframes spin{to{transform:rotate(360deg)}}
.rings .node{transform-box:fill-box;transform-origin:center;animation:pulse 3.2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.28}50%{opacity:1}}
.rings__badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:170px}
.rings__badge span{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-500);margin-top:14px;line-height:1.7}

/* ---------------------------------------------------------------------
   8. İstatistik şeridi — cetvelli hücreler
   --------------------------------------------------------------------- */
.stats{background:var(--s-000);border-block:1px solid var(--rule);position:relative}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.stats__item{background:var(--s-000);padding:clamp(30px,3.2vw,50px) clamp(20px,2.2vw,36px);position:relative;overflow:hidden}
.stats__item::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out);
}
.stats__item.in::after{transform:scaleX(1)}
.stats__head{display:flex;align-items:baseline;gap:10px}
.stats__item b{
  display:block;font-family:var(--f-display);font-size:clamp(34px,3.6vw,50px);font-weight:700;
  letter-spacing:-.042em;line-height:.95;font-variant-numeric:tabular-nums;color:var(--t-000);
}
.stats__item b i{font-style:normal;color:var(--sig);font-size:.5em;vertical-align:.32em;margin-left:1px}
.stats__item p{margin-top:16px;font-size:13px;color:var(--t-400);line-height:1.6;max-width:30ch}
.stats__bar{height:2px;background:var(--rule-2);margin-top:20px;overflow:hidden}
.stats__bar i{display:block;height:100%;background:var(--b-500);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out) .18s}
.stats__item.in .stats__bar i{transform:scaleX(var(--v,1))}
@media(max-width:860px){.stats__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats__grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   9. Hareket sistemi — mekanik, belirgin
   --------------------------------------------------------------------- */
[data-anim]{opacity:0;transition:opacity .78s var(--ease-out),transform .78s var(--ease-out),clip-path .9s var(--ease-out)}
[data-anim="up"]{transform:translateY(38px)}
[data-anim="left"]{transform:translateX(-42px)}
[data-anim="right"]{transform:translateX(42px)}
[data-anim="scale"]{transform:scale(.94)}
[data-anim="wipe"]{clip-path:inset(0 100% 0 0);opacity:1}
[data-anim].in{opacity:1;transform:none;clip-path:inset(0)}
[data-d="1"]{transition-delay:.07s}[data-d="2"]{transition-delay:.14s}
[data-d="3"]{transition-delay:.21s}[data-d="4"]{transition-delay:.28s}
[data-d="5"]{transition-delay:.35s}[data-d="6"]{transition-delay:.42s}
[data-d="7"]{transition-delay:.49s}[data-d="8"]{transition-delay:.56s}

/* Yatay giriş yalnızca sayfa kenarına dayanmayan öğeler içindir.
   Yapışkan yan sütun sağ kenara dayalı olduğu için 42px sağa ötelenmiş
   başlangıç hâli belge genişliğini büyütüp yatay kaydırma çubuğu doğuruyordu.
   Kırpma (overflow) ile çözmek yapışkanlığı bozar; bu yüzden yalnızca bu
   öğede giriş yönünü dikeye çeviriyoruz — hareket kaybolmuyor, ekrandan
   taşmayan bir eksene taşınıyor. */
.aside[data-anim="right"],.aside[data-anim="left"]{transform:translateY(28px)}

/* Dar ekranda tüm yatay girişler için aynı gerekçe geçerli. */
@media(max-width:1000px){
  [data-anim="left"],[data-anim="right"]{transform:translateY(28px)}
}

/* Kademeli hücre açılışı — soldan kesim, mekanik */
[data-stagger]>*{
  opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(14px);
  transition:opacity .6s var(--ease-out),clip-path .72s var(--ease-mech),transform .6s var(--ease-out);
}
[data-stagger].in>*{opacity:1;clip-path:inset(0);transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:.03s}
[data-stagger].in>*:nth-child(2){transition-delay:.09s}
[data-stagger].in>*:nth-child(3){transition-delay:.15s}
[data-stagger].in>*:nth-child(4){transition-delay:.21s}
[data-stagger].in>*:nth-child(5){transition-delay:.27s}
[data-stagger].in>*:nth-child(6){transition-delay:.33s}
[data-stagger].in>*:nth-child(7){transition-delay:.39s}
[data-stagger].in>*:nth-child(8){transition-delay:.45s}
[data-stagger].in>*:nth-child(n+9){transition-delay:.51s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-anim],[data-stagger]>*{opacity:1;transform:none;clip-path:none}
  .slide__txt>*,.slide__art{opacity:1;transform:none;clip-path:none}
  .slide h1 em::after,.ribbon i{transform:scaleX(1)}
  .ln>i{transform:none}
  .eyebrow::before{width:34px}
}

/* ---------------------------------------------------------------------
   10. Sayfa üstü + ilerleme
   --------------------------------------------------------------------- */
.totop{
  position:fixed;right:28px;bottom:28px;width:46px;height:46px;z-index:80;
  display:grid;place-items:center;background:var(--sig-d);color:#fff;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.26s var(--ease-mech);
}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:#C33B2B}
.totop svg{width:17px;height:17px}

/* WhatsApp düğmesi
   Harici betik veya çerez yok — düz bir wa.me bağlantısı. Kapalıyken yalnızca
   ikon görünür, üzerine gelince yazı açılır: sürekli yer kaplayan bir balon
   yerine kenarda duran sakin bir düğme. Marka rengi WhatsApp'ın kendi yeşili
   yerine sitenin mavisi; sayfanın renk düzeni bozulmasın diye. */
.wafab{
  position:fixed;right:28px;bottom:86px;z-index:80;height:46px;
  display:inline-flex;align-items:center;gap:0;overflow:hidden;
  background:var(--b-700);color:#fff;padding:0 14px;max-width:46px;
  transition:max-width .34s var(--ease-mech),background .24s var(--ease),gap .34s var(--ease-mech);
}
.wafab svg{width:22px;height:22px;flex:none}
.wafab span{
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  opacity:0;transition:opacity .24s var(--ease) .06s;
}
.wafab:hover,.wafab:focus-visible{max-width:210px;gap:10px;background:var(--b-600)}
.wafab:hover span,.wafab:focus-visible span{opacity:1}
@media(max-width:640px){
  .wafab{right:20px;bottom:78px;padding:0 12px}
  .totop{right:20px;bottom:20px;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  .wafab{transition:background .2s}
}

/* Mobil menüdeki araç satırı — tema, dil ve iletişim.
   Bunlar üst şeritte (.topbar) duruyor, üst şerit de 1180px altında
   gizleniyor; yani mobilde tema ve dil seçici tamamen kayboluyordu. */
.nav__util{display:none}
.nav__util-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.nav__util-lbl{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-400);
}
.nav__util-links{display:flex;flex-direction:column;gap:2px;padding:18px 0 6px}
.nav__util-links a{
  display:flex;align-items:center;gap:12px;padding:11px 0;
  font-size:14.5px;color:var(--t-200);transition:color .2s var(--ease);
}
.nav__util-links a:hover{color:var(--sig)}
.nav__util-links svg{width:17px;height:17px;flex:none;color:var(--t-400)}
.nav__util .socials{padding-top:10px;border-top:1px solid var(--rule)}
.progress{position:fixed;top:0;left:0;height:2px;z-index:100;background:var(--sig);width:0;transition:width .1s linear}

/* ---------------------------------------------------------------------
   11. Hücre sistemi — cetvelli grid (grid ÇİZGİLERİ görünür)
   --------------------------------------------------------------------- */
.gcards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.gcards--3{grid-template-columns:repeat(3,1fr)}
.gcards--2{grid-template-columns:repeat(2,1fr)}
.gcard{
  position:relative;overflow:hidden;background:var(--s-200);
  padding:32px 26px 26px;display:flex;flex-direction:column;gap:12px;
  transition:background .3s var(--ease);
}

/* Kurumsal giriş sayfasındaki bölüm kartları.
   Uzun tek sayfa yerine beş odaklı sayfaya dağıtıldı; buradan seçiliyor. */
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.hubgrid--2{grid-template-columns:repeat(2,1fr)}
.hubcard{
  position:relative;overflow:hidden;background:var(--s-200);
  padding:30px 26px 24px;display:flex;flex-direction:column;gap:12px;
  transition:background .3s var(--ease);
}
.hubcard::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--sig);transform:scaleX(0);transform-origin:left;
  transition:transform .36s var(--ease-mech)}
.hubcard:hover{background:var(--s-300)}
.hubcard:hover::after{transform:scaleX(1)}
.hubcard__no{position:absolute;right:20px;top:18px;font-size:11px;letter-spacing:.16em;
  color:var(--t-500);transition:color .3s var(--ease)}
.hubcard:hover .hubcard__no{color:var(--sig)}
.hubcard__ic{display:block;width:28px;height:28px;color:var(--sig);margin-bottom:4px}
.hubcard__ic svg{width:100%;height:100%}
.hubcard h3{font-size:19px;line-height:1.26;color:var(--t-000);letter-spacing:-.024em}
.hubcard p{font-size:13.8px;line-height:1.62;color:var(--t-300);flex:1}
.hubcard .go{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--rule-2);
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-500);
  transition:color .25s var(--ease);
}
.hubcard:hover .go{color:var(--t-100)}
.hubcard .go svg{width:13px;height:13px;transition:transform .3s var(--ease-mech)}
.hubcard:hover .go svg{transform:translateX(5px)}
@media(max-width:900px){.hubgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hubgrid,.hubgrid--2{grid-template-columns:1fr}}
/* köşe işareti — pafta registrasyon markası */
.gcard::before{
  content:"";position:absolute;left:0;top:0;width:12px;height:12px;
  border-left:2px solid var(--sig);border-top:2px solid var(--sig);
  opacity:0;transform:translate(-4px,-4px);
  transition:opacity .3s var(--ease-mech),transform .3s var(--ease-mech);
}
.gcard::after{
  content:attr(data-no);position:absolute;right:18px;top:16px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--t-500);
  transition:color .3s var(--ease);
}
.gcard:hover{background:var(--s-300)}
.gcard:hover::before{opacity:1;transform:none}
.gcard:hover::after{color:var(--sig)}
.gcard h3{font-size:19px;line-height:1.26;color:var(--t-000);letter-spacing:-.024em}
.gcard p{font-size:13.8px;line-height:1.62;color:var(--t-300);flex:1}
.gcard .go{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-2);
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-500);
  transition:color .25s var(--ease);
}
.gcard:hover .go{color:var(--t-100)}
.gcard .go svg{width:13px;height:13px;transition:transform .3s var(--ease-mech)}
.gcard:hover .go svg{transform:translateX(5px)}
.gcard__ic{
  width:38px;height:38px;display:grid;place-items:center;flex:none;
  border:1px solid var(--rule-2);color:var(--b-400);transition:.28s var(--ease);
}
.gcard__ic svg{width:19px;height:19px;stroke-width:1.4}
.gcard:hover .gcard__ic{border-color:var(--sig);color:var(--sig)}
.gcard__wm{position:absolute;right:-10px;bottom:-10px;width:96px;height:96px;color:var(--b-600);opacity:.07;
  transition:opacity .34s var(--ease);pointer-events:none}
.gcard:hover .gcard__wm{opacity:.14}
.gcard__wm svg{width:100%;height:100%;stroke-width:1}
a.gcard{text-decoration:none;color:inherit}
@media(max-width:1100px){.gcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gcards,.gcards--3,.gcards--2{grid-template-columns:1fr}}

/* Kâğıt üzerinde hücre */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--pap-line);border:1px solid var(--pap-line)}
.pcard{
  background:var(--pap-2);padding:30px 26px;display:flex;flex-direction:column;gap:12px;position:relative;
  transition:background .28s var(--ease);
}
.pcard:hover{background:var(--pap-1)}
.pcard::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;
  border-left:2px solid var(--sig);border-top:2px solid var(--sig);opacity:0;transition:opacity .28s}
.pcard:hover::before{opacity:1}
.pcard .ic{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--pap-line-2);color:var(--b-700);transition:.26s}
.pcard:hover .ic{border-color:var(--sig);color:var(--sig)}
.pcard .ic svg{width:21px;height:21px;stroke-width:1.5}
.pcard h3{font-size:18px;line-height:1.28}
.pcard p{font-size:14px;color:var(--i-600);line-height:1.6;flex:1}
@media(max-width:960px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pcards{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   12. Hizmet aileleri
   --------------------------------------------------------------------- */
.fam{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.fam__card{
  position:relative;overflow:hidden;padding:clamp(30px,3vw,46px);background:var(--s-200);
  display:flex;flex-direction:column;transition:background .3s var(--ease);
}
.fam__card:hover{background:var(--s-300)}
.fam__card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sig);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease-mech);
}
.fam__card:hover::before{transform:scaleY(1)}
.fam__no{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--t-500);margin-bottom:24px}
.fam__card:hover .fam__no{color:var(--sig)}
.fam__ic{
  width:52px;height:52px;display:grid;place-items:center;margin-bottom:26px;
  border:1px solid var(--rule-2);color:var(--b-400);transition:.3s var(--ease);
}
.fam__card:hover .fam__ic{border-color:var(--sig);color:var(--sig)}
.fam__ic svg{width:25px;height:25px;stroke-width:1.3}
.fam__card h3{font-size:clamp(20px,1.75vw,25px);margin-bottom:14px;color:var(--t-000);letter-spacing:-.026em;line-height:1.2}
.fam__card>p{color:var(--t-300);font-size:15px;line-height:1.64;max-width:46ch}
.fam__list{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule-2);
  display:grid;grid-template-columns:1fr 1fr;gap:0 24px;flex:1}
.fam__list a{
  display:flex;align-items:center;gap:9px;padding:9px 0;font-size:13.6px;color:var(--t-300);
  border-bottom:1px solid var(--rule);transition:color .18s,padding-left .22s var(--ease-mech);
}
.fam__list a::before{content:"";width:0;height:1px;flex:none;background:var(--sig);transition:width .22s var(--ease-mech)}
.fam__list a:hover{color:var(--t-000);padding-left:3px}
.fam__list a:hover::before{width:10px}
.fam__more{margin-top:28px}
@media(max-width:900px){.fam{grid-template-columns:1fr}.fam__list{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   13. Çözümler (ürün) hücreleri
   --------------------------------------------------------------------- */
.sols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sol{
  position:relative;overflow:hidden;padding:32px 28px;background:var(--s-200);
  display:flex;flex-direction:column;gap:15px;transition:background .3s var(--ease);
}
.sol:hover{background:var(--s-300)}
.sol::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;
  border-left:2px solid var(--sig);border-top:2px solid var(--sig);
  opacity:0;transform:translate(-4px,-4px);transition:.3s var(--ease-mech)}
.sol:hover::before{opacity:1;transform:none}
.sol__top{display:flex;align-items:center;gap:14px}
.sol__top>span:last-child{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sol__mark{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule-2);color:var(--b-400);transition:.28s var(--ease);
}
.sol:hover .sol__mark{border-color:var(--sig);color:var(--sig)}
.sol__mark svg{width:21px;height:21px;stroke-width:1.4}
.sol__name{font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--t-000)}
.sol__tag{
  display:inline-block;max-width:100%;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t-500);padding:3px 0;margin-top:3px;
}
.sol p{font-size:14px;line-height:1.62;color:var(--t-300);flex:1}
.sol__meta{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:2px}
.sol__meta span{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--t-500);
  padding:3px 0;position:relative}
.sol__meta span+span{padding-left:16px}
.sol__meta span+span::before{content:"";position:absolute;left:0;top:50%;width:1px;height:10px;
  transform:translateY(-50%);background:var(--rule-2)}
.sol .go{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-2);
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-500);transition:color .25s}
.sol:hover .go{color:var(--t-100)}
.sol .go svg{width:13px;height:13px;transition:transform .3s var(--ease-mech)}
.sol:hover .go svg{transform:translateX(5px)}
.sol--wide{grid-column:span 2}
@media(max-width:1000px){.sols{grid-template-columns:repeat(2,1fr)}.sol--wide{grid-column:span 2}}
@media(max-width:640px){.sols{grid-template-columns:1fr}.sol--wide{grid-column:span 1}}

/* ---------------------------------------------------------------------
   14. Katman gezgini
   --------------------------------------------------------------------- */
.layers{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0;align-items:stretch;
  border:1px solid var(--rule);background:var(--rule);column-gap:1px}
.layers__nav{background:var(--s-100);padding:0}
.layers__nav li{transition:background .26s}
.layers__nav li+li{border-top:1px solid var(--rule)}
.layers__nav button{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;width:100%;
  padding:20px 22px;text-align:left;transition:.26s var(--ease);color:var(--t-500);position:relative;
}
.layers__nav button::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sig);
  transform:scaleY(0);transition:transform .3s var(--ease-mech);
}
.layers__nav li:hover{background:var(--s-200)}
.layers__nav li:hover button{color:var(--t-200)}
.layers__nav .is-active{background:var(--s-200)}
.layers__nav .is-active button{color:var(--t-000)}
.layers__nav .is-active button::before{transform:scaleY(1)}
.layers__nav .lv{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;opacity:.75}
.layers__nav .is-active .lv{color:var(--sig);opacity:1}
.layers__nav .nm{font-family:var(--f-display);font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.026em}
.layers__nav .dot{width:6px;height:6px;background:var(--rule-3);transition:.25s}
.layers__nav .is-active .dot{background:var(--sig)}
.layers__panel{
  background:var(--s-200);padding:clamp(30px,3.2vw,46px);position:relative;overflow:hidden;min-height:400px;
}
.mini-rings{position:absolute;right:26px;top:26px;width:68px;height:68px;fill:none}
.mini-rings circle{stroke:var(--rule-2);stroke-width:1;transition:stroke .3s var(--ease),stroke-width .3s var(--ease)}
.mini-rings circle[data-on="1"]{stroke:var(--sig);stroke-width:2.4}
@media(max-width:560px){.mini-rings{display:none}}
.layers__pane{display:none;position:relative}
.layers__pane.is-active{display:block;animation:paneIn .5s var(--ease-out)}
@keyframes paneIn{from{opacity:0;clip-path:inset(0 0 0 12%)}to{opacity:1;clip-path:inset(0)}}
.layers__pane h3{font-size:clamp(21px,1.9vw,27px);margin-bottom:14px;color:var(--t-000);letter-spacing:-.026em}
.layers__pane>p{color:var(--t-300);font-size:15.5px;line-height:1.7;max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:0;margin-top:28px;border:1px solid var(--rule-2)}
.chips li{
  font-family:var(--f-mono);font-size:11.5px;color:var(--t-200);
  padding:9px 15px;transition:.2s var(--ease);border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  margin:-1px -1px 0 0;
}
.chips li:hover{color:var(--sig);background:var(--s-300)}
.layers__std{margin-top:28px;padding-top:20px;border-top:1px solid var(--rule-2);display:flex;flex-wrap:wrap;gap:8px 26px}
.layers__std span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-500)}
@media(max-width:900px){.layers{grid-template-columns:1fr;row-gap:1px}}

/* ---------------------------------------------------------------------
   15. Zaman çizelgesi — tek raylı, sola dayalı ölçü şeridi
   --------------------------------------------------------------------- */
.tl{position:relative;padding-left:0;border-top:1px solid var(--rule)}
.tl__rail{position:absolute;left:82px;top:0;bottom:0;width:1px;background:var(--rule);overflow:hidden}
.tl__rail i{display:block;width:100%;height:100%;background:var(--sig);
  transform:scaleY(0);transform-origin:top;transition:transform 1.9s var(--ease-out)}
.tl.in .tl__rail i{transform:scaleY(1)}
.tl__item{
  display:grid;grid-template-columns:82px 1fr;align-items:stretch;position:relative;
  border-bottom:1px solid var(--rule);transition:background .28s var(--ease);
}
.tl__item:hover{background:var(--s-100)}
.tl__node{
  grid-column:1;grid-row:1;display:flex;align-items:flex-start;justify-content:flex-start;
  padding:26px 0 26px 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;
  color:var(--t-500);position:relative;z-index:2;transition:color .28s;
}
.tl__item:hover .tl__node{color:var(--sig)}
.tl__node::after{
  content:"";position:absolute;left:82px;top:32px;width:7px;height:7px;background:var(--s-050);
  border:1px solid var(--rule-3);transform:translateX(-50%) rotate(45deg);transition:.28s var(--ease-mech);
}
.tl__item:hover .tl__node::after{background:var(--sig);border-color:var(--sig);transform:translateX(-50%) rotate(45deg) scale(1.3)}
.tl__card{
  grid-column:2;grid-row:1;padding:26px 0 26px 34px;text-align:left;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 30px;align-items:start;
}
.tl__card h4{font-size:clamp(17px,1.4vw,20px);margin-bottom:6px;color:var(--t-000);letter-spacing:-.026em}
.tl__card p{font-size:14px;color:var(--t-300);line-height:1.6;max-width:52ch}
.tl__out{
  grid-column:2;grid-row:1;align-self:center;justify-self:end;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--t-500);
  border:1px solid var(--rule-2);padding:7px 13px;white-space:nowrap;transition:.28s var(--ease);
}
.tl__item:hover .tl__out{border-color:var(--rule-3);color:var(--t-200)}
@media(max-width:820px){
  .tl__rail{left:44px}
  .tl__item{grid-template-columns:44px minmax(0,1fr)}
  .tl__node::after{left:44px;top:26px}
  .tl__card{padding-left:24px;grid-template-columns:minmax(0,1fr);min-width:0}
  .tl__out{grid-column:1;grid-row:2;justify-self:start;align-self:start}
}
/* Çok dar ekranda "çıktı" rozetindeki nowrap, hücreyi içeriği kadar
   genişletip belgeyi taşırıyordu; burada sarmasına izin veriyoruz. */
@media(max-width:520px){
  .tl__out{white-space:normal}
}

/* ---------------------------------------------------------------------
   16. Hizmet seviyeleri
   --------------------------------------------------------------------- */
.sla{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sla__card{
  position:relative;overflow:hidden;padding:28px 24px 24px;background:var(--s-200);
  transition:background .3s var(--ease);
}
.sla__card:hover{background:var(--s-300)}
.sla__card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sev,var(--b-500));
  transform:scaleY(.18);transform-origin:top;transition:transform .55s var(--ease-mech)}
.sla__card:hover::before{transform:scaleY(1)}
.sla__lvl{display:flex;align-items:baseline;gap:11px;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--rule-2)}
.sla__lvl b{font-family:var(--f-display);font-size:32px;font-weight:700;color:var(--sev,var(--b-400));letter-spacing:-.04em;line-height:1}
.sla__lvl span{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-500)}
.sla__card h4{font-size:15.5px;margin-bottom:9px;color:var(--t-000);line-height:1.35}
.sla__card p{font-size:13px;color:var(--t-300);line-height:1.58}
.sla__gauge{margin-top:22px;height:3px;background:var(--rule-2);overflow:hidden;display:flex;gap:2px}
.sla__gauge i{display:block;height:100%;width:100%;background:var(--sev,var(--b-500));
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-mech) .22s}
.sla.in .sla__gauge i{transform:scaleX(var(--v,1))}
.sla__resp{margin-top:12px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--t-500)}
@media(max-width:1000px){.sla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sla{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   17. Belgeler
   --------------------------------------------------------------------- */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cert{background:var(--s-200);display:flex;flex-direction:column;transition:background .3s var(--ease);position:relative}
.cert:hover{background:var(--s-300)}
.cert__shot{position:relative;aspect-ratio:520/400;overflow:hidden;background:#EDEDE8;border-bottom:1px solid var(--rule)}
.cert__shot img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.06);
  transition:filter .5s var(--ease),transform .8s var(--ease-out)}
.cert:hover .cert__shot img{filter:grayscale(0) contrast(1);transform:scale(1.04)}
.cert__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,18,0) 40%,rgba(7,11,18,.9) 88%);
}
.cert__badge{
  position:absolute;left:12px;bottom:11px;z-index:2;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.08em;color:#fff;background:rgba(5,8,14,.88);padding:6px 12px;
  border:1px solid rgba(148,175,205,.24);display:inline-flex;align-items:center;
}
.cert__badge::before{content:"";display:inline-block;width:8px;height:1px;background:var(--sig);
  vertical-align:middle;margin-right:9px}
.cert__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cert__body h4{font-size:14px;line-height:1.4;color:var(--t-100);letter-spacing:-.014em}
.cert__meta{margin-top:auto;padding-top:13px;border-top:1px solid var(--rule-2);
  display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--t-500)}
@media(max-width:1000px){.certs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.certs{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   18. Referanslar ve ortaklar
   --------------------------------------------------------------------- */
.refs{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.refs li{
  background:var(--s-200);aspect-ratio:16/10;display:grid;place-items:center;padding:16px;text-align:center;
  transition:background .28s var(--ease);position:relative;
}
.refs li::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;
  border-left:2px solid var(--sig);border-top:2px solid var(--sig);opacity:0;transition:opacity .26s}
.refs li:hover{background:var(--s-300)}
.refs li:hover::before{opacity:1}
.refs b{font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--t-200);
  line-height:1.28;transition:color .28s}
.refs li:hover b{color:var(--t-000)}
.refs li.ph{background:var(--s-100)}
.refs li.ph:hover::before{opacity:0}
.refs li.ph b{color:var(--t-500);font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;font-weight:400}
@media(max-width:1000px){.refs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.refs{grid-template-columns:repeat(2,1fr)}}

.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:0}
.sectors li{
  background:var(--s-200);padding:clamp(26px,2.6vw,36px);position:relative;overflow:hidden;
  transition:background .3s var(--ease);
}
.sectors li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sig);
  transform:scaleY(0);transform-origin:top;transition:transform .42s var(--ease-mech)}
.sectors li:hover{background:var(--s-300)}
.sectors li:hover::before{transform:scaleY(1)}
.sectors .ic{width:38px;height:38px;display:grid;place-items:center;margin-bottom:20px;
  border:1px solid var(--rule-2);color:var(--b-400);transition:.28s}
.sectors li:hover .ic{border-color:var(--sig);color:var(--sig)}
.sectors .ic svg{width:19px;height:19px;stroke-width:1.4}
.sectors h4{font-size:18px;margin-bottom:11px;color:var(--t-000);letter-spacing:-.026em}
.sectors p{font-size:13.8px;color:var(--t-300);line-height:1.62}
@media(max-width:820px){.sectors{grid-template-columns:1fr}}

/* Teknoloji yetkinlik haritası
   Marka adı tek başına bir şey anlatmıyordu; her kategori artık sıra numarası,
   ne iş yaptığımızı söyleyen bir satır ve marka çipleriyle geliyor. */
.tech{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);align-items:stretch}
.tgrp{background:var(--s-200);padding:24px 24px 26px;transition:background .3s var(--ease);
  display:flex;flex-direction:column;position:relative}
.tgrp::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--sig);
  transform:scaleY(0);transform-origin:top;transition:transform .34s var(--ease-mech)}
.tgrp:hover{background:var(--s-300)}
.tgrp:hover::after{transform:scaleY(1)}
.tgrp__h{display:flex;align-items:baseline;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--rule-2)}
.tgrp__no{font-size:10.5px;letter-spacing:.14em;color:var(--sig);flex:none}
.tgrp__h h4{font-size:14.5px;letter-spacing:-.012em;color:var(--t-100);font-weight:600;
  flex:1 1 auto;line-height:1.35}
.tgrp__n{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-500);
  flex:none;white-space:nowrap}
.tgrp__note{font-size:13px;line-height:1.62;color:var(--t-400);margin:12px 0 16px;flex:1 1 auto}
.tgrp__chips{display:flex;flex-wrap:wrap;gap:6px}
.tgrp__chips li{
  font-size:12.5px;color:var(--t-200);border:1px solid var(--rule-2);
  padding:6px 11px;transition:.2s var(--ease);
}
.tgrp__chips li:hover{border-color:var(--sig);color:var(--t-000)}
@media(max-width:820px){.tech{grid-template-columns:1fr}}

/* "Destekliyoruz" ne demek — açıklama + dört seviye */
.tnote{max-width:62ch;margin-bottom:22px}
.tnote h3{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;color:var(--t-000);margin-bottom:10px}
.tnote p{font-size:14.5px;line-height:1.68;color:var(--t-300)}
.tlevels{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-bottom:52px}
.tlevels li{background:var(--s-200);padding:22px 20px;transition:background .3s var(--ease)}
.tlevels li:hover{background:var(--s-300)}
.tlevels .ic{display:block;width:26px;height:26px;color:var(--sig);margin-bottom:14px}
.tlevels .ic svg{width:100%;height:100%}
.tlevels b{display:block;font-size:14px;color:var(--t-100);margin-bottom:6px;letter-spacing:-.01em}
.tlevels span:not(.ic){display:block;font-size:12.8px;line-height:1.58;color:var(--t-400)}
@media(max-width:900px){.tlevels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tlevels{grid-template-columns:1fr}}

.tfoot{margin-top:26px;padding-left:18px;border-left:2px solid var(--rule-2);
  font-size:13.4px;line-height:1.7;color:var(--t-400);max-width:78ch}

/* Marka şeridi (anasayfa ve hakkımızda sayfalarında kullanılır) */
.marq{overflow:hidden;position:relative;padding-block:0;border:1px solid var(--rule);border-top:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq__track{display:flex;gap:0;width:max-content;animation:slideX 58s linear infinite}
.marq--rev .marq__track{animation-direction:reverse;animation-duration:66s}
.marq:hover .marq__track{animation-play-state:paused}
.marq__track span{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--t-500);
  padding:14px 26px;border-right:1px solid var(--rule);white-space:nowrap;transition:.22s var(--ease);
}
.marq__track span:hover{color:var(--sig)}
.tech+.marq{margin-top:0}

/* Grup etiketi */
.grp-label{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--t-300);margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.grp-label>.mono{
  display:inline-grid;place-items:center;width:22px;height:22px;flex:none;
  border:1px solid var(--sig);color:var(--sig);font-size:10px;letter-spacing:0;
}

/* ---------------------------------------------------------------------
   19. Neden ONGSEC
   --------------------------------------------------------------------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.why li{
  position:relative;overflow:hidden;padding:32px 26px;background:var(--s-200);
  transition:background .3s var(--ease);
}
.why li::after{
  content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-mech);
}
.why li:hover{background:var(--s-300)}
.why li:hover::after{transform:scaleX(1)}
.why .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--t-500);display:block;margin-bottom:22px;
  transition:color .28s}
.why li:hover .n{color:var(--sig)}
.why .ic{
  width:40px;height:40px;display:grid;place-items:center;margin-bottom:20px;
  border:1px solid var(--rule-2);color:var(--b-400);transition:.3s var(--ease);
}
.why li:hover .ic{border-color:var(--sig);color:var(--sig)}
.why .ic svg{width:20px;height:20px;stroke-width:1.4}
.why h4{font-size:16.5px;margin-bottom:11px;color:var(--t-000);letter-spacing:-.024em;line-height:1.3}
.why p{font-size:13.5px;color:var(--t-300);line-height:1.62}
@media(max-width:1080px){.why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.why{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   20. İç sayfa başlığı
   --------------------------------------------------------------------- */
.phero{
  position:relative;padding-block:clamp(52px,6vw,98px) clamp(46px,5vw,80px);
  background:var(--s-000);border-bottom:1px solid var(--rule);overflow:hidden;isolation:isolate;
}
.phero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:68px 68px;opacity:.65;
  -webkit-mask-image:linear-gradient(102deg,transparent 40%,#000 72%);
  mask-image:linear-gradient(102deg,transparent 40%,#000 72%);
}
.phero__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,66px);align-items:center}
.phero__in--solo{grid-template-columns:1fr}
.phero h1{max-width:22ch;font-size:clamp(29px,3.35vw,47px);letter-spacing:-.032em;line-height:1.08;font-weight:700}
.phero .lead{margin-top:24px}
.phero__art{position:relative}
@media(max-width:900px){.phero__in{grid-template-columns:1fr}.phero__art{max-width:400px;margin-inline:auto}}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:28px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-500)}
.crumbs a:hover{color:var(--sig)}
.crumbs>*+*::before{content:"/";margin-right:9px;opacity:.4}
.crumbs>*:last-child{color:var(--t-300)}

.pmeta{display:flex;flex-wrap:wrap;gap:0;margin-top:32px;border-top:1px solid var(--rule)}
.pmeta span{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--t-400);
  padding:14px 20px 0 0;position:relative;transition:color .22s;
}
.pmeta span+span{padding-left:20px;border-left:1px solid var(--rule)}
.pmeta span:hover{color:var(--t-100)}

/* ---------------------------------------------------------------------
   21. İçerik + yan panel
   --------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:clamp(34px,4.2vw,68px);align-items:start}
.split>*{min-width:0}
.split--rev{grid-template-columns:336px minmax(0,1fr)}
@media(max-width:1000px){.split,.split--rev{grid-template-columns:minmax(0,1fr)}}

.aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media(max-width:1000px){.aside{position:static}}
.aside__box{background:var(--s-200);padding:26px 24px}
.aside__box h4{font-size:10.5px;margin-bottom:18px;color:var(--t-400);font-family:var(--f-mono);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:14px;border-bottom:1px solid var(--rule-2);display:flex;align-items:center;gap:10px}
.aside__box h4::before{content:"";width:6px;height:6px;background:var(--sig);flex:none}
.aside__box ul li{font-size:13.5px;line-height:1.56;padding:11px 0;border-bottom:1px solid var(--rule);color:var(--t-300)}
.aside__box ul li:last-child{border-bottom:0;padding-bottom:0}
.aside__box ul li strong{color:var(--t-100);font-weight:600}
.aside__box ul a{display:flex;align-items:center;gap:10px;transition:color .18s,padding-left .2s var(--ease-mech)}
.aside__box ul a::before{content:"";width:0;height:1px;flex:none;background:var(--sig);transition:width .2s var(--ease-mech)}
.aside__box ul a:hover{color:var(--t-000);padding-left:3px}
.aside__box ul a:hover::before{width:10px}
.aside__cta{background:var(--s-300)}
.aside__cta h4{color:var(--t-100)}
.aside__cta p{font-size:13.6px;color:var(--t-300);line-height:1.62;margin-bottom:22px}

/* Uzun metin blokları */
.blocks{display:flex;flex-direction:column;gap:clamp(34px,3.6vw,56px)}
.block{scroll-margin-top:110px;position:relative;border-top:1px solid var(--rule);padding-top:26px}
.sec--paper .block{border-top-color:var(--pap-line-2)}
.block__h{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.block__h .n{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--sig);flex:none;padding-top:4px;
}
.block h2{font-size:clamp(20px,1.75vw,25px);letter-spacing:-.024em;line-height:1.2}
.block>p{color:var(--t-300);font-size:15.5px;line-height:1.72;max-width:76ch}
.sec--paper .block>p{color:var(--i-600)}
.block ul{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;
  border-top:1px solid var(--rule)}
.sec--paper .block ul{border-top-color:var(--pap-line)}
.block ul li{
  font-size:14px;line-height:1.56;color:var(--t-300);padding:13px 0 13px 22px;
  border-bottom:1px solid var(--rule);position:relative;transition:color .2s,padding-left .22s var(--ease-mech);
}
.sec--paper .block ul li{color:var(--i-600);border-bottom-color:var(--pap-line)}
.block ul li::before{
  content:"";position:absolute;left:0;top:21px;width:9px;height:1px;background:var(--rule-3);transition:.22s var(--ease-mech);
}
.sec--paper .block ul li::before{background:var(--pap-line-2)}
.block ul li:hover{color:var(--t-100);padding-left:26px}
.sec--paper .block ul li:hover{color:var(--i-900)}
.block ul li:hover::before{background:var(--sig);width:14px}
@media(max-width:760px){.block ul{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   22. Hizmet dizini
   --------------------------------------------------------------------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.svc a{
  position:relative;overflow:hidden;padding:28px 26px;background:var(--s-200);
  display:flex;flex-direction:column;gap:11px;transition:background .3s var(--ease);
}
.svc a:hover{background:var(--s-300)}
.svc a::after{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-mech)}
.svc a:hover::after{transform:scaleX(1)}
.svc .n{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--t-500);transition:color .26s}
.svc a:hover .n{color:var(--sig)}
.svc h3{font-size:17.5px;line-height:1.3;color:var(--t-000);letter-spacing:-.024em}
.svc p{font-size:13.4px;color:var(--t-300);line-height:1.6;flex:1}
.svc .go{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule-2);
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);
  font-size:10px;letter-spacing:.18em;color:var(--t-500);transition:color .22s}
.svc a:hover .go{color:var(--t-100)}
.svc .go svg{width:13px;height:13px;transition:transform .3s var(--ease-mech)}
.svc a:hover .go svg{transform:translateX(5px)}
@media(max-width:1000px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svc{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   23. Tablolar
   --------------------------------------------------------------------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule)}
.sec--paper .tbl-wrap{border-color:var(--pap-line);background:var(--pap-2)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:600px}
.tbl th{
  text-align:left;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-400);font-weight:500;padding:16px 20px;background:var(--s-100);
  border-bottom:1px solid var(--rule-2);
}
.tbl td{padding:15px 20px;border-bottom:1px solid var(--rule);color:var(--t-300);vertical-align:top;line-height:1.6}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:var(--s-200)}
.tbl td:first-child{color:var(--t-100);font-weight:600;width:26%}
.sec--paper .tbl th{color:var(--i-400);background:var(--pap-1);border-bottom-color:var(--pap-line-2)}
.sec--paper .tbl td{color:var(--i-600);border-bottom-color:var(--pap-line)}
.sec--paper .tbl td:first-child{color:var(--i-900)}
.sec--paper .tbl tbody tr:hover{background:var(--pap-1)}

/* ---------------------------------------------------------------------
   24. Formlar
   --------------------------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* Grid hücrelerinin varsayılan min-width:auto değeri, harf aralığı geniş
   etiketlerde hücreyi içeriği kadar genişletip dar ekranda yatay kaydırma
   doğuruyordu. */
.form>*{min-width:0}
.field{display:flex;flex-direction:column;gap:9px;min-width:0}
.field label{overflow-wrap:anywhere}
.field--full{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-400)}
.field .req{color:var(--sig)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--t-100);background:var(--s-200);
  border:1px solid var(--rule-2);border-radius:0;padding:15px 16px;transition:.2s var(--ease);
}
.field textarea{min-height:158px;resize:vertical;line-height:1.65}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--rule-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sig);background:var(--s-300)}
.field input::placeholder,.field textarea::placeholder{color:var(--t-500)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2363768E' stroke-width='1.6'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;padding-right:40px}
.field select option{background:var(--s-300);color:var(--t-100)}
.check{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;font-size:13.5px;color:var(--t-300);line-height:1.65}
.check input{width:19px;height:19px;accent-color:var(--sig);flex:none;margin-top:2px;padding:0}
.check a{color:var(--b-400);text-decoration:underline;text-underline-offset:3px}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:8px;
  padding-top:24px;border-top:1px solid var(--rule)}
.form__note{font-size:12.5px;color:var(--t-500);max-width:46ch}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* İletişim listesi */
.contactlist li{display:flex;flex-direction:column;gap:5px;padding:15px 0}
.contactlist li strong{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-500);font-weight:500;
}
.contactlist li a{font-size:17px;color:var(--t-000);font-weight:600;letter-spacing:-.018em;transition:color .2s}
.contactlist li a::before{display:none}
.contactlist li a:hover{color:var(--sig)}
.contactlist li span{font-size:13px;color:var(--t-400);line-height:1.55}

/* Harita */
.map{position:relative;border:1px solid var(--rule);background:var(--s-100);overflow:hidden}
.map iframe{display:block;width:100%;height:clamp(320px,42vw,460px);border:0;
  filter:grayscale(1) invert(.92) contrast(.88) hue-rotate(185deg);transition:filter .5s var(--ease)}
.map:hover iframe{filter:grayscale(.35) invert(.92) contrast(.9) hue-rotate(185deg)}
.map__tag{
  position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:12px;
  background:var(--s-000);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:14px 20px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-300);pointer-events:none;
}
.map__tag::before{content:"";width:7px;height:7px;background:var(--sig);flex:none}
.map__foot{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);background:var(--s-100)}
.map__foot span,.map__foot a{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--t-500);
  padding:14px 20px;border-right:1px solid var(--rule);transition:color .2s;
}
.map__foot a:hover{color:var(--sig)}
.map__foot a:last-child{margin-left:auto;border-right:0;color:var(--t-200)}

/* Harita rıza paneli — gömülü harita yalnızca istendiğinde yüklenir.
   Zemin, paftadaki kesit taraması gibi ince eğik çizgilerden oluşur. */
.map__ask{
  min-height:clamp(320px,42vw,460px);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:14px;
  padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);
  background-image:repeating-linear-gradient(135deg,
    var(--rule) 0 1px, transparent 1px 14px);
}
.map__askh{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-400)}
.map__askp{max-width:52ch;font-size:14.2px;line-height:1.68;color:var(--t-300)}
.map__ask .btn{margin-top:6px}
.map__askl{font-size:12.5px}

/* ---------------------------------------------------------------------
   25. Blog
   --------------------------------------------------------------------- */
/* Öne çıkan yazı */
.feat{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:0;
  border:1px solid var(--rule);background:var(--rule);column-gap:1px;margin-bottom:1px;
}
.feat__body{background:var(--s-200);padding:clamp(32px,3.4vw,52px);display:flex;flex-direction:column;
  transition:background .3s var(--ease)}
.feat:hover .feat__body{background:var(--s-300)}
.feat__kick{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sig);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.feat__kick::before{content:"";width:26px;height:1px;background:var(--sig)}
.feat h2{font-size:clamp(23px,2.3vw,33px);letter-spacing:-.028em;line-height:1.16;color:var(--t-000);margin-bottom:18px}
.feat p{font-size:15.5px;color:var(--t-300);line-height:1.7;max-width:56ch;flex:1}
.feat__meta{display:flex;flex-wrap:wrap;gap:0;margin-top:28px;padding-top:20px;border-top:1px solid var(--rule-2)}
.feat__meta span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-500);padding-right:18px}
.feat__meta span+span{padding-left:18px;border-left:1px solid var(--rule-2)}
.feat__side{background:var(--s-100);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:1px}
.feat__stat{padding:18px 0;border-bottom:1px solid var(--rule)}
.feat__stat:last-child{border-bottom:0}
.feat__stat b{display:block;font-family:var(--f-display);font-size:34px;font-weight:700;letter-spacing:-.04em;color:var(--t-000);line-height:1}
.feat__stat span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-500);margin-top:9px}
@media(max-width:900px){.feat{grid-template-columns:1fr;row-gap:1px}}

/* Yazı dizini — kart yığını değil, cetvelli dizin satırları */
.postlist{border-top:1px solid var(--rule)}
.prow{
  display:grid;grid-template-columns:64px minmax(0,1fr) 190px 108px;align-items:center;gap:26px;
  padding:24px 18px 24px 0;border-bottom:1px solid var(--rule);position:relative;
  transition:background .28s var(--ease),padding-left .32s var(--ease-mech);
}
.prow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sig);
  transform:scaleY(0);transform-origin:center;transition:transform .34s var(--ease-mech)}
.prow:hover{background:var(--s-100);padding-left:18px}
.prow:hover::before{transform:scaleY(1)}
.prow__no{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--t-500);transition:color .26s}
.prow:hover .prow__no{color:var(--sig)}
.prow h3{font-size:clamp(17px,1.55vw,22px);line-height:1.3;color:var(--t-100);letter-spacing:-.026em;transition:color .24s}
.prow:hover h3{color:var(--t-000)}
.prow p{font-size:13.2px;color:var(--t-500);line-height:1.55;margin-top:7px;max-width:72ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prow__cat{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-400);
  border-left:1px solid var(--rule-2);padding-left:18px}
.prow__meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--t-500);text-align:right;
  display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.prow__meta em{font-style:normal;color:var(--t-300)}
@media(max-width:1080px){
  .prow{grid-template-columns:48px minmax(0,1fr) 108px;gap:18px}
  .prow__cat{display:none}
}
@media(max-width:620px){
  .prow{grid-template-columns:1fr;gap:10px;padding-block:20px}
  .prow__no{display:none}
  .prow__meta{flex-direction:row;gap:14px;align-items:center;justify-content:flex-start;text-align:left}
}

/* Kart görünümü (ilgili yazılar) */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.posts--2{grid-template-columns:repeat(2,1fr)}
.post{
  position:relative;overflow:hidden;padding:28px 26px;background:var(--s-200);
  display:flex;flex-direction:column;gap:13px;transition:background .3s var(--ease);
}
.post:hover{background:var(--s-300)}
.post::after{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-mech)}
.post:hover::after{transform:scaleX(1)}
.post__cat{
  align-self:flex-start;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-500);transition:color .26s;
}
.post:hover .post__cat{color:var(--sig)}
.post h3{font-size:18px;line-height:1.32;color:var(--t-000);letter-spacing:-.024em}
.post p{font-size:13.5px;color:var(--t-300);line-height:1.6;flex:1}
.post__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-2);
  display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.1em;color:var(--t-500)}
@media(max-width:960px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.posts,.posts--2{grid-template-columns:1fr}}

/* Filtre */
.filters{display:flex;flex-wrap:wrap;gap:0;margin-bottom:0;border:1px solid var(--rule);border-bottom:0}
.filters button{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 17px;color:var(--t-400);background:var(--s-100);
  border-right:1px solid var(--rule);transition:.22s var(--ease);
  display:inline-flex;align-items:center;gap:10px;
}
.filters button:hover{color:var(--t-000);background:var(--s-200)}
.filters button.is-on{background:var(--sig-d);color:#fff}
.filters button em{font-style:normal;font-size:9px;opacity:.65;letter-spacing:.06em}
.empty{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-500);
  border:1px solid var(--rule);border-top:0;padding:56px;text-align:center;
}

/* Blog yan menü */
.side-widget{border:0;background:var(--s-200);padding:24px}
.side-widget h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-400);margin-bottom:16px;font-weight:500;padding-bottom:14px;border-bottom:1px solid var(--rule-2);
  display:flex;align-items:center;gap:10px}
.side-widget h4::before{content:"";width:6px;height:6px;background:var(--sig);flex:none}
.side-widget .cats li a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;
  font-size:13.4px;color:var(--t-300);border-bottom:1px solid var(--rule);
  transition:color .2s,padding-left .22s var(--ease-mech);
}
.side-widget .cats li:last-child a{border-bottom:0}
.side-widget .cats li a:hover{color:var(--t-000);padding-left:5px}
.side-widget .cats em{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--t-500)}
.side-widget .cats li a:hover em{color:var(--sig)}
.side-widget .recent li{padding:13px 0;border-bottom:1px solid var(--rule)}
.side-widget .recent li:last-child{border-bottom:0}
.side-widget .recent a{font-size:13.4px;line-height:1.46;color:var(--t-200);transition:color .2s}
.side-widget .recent a:hover{color:var(--sig)}
.side-widget .recent span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;color:var(--t-500);margin-top:6px}

/* ---- Yazı gövdesi: okunması keyifli ölçü ve ritim ---- */
.prose{max-width:68ch;overflow-wrap:break-word;font-size:17px;line-height:1.78;color:var(--t-200)}
.prose>p:first-of-type{font-size:19.5px;line-height:1.68;color:var(--t-100)}
.prose h2{font-size:clamp(21px,1.85vw,27px);margin:52px 0 18px;color:var(--t-000);letter-spacing:-.032em;
  padding-top:26px;border-top:1px solid var(--rule);position:relative}
.prose h2::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:1px;background:var(--sig)}
.sec--paper .prose h2{color:var(--i-900);border-top-color:var(--pap-line-2)}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h2:first-child::before{display:none}
.prose h3{font-size:20px;margin:34px 0 12px;color:var(--t-100);letter-spacing:-.024em}
.prose h4{font-size:17px;margin:26px 0 10px;color:var(--t-100)}
.prose p{margin-bottom:22px}
.sec--paper .prose,.sec--paper .prose p{color:var(--i-600)}
.prose ul{margin:0 0 24px}
.prose ul li{position:relative;padding-left:26px;margin-bottom:11px;line-height:1.72}
.prose ul li::before{content:"";position:absolute;left:0;top:13px;width:12px;height:1px;background:var(--sig);opacity:.8}
.prose ol{padding-left:24px;margin-bottom:24px;list-style:decimal}
.prose ol li{margin-bottom:11px;line-height:1.72}
.prose ol::marker,.prose ol li::marker{color:var(--t-500);font-family:var(--f-mono);font-size:.85em}
.prose strong{color:var(--t-000);font-weight:600}
.sec--paper .prose strong{color:var(--i-900)}
.prose a{color:var(--b-400);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
  transition:color .2s}
.prose a:hover{color:var(--sig)}
.sec--paper .prose a{color:var(--b-700)}
.prose img{margin:32px 0;border:1px solid var(--rule)}
.prose figure{margin:32px 0}
.prose figcaption{font-size:12px;color:var(--t-500);margin-top:12px;font-family:var(--f-mono);
  letter-spacing:.08em;padding-left:16px;border-left:2px solid var(--sig)}
.prose pre{
  background:var(--s-000);color:#C6D3E2;border:1px solid var(--rule-2);
  padding:22px 24px;overflow-x:auto;font-family:var(--f-mono);font-size:12.6px;line-height:1.7;margin:28px 0;max-width:100%;
}
.prose code{font-family:var(--f-mono);font-size:.88em;background:var(--s-300);padding:2px 7px;
  color:var(--b-300);border:1px solid var(--rule)}
.sec--paper .prose code{background:var(--pap-1);color:var(--b-800);border-color:var(--pap-line)}
.prose pre code{background:none;padding:0;color:inherit;border:0}
.prose blockquote{border-left:2px solid var(--sig);padding:4px 0 4px 26px;margin:32px 0;
  color:var(--t-100);font-size:19px;line-height:1.66;font-family:var(--f-display);letter-spacing:-.018em}
.sec--paper .prose blockquote{color:var(--i-900)}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:28px 0;display:block;overflow-x:auto}
@media(min-width:760px){.prose table{display:table}}
.prose th,.prose td{text-align:left;padding:13px 18px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-400)}
.prose hr{border:0;border-top:1px solid var(--rule);margin:40px 0}
.prose .updated{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-500);
  padding-bottom:24px;margin-bottom:34px;border-bottom:1px solid var(--rule)}
.sec--paper .prose .updated{color:var(--i-400);border-bottom-color:var(--pap-line)}
.img-missing{
  display:grid;place-items:center;text-align:center;min-height:150px;padding:24px;margin:32px 0;
  border:1px dashed var(--rule-2);background:var(--s-100);color:var(--t-500);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.sec--paper .img-missing{border-color:var(--pap-line-2);background:var(--pap-1);color:var(--i-400)}

/* Yazıya çizilmiş diyagram — kendi koyu zemini var, iki temada da aynı */
.post-fig{margin:38px 0}
.post-fig img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.post-fig figcaption{
  margin-top:12px;padding-left:14px;border-left:2px solid var(--sig);
  font-size:12.8px;line-height:1.6;color:var(--t-400);
}
.sec--paper .post-fig figcaption{color:var(--i-400)}

/* Arşivden aktarılmayı bekleyen ekran görüntüsü.
   "Kırık görsel" gibi değil, bilinçli bir boşluk gibi görünmeli: okuyucu
   neyin eksik olduğunu bilsin ama yazının akışı bozulmasın. */
.shot-missing{
  display:flex;flex-direction:column;gap:7px;margin:30px 0;padding:20px 22px;
  border:1px solid var(--rule);border-left:2px solid var(--rule-3);
  background:var(--s-100);
}
.shot-missing__t{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-500);
}
.shot-missing__d{font-size:13px;line-height:1.6;color:var(--t-400)}
.sec--paper .shot-missing{border-color:var(--pap-line);border-left-color:var(--pap-line-2);background:var(--pap-1)}
.sec--paper .shot-missing__t{color:var(--i-500)}
.sec--paper .shot-missing__d{color:var(--i-400)}

/* ---------------------------------------------------------------------
   26. Akademi
   --------------------------------------------------------------------- */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.course{
  position:relative;overflow:hidden;background:var(--s-200);
  display:flex;flex-direction:column;transition:background .3s var(--ease);
}
.course:hover{background:var(--s-300)}
.course::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-mech);z-index:2}
.course:hover::before{transform:scaleX(1)}
.course__head{padding:30px 26px 24px;border-bottom:1px solid var(--rule-2);position:relative}
.course__ic{width:44px;height:44px;display:grid;place-items:center;margin-bottom:20px;
  border:1px solid var(--rule-2);color:var(--b-400);transition:.28s var(--ease)}
.course:hover .course__ic{border-color:var(--sig);color:var(--sig)}
.course__ic svg{width:21px;height:21px;stroke-width:1.4}
.course__head h3{font-size:19px;color:var(--t-000);margin-bottom:9px;letter-spacing:-.026em}
.course__head p{font-size:13.4px;color:var(--t-300);line-height:1.6}
.course__list{padding:6px 26px 18px;flex:1}
.course__list li a,.course__list li span{
  display:flex;align-items:center;gap:11px;padding:11px 0;font-size:13.4px;color:var(--t-300);
  border-bottom:1px solid var(--rule);transition:color .2s,padding-left .22s var(--ease-mech);
}
.course__list li:last-child a,.course__list li:last-child span{border-bottom:0}
.course__list li a::before,.course__list li span::before{content:"";width:8px;height:1px;flex:none;
  background:var(--rule-3);transition:.22s var(--ease-mech)}
.course__list li a:hover{color:var(--t-000);padding-left:4px}
.course__list li a:hover::before{background:var(--sig);width:13px}
.course__foot{padding:0 26px 24px}
.course__count{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--t-500);
}
@media(max-width:1000px){.courses{grid-template-columns:1fr}}

/* Akordeon */
.acc{border:1px solid var(--rule);background:var(--s-200)}
.acc__item+.acc__item{border-top:1px solid var(--rule)}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:18px;padding:21px 24px;text-align:left;
  font-size:15.5px;font-weight:500;color:var(--t-100);transition:background .22s,color .22s;position:relative;
}
.acc__btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sig);
  transform:scaleY(0);transition:transform .3s var(--ease-mech)}
.acc__btn:hover{background:var(--s-300)}
.acc__btn .n{font-family:var(--f-mono);font-size:11px;color:var(--t-500);flex:none;letter-spacing:.16em;transition:color .24s}
.acc__btn .ch{margin-left:auto;width:24px;height:24px;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule-2);transition:.3s var(--ease)}
.acc__btn .ch svg{width:10px;height:10px;transition:transform .3s var(--ease-mech)}
.acc__item.is-open .acc__btn{color:var(--t-000);background:var(--s-300)}
.acc__item.is-open .acc__btn::before{transform:scaleY(1)}
.acc__item.is-open .acc__btn .n{color:var(--sig)}
.acc__item.is-open .ch{border-color:var(--sig);background:var(--sig);color:#fff}
.acc__item.is-open .ch svg{transform:rotate(180deg)}
.acc__panel{max-height:0;overflow:hidden;transition:max-height .44s var(--ease-out)}
.acc__inner{padding:4px 24px 26px 24px}
.acc__inner p{font-size:14.5px;color:var(--t-300);line-height:1.7;margin-bottom:16px}
.acc__inner ul{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px;border-top:1px solid var(--rule)}
.acc__inner li{font-size:13.4px;color:var(--t-300);padding:11px 0 11px 22px;position:relative;
  border-bottom:1px solid var(--rule);line-height:1.55}
.acc__inner li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--rule-3)}
@media(max-width:700px){.acc__inner ul{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   27. CTA + footer
   --------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--s-000);border-top:1px solid var(--rule)}
.cta::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:linear-gradient(78deg,#000 8%,transparent 52%);
  mask-image:linear-gradient(78deg,#000 8%,transparent 52%);
}
.cta__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(32px,4vw,68px);align-items:center}
.cta h2{font-size:clamp(26px,2.9vw,41px);letter-spacing:-.032em;color:var(--t-000);line-height:1.09}
.cta .lead{margin-top:22px;color:var(--t-300)}
.cta__side{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cta__side a{
  display:flex;align-items:center;gap:18px;padding:22px 24px;background:var(--s-100);
  transition:background .26s var(--ease),padding-left .3s var(--ease-mech);position:relative;
}
.cta__side a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sig);
  transform:scaleY(0);transition:transform .3s var(--ease-mech)}
.cta__side a:hover{background:var(--s-300);padding-left:28px}
.cta__side a:hover::before{transform:scaleY(1)}
.cta__side svg{width:19px;height:19px;color:var(--t-400);flex:none;transition:color .24s}
.cta__side a:hover svg{color:var(--sig)}
.cta__side b{display:block;font-size:16px;font-weight:600;color:var(--t-000);letter-spacing:-.018em}
.cta__side span{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--t-500);margin-top:5px}
@media(max-width:900px){.cta__in{grid-template-columns:1fr}}

.foot{background:var(--s-000);border-top:1px solid var(--rule);padding-top:clamp(58px,6vw,92px);position:relative}
.foot__grid{position:relative;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.25fr;gap:clamp(26px,3vw,48px);padding-bottom:56px}
.foot__brand img{height:42px;margin-bottom:24px}
.foot__brand p{font-size:13.8px;color:var(--t-300);line-height:1.72;max-width:38ch}
.foot__social{display:flex;gap:0;margin-top:26px;border:1px solid var(--rule);width:max-content}
.foot__social a{
  width:40px;height:40px;display:grid;place-items:center;color:var(--t-400);
  border-right:1px solid var(--rule);transition:.22s var(--ease);
}
.foot__social a:last-child{border-right:0}
.foot__social a:hover{color:var(--sig);background:var(--s-100)}
.foot__social svg{width:15px;height:15px}
.foot h5{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--t-500);margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.foot ul li{margin-bottom:0}
.foot ul a{font-size:13.6px;color:var(--t-300);transition:color .18s,padding-left .2s var(--ease-mech);
  display:block;padding:8px 0}
.foot ul a:hover{color:var(--t-000);padding-left:5px}
.foot__contact li{display:flex;gap:13px;font-size:13.6px;color:var(--t-300);line-height:1.6;margin-bottom:18px}
.foot__contact svg{width:15px;height:15px;color:var(--t-500);flex:none;margin-top:4px}
.foot__contact a:hover{color:var(--sig)}
.foot__bar{position:relative;border-top:1px solid var(--rule);padding-block:24px;
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.foot__bar p{font-size:12px;color:var(--t-500)}
.foot__bar nav{display:flex;flex-wrap:wrap;gap:24px;padding-right:64px}
.foot__bar a{font-size:12px;color:var(--t-500);transition:color .18s}
.foot__bar a:hover{color:var(--sig)}
@media(max-width:1000px){.foot__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr}.foot__bar nav{padding-right:0}}

/* ---------------------------------------------------------------------
   28. Ürün anlatımı + konsol
   --------------------------------------------------------------------- */
.mp{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,4vw,66px);align-items:center}
@media(max-width:1000px){.mp{grid-template-columns:1fr}}
.mp__badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--rule-2);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-400);margin-bottom:24px;
}
.mp__badge i{width:6px;height:6px;background:var(--ok);animation:blip 2.4s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.mp__mods{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:32px}
.mp__mods li{background:var(--s-200);padding:16px 18px;transition:background .24s}
.mp__mods li:hover{background:var(--s-300)}
.mp__mods b{display:block;font-family:var(--f-mono);font-size:12.5px;color:var(--b-300);letter-spacing:.03em}
.mp__mods span{display:block;font-size:12.5px;color:var(--t-500);margin-top:5px}
@media(max-width:520px){.mp__mods{grid-template-columns:1fr}}

.console{
  background:#070B12;border:1px solid var(--rule-2);overflow:hidden;
  font-family:var(--f-mono);font-size:12px;box-shadow:var(--sh-2);
}
.console__bar{height:5px;display:flex;gap:2px}
.console__bar i{flex:1;background:var(--ok)}
.console__bar i.w{background:var(--warn)}
.console__bar i.n{background:var(--rule-2)}
.console__top{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--rule-2);color:var(--t-500)}
.console__top b{color:var(--t-100);font-weight:500;font-size:12.5px}
.console__top .sp{margin-left:auto;font-size:11px}
.console__grid{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--rule-2)}
.console__kpi{padding:14px 15px;border-left:1px solid var(--rule-2)}
.console__kpi:first-child{border-left:0}
.console__kpi span{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-500)}
.console__kpi b{display:block;font-size:23px;color:var(--t-100);font-weight:500;margin-top:6px;font-variant-numeric:tabular-nums}
.console__kpi b.crit{color:var(--crit)}
.console__kpi b.warn{color:var(--warn)}
.console table{width:100%;border-collapse:collapse}
.console th{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-500);font-weight:500;
  text-align:left;padding:10px 15px;border-bottom:1px solid var(--rule-2)}
.console td{padding:0 15px;height:30px;color:var(--t-200);border-bottom:1px solid rgba(30,42,59,.6);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.console tr:last-child td{border-bottom:0}
.console tbody tr{transition:background .2s}
.console tbody tr:hover{background:var(--s-200)}
.console .sev{display:inline-flex;align-items:center;gap:8px}
.console .sev::before{content:"";width:6px;height:6px;flex:none}
.console .sev.c::before{background:var(--crit)}
.console .sev.h::before{background:#E2894F}
.console .sev.m::before{background:var(--warn)}
.console .sev.l::before{background:var(--t-500)}
.console .ui{font-family:var(--f-ui);color:var(--t-500);font-size:11.5px}
.console__foot{display:flex;align-items:center;gap:16px;padding:10px 15px;border-top:1px solid var(--rule-2);
  color:var(--t-500);font-size:10px;letter-spacing:.1em}
.console__foot .ok{color:var(--ok)}
.seal{display:inline-flex;gap:2px;vertical-align:-1px}
.seal i{width:7px;height:9px;border:1px solid var(--ok);background:var(--ok)}
.seal i.e{background:transparent;border-color:var(--t-500)}
@media(max-width:980px){.console__grid{grid-template-columns:repeat(2,1fr)}
  .console__kpi:nth-child(3){border-left:0}.console__kpi:nth-child(n+3){border-top:1px solid var(--rule-2)}}
@media(max-width:560px){.console{font-size:11px}
  .console td,.console th{padding-inline:10px;white-space:normal}
  .console td:last-child,.console th:last-child{text-align:right}
  .hide-sm{display:none}.console__kpi b{font-size:18px}}

/* Yığın diyagramı yardımcıları (art.py) */
.stk__no,.stk__lb{font-family:var(--f-mono)}

/* ---------------------------------------------------------------------
   29. Logo duvarı ve marka şeritleri
   --------------------------------------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.logo{background:var(--s-200);position:relative;transition:background .28s var(--ease)}
.logo::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;
  border-left:2px solid var(--sig);border-top:2px solid var(--sig);
  opacity:0;transform:translate(-3px,-3px);transition:.28s var(--ease-mech);z-index:2}
.logo:hover{background:var(--s-300)}
.logo:hover::before{opacity:1;transform:none}
.logo__in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:126px;padding:22px 18px;text-align:center;height:100%}
.logo:not(.logo--img) .logo__in img{max-height:46px;width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1) brightness(1.8) contrast(.85);opacity:.72;
  transition:filter .4s var(--ease),opacity .4s var(--ease)}
.logo:not(.logo--img):hover .logo__in img{filter:none;opacity:1}
.logo__mark{
  display:grid;place-items:center;width:42px;height:42px;flex:none;
  border:1px solid var(--rule-2);color:var(--t-400);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
  transition:.3s var(--ease);
}
.logo:hover .logo__mark{border-color:var(--sig);color:var(--sig)}
.logo__word{
  font-family:var(--f-display);font-size:14px;font-weight:600;letter-spacing:-.018em;
  color:var(--t-200);line-height:1.3;transition:color .28s;
}
.logo:hover .logo__word{color:var(--t-000)}
.logo__tag{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-500)}
.logo--ph{background:var(--s-100)}
.logo--ph::before{display:none}
.logo--ph .logo__word{color:var(--t-500);font-family:var(--f-mono);font-size:10px;
  letter-spacing:.18em;font-weight:400}
@media(max-width:1000px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.logos{grid-template-columns:repeat(2,1fr)}}

/* Kayan marka şeridi hücresi */
.tlogo{display:inline-flex;align-items:center;gap:11px;padding:15px 26px;
  border-right:1px solid var(--rule);white-space:nowrap;transition:.24s var(--ease)}
.tlogo i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;flex:none;
  border:1px solid var(--rule-2);color:var(--t-500);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;transition:.24s var(--ease)}
.tlogo b{font-family:var(--f-display);font-size:14px;font-weight:600;letter-spacing:-.014em;
  color:var(--t-400);transition:color .24s}
.tlogo img{max-height:24px;width:auto;filter:grayscale(1) brightness(1.7);opacity:.6;transition:.3s}
.tlogo:hover i{border-color:var(--sig);color:var(--sig)}
.tlogo:hover b{color:var(--t-100)}
.tlogo:hover img{filter:none;opacity:1}

/* ---------------------------------------------------------------------
   30. Yetkinlik haritası
   --------------------------------------------------------------------- */
.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.skill{background:var(--s-200);padding:28px 26px;transition:background .3s var(--ease)}
.skill:hover{background:var(--s-300)}
.skill__h{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--rule-2)}
.skill__h .ic{width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule-2);color:var(--b-400);transition:.28s var(--ease)}
.skill:hover .skill__h .ic{border-color:var(--sig);color:var(--sig)}
.skill__h .ic svg{width:19px;height:19px;stroke-width:1.4}
.skill__h h4{font-size:16px;color:var(--t-000);letter-spacing:-.022em}
.skill li{display:grid;grid-template-columns:minmax(0,1fr) 92px 34px;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.skill li:last-child{border-bottom:0}
.skill__t{font-size:13.4px;color:var(--t-300);line-height:1.45}
.skill__bar{height:3px;background:var(--rule-2);overflow:hidden;display:block}
.skill__bar i{display:block;height:100%;background:var(--b-500);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-mech) .15s}
.skill.in .skill__bar i,[data-anim].in .skill__bar i{transform:scaleX(var(--v,1))}
.skill:hover .skill__bar i{background:var(--sig)}
.skill__v{font-size:10.5px;color:var(--t-500);text-align:right;letter-spacing:.06em}
@media(max-width:900px){.skills{grid-template-columns:1fr}}
@media(max-width:520px){.skill li{grid-template-columns:minmax(0,1fr) 60px 30px;gap:10px}}

/* Kurumsal açılır menü */
.mega--sub{grid-template-columns:repeat(2,1fr);width:min(92vw,660px)}
.mega--sub>a{background:var(--s-100);padding:16px 20px;align-items:flex-start}
.mega--sub>a:hover{background:var(--s-200);padding-left:20px}
.mega--sub a::before{display:none}
.mega--sub b{display:block;font-size:14.5px;color:var(--t-100);font-weight:600}
.mega--sub span span{display:block;font-size:12.5px;color:var(--t-500);line-height:1.5;margin-top:3px}

/* =====================================================================
   31. Arka plan hareketi — ölçülü, dikkat dağıtmayan
   ===================================================================== */
/* Koyu bölümlerde çok yavaş kayan pafta karesi. 96px'lik bir çevrimde
   başa döndüğü için dikiş görünmez. */
.sec--deep::after,
.sec--ink-2::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:96px 96px;opacity:.34;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 78% 12%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 78% 62% at 78% 12%,#000,transparent 72%);
  animation:bgDrift 44s linear infinite;
}
.sec--deep>*,.sec--ink-2>*{position:relative;z-index:1}
@keyframes bgDrift{to{background-position:96px 96px}}

/* Hero: ızgaranın üzerinden geçen çok soluk tarama */
.hero__scan{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.hero__scan i{
  position:absolute;top:-30%;left:-40%;width:52%;height:170%;
  background:linear-gradient(105deg,transparent,rgba(79,184,242,.055) 44%,transparent);
  transform:skewX(-14deg);animation:heroScan 13s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes heroScan{0%{left:-45%}55%,100%{left:118%}}

/* CTA bandında yavaş nefes alan ışık */
.cta::after{
  content:"";position:absolute;right:-14%;bottom:-46%;width:64%;height:150%;pointer-events:none;
  background:radial-gradient(circle,rgba(2,130,205,.15),transparent 62%);
  animation:ctaBreathe 11s ease-in-out infinite;
}
@keyframes ctaBreathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.cta__in{z-index:2}

@media(prefers-reduced-motion:reduce){
  .sec--deep::after,.sec--ink-2::after,.hero__scan i,.cta::after{animation:none!important}
}

/* =====================================================================
   32. Grid ve geçiş rötuşları
   ===================================================================== */
/* Hücre gridlerinde dış çerçeve köşe işaretleri — paftaya oturma hissi */
.gcards,.sols,.why,.certs,.sla,.tech,.svc,.posts,.logos,.skills,.sectors,.fam{
  position:relative;
}
.gcards::before,.sols::before,.why::before,.certs::before,.sla::before,
.tech::before,.svc::before,.posts::before,.logos::before,.skills::before,
.sectors::before,.fam::before,
.gcards::after,.sols::after,.why::after,.certs::after,.sla::after,
.tech::after,.svc::after,.posts::after,.logos::after,.skills::after,
.sectors::after,.fam::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;z-index:3;
  border-color:var(--rule-3);border-style:solid;border-width:0;
}
.gcards::before,.sols::before,.why::before,.certs::before,.sla::before,
.tech::before,.svc::before,.posts::before,.logos::before,.skills::before,
.sectors::before,.fam::before{
  left:-1px;top:-1px;border-left-width:1px;border-top-width:1px;
}
.gcards::after,.sols::after,.why::after,.certs::after,.sla::after,
.tech::after,.svc::after,.posts::after,.logos::after,.skills::after,
.sectors::after,.fam::after{
  right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px;
}

/* Hücre içi ince üst ışık — düz yüzeye derinlik katar, gradyan kutu değil */
.gcard,.hubcard,.sol,.why li,.svc a,.post,.skill,.tgrp,.cert,.sla__card,.logo{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022);
}

/* Girişte hücreler soldan kesilerek açılır (data-stagger yoksa da) */
.gcards>*,.sols>*,.why>*,.svc>*,.posts>*,.skills>*,.sectors>*,.logos>*{
  will-change:clip-path,opacity;
}

/* Bağlantı ve düğmelerde tutarlı odak halkası */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--sig);outline-offset:2px;
}

/* Yatay kaydırma gereken her yerde ince kaydırma çubuğu */
.tbl-wrap,.prose pre,.prose table{scrollbar-width:thin;scrollbar-color:var(--rule-3) transparent}
.tbl-wrap::-webkit-scrollbar,.prose pre::-webkit-scrollbar{height:8px}
.tbl-wrap::-webkit-scrollbar-thumb,.prose pre::-webkit-scrollbar-thumb{background:var(--rule-2)}
.tbl-wrap::-webkit-scrollbar-thumb:hover,.prose pre::-webkit-scrollbar-thumb:hover{background:var(--rule-3)}

/* Kurumsal açılır menü — mobil */
@media(max-width:1180px){
  .nav__menu.is-mobile .mega--sub,
  .nav__menu.is-mobile>li.is-open .mega--sub,
  .nav__menu.is-mobile>li.is-open .mega{
    grid-template-columns:1fr;width:100%;gap:0;background:none;transform:none;left:auto}
  .nav__menu.is-mobile .mega--sub>a{background:none;padding:13px 0;border-bottom:1px solid var(--rule)}
  .nav__menu.is-mobile .mega--sub>a:last-child{border-bottom:0}
  .nav__menu.is-mobile .mega--sub>a:hover{background:none;padding-left:4px}
}

/* Çözüm hücresi — sıra numarası ve durum rozeti */
.sol__no{
  position:absolute;left:26px;top:20px;font-size:10.5px;letter-spacing:.18em;color:var(--t-500);
  transition:color .28s var(--ease);
}
.sol:hover .sol__no{color:var(--sig)}
.sol__state{
  position:absolute;right:22px;top:18px;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 9px;border:1px solid var(--rule-2);color:var(--t-400);
}
.sol__state--dev{border-color:rgba(53,192,124,.4);color:var(--ok)}
.sol__state--soon{border-color:var(--rule-2);color:var(--t-500)}
.sol{padding-top:52px}

/* =====================================================================
   33. Yedi aşamalı süreç panosu (ana sayfa)
   ===================================================================== */
.flow7{
  position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);padding-top:2px;
}
/* Panonun üstünde soldan sağa dolan ray */
.flow7__rail{position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule-2);z-index:2;overflow:hidden}
.flow7__rail i{display:block;width:100%;height:100%;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--ease-out) .15s}
.flow7.in .flow7__rail i{transform:scaleX(1)}

.fstep{
  position:relative;background:var(--s-200);padding:30px 20px 24px;
  display:flex;flex-direction:column;gap:9px;
  transition:background .3s var(--ease);
}
.fstep:hover{background:var(--s-300)}
.fstep__no{font-size:10.5px;letter-spacing:.18em;color:var(--t-500);transition:color .28s var(--ease)}
.fstep:hover .fstep__no{color:var(--sig)}
/* Rayın üzerine oturan düğüm */
.fstep__node{
  position:absolute;left:20px;top:-5px;width:8px;height:8px;background:var(--s-050);
  border:1px solid var(--rule-3);transform:rotate(45deg);z-index:3;
  transition:background .3s var(--ease-mech),border-color .3s var(--ease-mech),transform .3s var(--ease-mech);
}
.flow7.in .fstep__node{background:var(--sig);border-color:var(--sig)}
.flow7.in .fstep:nth-child(2) .fstep__node{transition-delay:.25s}
.flow7.in .fstep:nth-child(3) .fstep__node{transition-delay:.53s}
.flow7.in .fstep:nth-child(4) .fstep__node{transition-delay:.81s}
.flow7.in .fstep:nth-child(5) .fstep__node{transition-delay:1.09s}
.flow7.in .fstep:nth-child(6) .fstep__node{transition-delay:1.37s}
.flow7.in .fstep:nth-child(7) .fstep__node{transition-delay:1.65s}
.flow7.in .fstep:nth-child(8) .fstep__node{transition-delay:1.93s}
.fstep:hover .fstep__node{transform:rotate(45deg) scale(1.45)}
.fstep h4{font-size:16px;color:var(--t-000);letter-spacing:-.022em;line-height:1.24}
.fstep p{font-size:12.8px;color:var(--t-300);line-height:1.55;flex:1}
.fstep__out{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-2);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;line-height:1.5;color:var(--t-500);
  transition:color .28s var(--ease);
}
.fstep:hover .fstep__out{color:var(--t-200)}
/* İki aşama arasındaki yön oku */
.fstep::after{
  content:"";position:absolute;right:-5px;top:50%;width:8px;height:8px;z-index:3;
  border-right:1px solid var(--rule-3);border-top:1px solid var(--rule-3);
  transform:translateY(-50%) rotate(45deg);background:var(--s-200);
  transition:border-color .3s var(--ease);
}
.fstep:last-child::after{display:none}
.fstep:hover::after{border-color:var(--sig)}
@media(max-width:1240px){
  .flow7{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fstep:nth-child(5)::after{display:none}
}
@media(max-width:820px){
  .flow7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fstep::after{display:none}
}
@media(max-width:520px){.flow7{grid-template-columns:1fr}}

/* =====================================================================
   34. Footer hareketi — ölçülü
   ===================================================================== */
.foot{overflow:hidden}
/* Üst kenarda yavaşça geçen durum darbesi */
.foot__pulse{
  position:absolute;left:0;right:0;top:0;height:1px;overflow:hidden;z-index:2;pointer-events:none;
}
.foot__pulse i{
  position:absolute;top:0;left:-28%;width:28%;height:100%;
  background:linear-gradient(90deg,transparent,var(--sig),transparent);
  animation:footPulse 9s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes footPulse{0%{left:-28%}62%,100%{left:100%}}

/* Arka planda çok soluk kelime markası — kaydırmayla hafifçe kayar */
.foot__mark{
  position:absolute;right:-2.2%;bottom:-4%;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--f-display);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(120px,17vw,260px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px var(--rule);
  opacity:.5;animation:footMark 26s ease-in-out infinite;
}
@keyframes footMark{0%,100%{transform:translateX(0)}50%{transform:translateX(-22px)}}
.foot .wrap{position:relative;z-index:1}

/* Sütunlar görünürken kademeli açılır */
.foot__grid[data-stagger]>*{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.foot__grid[data-stagger].in>*{opacity:1;transform:none}

/* Bağlantı üzerinde ince kılavuz çizgisi */
.foot ul a{position:relative}
.foot ul a::before{
  content:"";position:absolute;left:-12px;top:50%;width:0;height:1px;background:var(--sig);
  transform:translateY(-50%);transition:width .26s var(--ease-mech);
}
.foot ul a:hover::before{width:8px}

@media(prefers-reduced-motion:reduce){
  .foot__pulse i,.foot__mark{animation:none!important}
  .foot__mark{transform:none!important}
}

/* =====================================================================
   35. Açık tema
   Yalnızca token'lar yeniden tanımlanır; bileşenlerin hiçbiri
   değişmediği için kontrast düzeni ve yerleşim korunur.
   ===================================================================== */
:root[data-theme="light"]{
  color-scheme:light;

  --s-000:#E9EDF2;   /* en dip: üst bar, footer, CTA */
  --s-050:#F4F6F9;   /* sayfa zemini */
  --s-100:#ECF0F4;   /* alternatif bölüm */
  --s-200:#FFFFFF;   /* hücre */
  --s-300:#F3F7FA;   /* hücre — hover */
  --s-400:#E4EAF0;

  --rule:#DCE3EA;
  --rule-2:#C3CFDB;
  --rule-3:#9FB0C0;

  /* Mavi: açık zeminde koyulaşır */
  --b-900:#012F4D; --b-800:#013F68; --b-700:#01568C;
  --b-600:#016CAF; --b-500:#0180CE; --b-400:#0A6DAA; --b-300:#014E80;
  --b-wash:rgba(1,108,175,.09);

  --t-000:#0A121B;
  --t-100:#152029;
  --t-200:#2B3945;
  --t-300:#414E59;
  --t-400:#4F5B67;
  --t-500:#5A6672;

  /* İmza kırmızısı açık zeminde koyulaşır (AA) */
  --sig:#B32F1B;
  --sig-d:#8F2413;
  --ok:#17754A;

  /* İkinci malzeme: koyu grafit yerine sıcak kum */
  --pap-0:#EDEAE3;
  --pap-1:#E3DFD5;
  --pap-2:#FBFAF7;
  --pap-line:#D6D0C4;
  --pap-line-2:#BEB7A8;
  --pap-blue:rgba(24,64,110,.09);
  --i-900:#14181C;
  --i-700:#333B43;
  --i-600:#454F59;
  --i-400:#5D666F;

  --sh-1:0 1px 2px rgba(16,32,48,.05), 0 14px 32px -26px rgba(16,32,48,.35);
  --sh-2:0 24px 60px -36px rgba(16,32,48,.4);
}

/* Navigasyon açık zeminde saydamlık */
:root[data-theme="light"] .nav{background:rgba(244,246,249,.86)}
:root[data-theme="light"] .nav.is-stuck{background:rgba(244,246,249,.98)}
@media(max-width:1180px){
  :root[data-theme="light"] .nav,
  :root[data-theme="light"] .nav.is-stuck{background:var(--s-050)}
  :root[data-theme="light"] .nav__menu.is-mobile{background:var(--s-050)}
}

/* Hücre içi üst ışık koyu zemine göre ayarlıydı; açıkta ters çevrilir */
:root[data-theme="light"] .gcard,
:root[data-theme="light"] .sol,
:root[data-theme="light"] .why li,
:root[data-theme="light"] .svc a,
:root[data-theme="light"] .post,
:root[data-theme="light"] .skill,
:root[data-theme="light"] .tgrp,
:root[data-theme="light"] .cert,
:root[data-theme="light"] .sla__card,
:root[data-theme="light"] .logo,
:root[data-theme="light"] .fstep{box-shadow:inset 0 1px 0 rgba(16,32,48,.03)}

/* Teknik diyagramlar koyu tasarlandı: açık temada koyu bir levhaya oturur */
:root[data-theme="light"] .phero__art,
:root[data-theme="light"] .slide__art,
:root[data-theme="light"] .mp>div:last-child{
  background:#0A0F17;border:1px solid #1E2A3B;padding:clamp(14px,1.6vw,24px);
}
:root[data-theme="light"] .rings__badge span{color:#7B8FA8}

/* Hero: açık zeminde ızgara ve tarama yumuşar */
:root[data-theme="light"] .hero{background:var(--s-000)}
:root[data-theme="light"] .hero::before{opacity:.5}
:root[data-theme="light"] .hero__bg canvas{opacity:.22}
:root[data-theme="light"] .hero__scan i{background:linear-gradient(105deg,transparent,rgba(1,108,175,.05) 44%,transparent)}
:root[data-theme="light"] .hero::after{background:radial-gradient(ellipse 60% 70% at 78% 24%,rgba(1,108,175,.09),transparent 62%)}

/* Şerit ve gölge maskeleri */
:root[data-theme="light"] .ticker::before{background:linear-gradient(90deg,var(--s-000),transparent)}
:root[data-theme="light"] .ticker::after{background:linear-gradient(-90deg,var(--s-000),transparent)}

/* Belge küçük resimleri: açıkta doğal renk, gri filtre gerekmez */
:root[data-theme="light"] .cert__shot img{filter:grayscale(.55) contrast(1.02)}
:root[data-theme="light"] .cert__shot::after{
  background:linear-gradient(180deg,rgba(20,28,38,0) 46%,rgba(20,28,38,.82) 92%);
}
:root[data-theme="light"] .logo:not(.logo--img) .logo__in img{filter:grayscale(1) contrast(.9);opacity:.6}
:root[data-theme="light"] .logo:not(.logo--img):hover .logo__in img{filter:none;opacity:1}
:root[data-theme="light"] .tlogo img{filter:grayscale(1);opacity:.55}

/* Footer kelime markası açıkta fazla belirmesin */
:root[data-theme="light"] .foot__mark{-webkit-text-stroke-color:var(--rule-2);opacity:.75}

/* Formlarda beyaz alan */
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea{background:#fff}
:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field select:focus,
:root[data-theme="light"] .field textarea:focus{background:#fff}
:root[data-theme="light"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2368757F' stroke-width='1.6'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
}

/* Harita açık temada ters çevrilmez */
:root[data-theme="light"] .map iframe{filter:grayscale(.7) contrast(.95)}
:root[data-theme="light"] .map:hover iframe{filter:grayscale(0) contrast(1)}

/* Kod blokları her iki temada da koyu kalır — okunurluk için */
:root[data-theme="light"] .prose pre{background:#0A0F17;color:#C6D3E2;border-color:#1E2A3B}

/* ---------- Tema anahtarı ---------- */
.themetog{
  display:inline-flex;align-items:center;gap:0;border:1px solid var(--rule-2);
  height:26px;overflow:hidden;
}
.themetog button{
  width:30px;height:100%;display:grid;place-items:center;color:var(--t-500);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.themetog button+button{border-left:1px solid var(--rule-2)}
.themetog button svg{width:13px;height:13px;stroke-width:1.6;fill:none;stroke:currentColor}
.themetog button:hover{color:var(--t-100)}
.themetog button[aria-pressed="true"]{background:var(--s-300);color:var(--sig)}
:root[data-theme="light"] .themetog button[aria-pressed="true"]{background:var(--s-400)}

/* Temaya göre logo */
.brand__light{display:none}
:root[data-theme="light"] .brand__dark{display:none}
:root[data-theme="light"] .brand__light{display:block}

/* Kanıt konsolu her iki temada da koyu terminaldir; token'lardan bağımsız
   kendi renk setini taşır ki açık temada okunmaz hâle gelmesin. */
.console{--c-txt:#C6D3E2;--c-dim:#8497AE;--c-line:#243244;color:var(--c-txt)}
.console__top{color:var(--c-dim);border-bottom-color:var(--c-line)}
.console__top b{color:#E9EFF6}
.console__grid,.console__kpi{border-color:var(--c-line)}
.console__kpi span{color:var(--c-dim)}
.console__kpi b{color:#E9EFF6}
.console th{color:var(--c-dim);border-bottom-color:var(--c-line)}
.console td{color:var(--c-txt);border-bottom-color:rgba(36,50,68,.7)}
.console .ui{color:var(--c-dim)}
.console__foot{color:var(--c-dim);border-top-color:var(--c-line)}
.console__bar i.n{background:var(--c-line)}
.console tbody tr:hover{background:rgba(66,178,239,.08)}
.console .sev.l::before{background:var(--c-dim)}
.console__foot .ok,.console .seal i{--ok:#35C07C}
.console__foot .ok{color:#35C07C}
.console .seal i{border-color:#35C07C;background:#35C07C}
.console .seal i.e{background:transparent;border-color:var(--c-dim)}

/* =====================================================================
   36. Güvenlik haber akışı
   ===================================================================== */
.newsbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
  border:1px solid var(--rule);border-bottom:0;background:var(--s-100);
}
.newsbar>*{padding:13px 20px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t-500);
  border-right:1px solid var(--rule)}
.newsbar__live{display:inline-flex;align-items:center;gap:10px;color:var(--sig)}
.newsbar__live i{width:7px;height:7px;background:var(--sig);flex:none;animation:newsBlip 2.2s ease-in-out infinite}
@keyframes newsBlip{0%,100%{opacity:1}50%{opacity:.25}}
.newsbar__time{margin-left:auto;border-right:0;color:var(--t-400)}
@media(max-width:640px){.newsbar__time{margin-left:0;width:100%;border-top:1px solid var(--rule)}}

.newslist{border:1px solid var(--rule);border-top:1px solid var(--rule)}
.news{border-bottom:1px solid var(--rule);opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.newslist.in .news{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 45ms)}
.news:last-child{border-bottom:0}
.news__in{
  display:grid;grid-template-columns:62px minmax(0,1fr) 178px;align-items:start;gap:24px;
  padding:22px 20px 22px 0;position:relative;transition:background .28s var(--ease),padding-left .3s var(--ease-mech);
}
.news__in::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sig);
  transform:scaleY(0);transform-origin:center;transition:transform .32s var(--ease-mech)}
.news__in:hover{background:var(--s-100);padding-left:18px}
.news__in:hover::before{transform:scaleY(1)}
.news__no{padding-left:20px;font-size:11px;letter-spacing:.12em;color:var(--t-500);transition:color .26s}
.news__in:hover .news__no{color:var(--sig)}
.news__body h3{font-size:clamp(16px,1.4vw,19px);line-height:1.34;color:var(--t-100);
  letter-spacing:-.022em;transition:color .24s}
.news__in:hover .news__body h3{color:var(--t-000)}
.news__body p{font-size:13.2px;color:var(--t-400);line-height:1.6;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.newsorig{
  margin:0 0 -1px;padding:12px 20px;border:1px solid var(--rule);border-bottom:0;
  background:var(--s-050);font-size:12.4px;line-height:1.55;color:var(--t-400);
}
.newsorig::before{
  content:"EN";float:left;margin:1px 12px 0 0;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.16em;color:var(--sig);border:1px solid var(--rule-2);padding:3px 7px;
}
.news__meta{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right;
  font-size:10.5px;letter-spacing:.1em;color:var(--t-500)}
.news__meta em{font-style:normal;color:var(--t-300)}
.news__go{color:var(--t-500);transition:color .24s;text-transform:uppercase}
.news__in:hover .news__go{color:var(--sig)}
@media(max-width:960px){
  .news__in{grid-template-columns:48px minmax(0,1fr);gap:16px}
  .news__meta{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center;text-align:left;margin-top:10px}
}
@media(max-width:560px){.news__in{grid-template-columns:1fr;padding-left:20px}.news__no{display:none}}

.newsstate,.newsfail,.newsempty{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-500);border:1px solid var(--rule);padding:40px;text-align:center;
}
.newsfail .tlink,.newsfail a{margin-left:12px}

/* Yan menü — mini haber listesi */
.side-widget--news .newslist{border:0}
.newslist--mini li{padding:12px 0;border-bottom:1px solid var(--rule)}
.newslist--mini li:last-child{border-bottom:0}
.newslist--mini a{font-size:13.2px;line-height:1.45;color:var(--t-200);transition:color .2s;display:block}
.newslist--mini a:hover{color:var(--sig)}
.newslist--mini span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--t-500);margin-top:6px;text-transform:uppercase}
.newsfoot{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-2)}

/* =====================================================================
   37. Bülten aboneliği
   ===================================================================== */
.sub__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(34px,4.4vw,72px);align-items:start}
@media(max-width:960px){.sub__in{grid-template-columns:1fr}}
.sub__feats{margin-top:32px;border-top:1px solid var(--rule)}
.sub__feats li{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.sub__feats .ic{width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule-2);color:var(--b-400)}
.sub__feats .ic svg{width:17px;height:17px;stroke-width:1.4}
.sub__feats b{display:block;font-size:14.5px;color:var(--t-000);font-weight:600;letter-spacing:-.016em}
.sub__feats span span{display:block;font-size:12.8px;color:var(--t-400);margin-top:3px}

.sub__form{background:var(--s-200);border:1px solid var(--rule);padding:clamp(26px,2.8vw,38px);position:relative}
.sub__form::before{content:"";position:absolute;left:-1px;top:-1px;width:12px;height:12px;
  border-left:2px solid var(--sig);border-top:2px solid var(--sig)}
.sub__opts{border:0;padding:0;margin:22px 0 4px;min-width:0}
.sub__opts legend{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-400);padding:0 0 12px}
.sub__opts{display:flex;flex-wrap:wrap;gap:0}
.sub__opts legend{width:100%}
.sub__opts label{
  display:inline-flex;align-items:center;gap:9px;padding:10px 15px;cursor:pointer;
  border:1px solid var(--rule-2);margin:0 -1px -1px 0;font-size:13px;color:var(--t-300);
  transition:.22s var(--ease);
}
.sub__opts label:hover{color:var(--t-000);background:var(--s-300)}
.sub__opts input{accent-color:var(--sig);width:15px;height:15px}
.sub__opts input:checked+span{color:var(--t-000)}
.sub__opts label:has(input:checked){border-color:var(--sig);z-index:1}
.sub__form .check{margin-top:22px}
.sub__foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:24px;
  padding-top:22px;border-top:1px solid var(--rule)}
.sub__note{font-size:12.2px;color:var(--t-500);line-height:1.55;max-width:34ch}
.sub__msg{margin-top:16px;font-size:13.4px;line-height:1.55;min-height:1px}
.sub__msg.is-ok{color:var(--ok)}
.sub__msg.is-err{color:var(--sig)}


/* =====================================================================
   36. Referans logo duvarı — maskeli siluet + hover'da gerçek renk
   Boştaki durum tek renk siluettir (maske + currentColor mantığı), bu
   yüzden koyu ve açık temada aynı ağırlıkta okunur. Fare üzerine
   geldiğinde siluet sönerken markanın kendi renkli görseli belirir.
   ===================================================================== */
.logos--brand{grid-template-columns:repeat(5,1fr)}
.logo--img{overflow:hidden}
.logo--img .logo__in{gap:0;min-height:142px;padding:26px 20px 36px}
.logo__img{position:relative;display:block;width:100%;max-width:170px;aspect-ratio:3/1}
.logo__img::before{
  content:"";position:absolute;inset:0;background:var(--t-300);opacity:.55;
  -webkit-mask-image:var(--mk);mask-image:var(--mk);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:opacity .34s var(--ease),transform .55s var(--ease-mech),background-color .3s var(--ease);
}
.logo__img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.97);filter:none;
  transition:opacity .34s var(--ease),transform .55s var(--ease-mech);
}
.logo__name{
  position:absolute;left:14px;right:14px;bottom:14px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-500);opacity:0;transform:translateY(6px);pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s var(--ease),transform .38s var(--ease-mech),color .3s var(--ease);
}
/* Alt kenarda imza rengiyle açılan çizgi */
.logo--img::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sig);
  transform:scaleX(0);transform-origin:left center;z-index:2;
  transition:transform .5s var(--ease-mech);
}
.logo--img:hover .logo__img::before,
.logo--img:focus-within .logo__img::before{opacity:0;transform:scale(1.055)}
.logo--img:hover .logo__img img,
.logo--img:focus-within .logo__img img{opacity:1;transform:scale(1.055)}
.logo--img:hover .logo__name,
.logo--img:focus-within .logo__name{opacity:1;transform:none;color:var(--t-400)}
.logo--img:hover::after,
.logo--img:focus-within::after{transform:scaleX(1)}

/* Maske kaynakları (yol CSS dosyasına görelidir) */
.logo--saglik .logo__img::before{--mk:url(../img/ref/saglik-bakanligi-mask.webp)}
.logo--tika .logo__img::before{--mk:url(../img/ref/tika-mask.webp)}
.logo--turktarim .logo__img::before{--mk:url(../img/ref/turk-tarim-mask.webp)}
.logo--turkcell .logo__img::before{--mk:url(../img/ref/turkcell-mask.webp)}
.logo--turkloydu .logo__img::before{--mk:url(../img/ref/turk-loydu-mask.webp)}
.logo--destekpatent .logo__img::before{--mk:url(../img/ref/destek-patent-mask.webp)}
.logo--karen .logo__img::before{--mk:url(../img/ref/karen-mask.webp)}
.logo--kuzu .logo__img::before{--mk:url(../img/ref/kuzu-mask.webp)}
.logo--swift .logo__img::before{--mk:url(../img/ref/swift-umzug-mask.webp)}
.logo--turna .logo__img::before{--mk:url(../img/ref/turna-mask.webp)}

/* Maske desteklemeyen tarayıcı: doğrudan gri görsel, hover'da renk */
@supports not ((-webkit-mask-image:url(a.webp)) or (mask-image:url(a.webp))){
  .logo__img::before{display:none}
  .logo__img img{opacity:.6;filter:grayscale(1) contrast(.92)}
  :root:not([data-theme="light"]) .logo__img img{filter:grayscale(1) brightness(1.75) contrast(.85)}
  .logo--img:hover .logo__img img{opacity:1;filter:none}
}

@media(max-width:1000px){.logos--brand{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){
  .logos--brand{grid-template-columns:repeat(2,1fr)}
  .logo--img .logo__in{min-height:118px;padding:22px 16px 32px}
  .logo__name{font-size:8.4px;letter-spacing:.13em;bottom:11px}
}

/* Dokunmatik: hover yok, renkli hâl kalıcı gösterilir */
@media(hover:none){
  .logo__img::before{opacity:0}
  .logo__img img{opacity:1;transform:none}
  .logo__name{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .logo__img::before,.logo__img img,.logo__name,.logo--img::after{transition-duration:.01ms!important}
  .logo--img:hover .logo__img::before{transform:none}
  .logo--img:hover .logo__img img{transform:none}
}