@charset "utf-8";
/* ==========================================================================
   Debian Bilgi Teknolojileri — tasarım sistemi
   Marka: lacivert #1D2F55 · yeşil #80CC28 · turkuaz #4E9E93
   ========================================================================== */

/* ---------- 1. Fontlar (self-hosted, üçüncü parti istek yok) ------------- */
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/inter-subset.1db5f3d6d4.woff2) format("woff2-variations")}
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/inter-cyrillic-wght-normal.71d5ee93cc.woff2) format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/inter-cyrillic-ext-wght-normal.ca15706333.woff2) format("woff2-variations");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

@font-face{font-family:Manrope;font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/manrope-subset.7a0cd16b9e.woff2) format("woff2-variations")}
@font-face{font-family:Manrope;font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/manrope-cyrillic-wght-normal.c268b459a9.woff2) format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/manrope-cyrillic-ext-wght-normal.de37de877d.woff2) format("woff2-variations");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

@font-face{font-family:"Plex Arabic";font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.6010e7fd0d.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex Arabic";font-style:normal;font-display:swap;font-weight:600;
  src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.16734a5adb.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex Arabic";font-style:normal;font-display:swap;font-weight:700;
  src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.04c730b429.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

/* ---------- 2. Token'lar ------------------------------------------------- */
:root{
  --navy-950:#0B1526; --navy-900:#12203C; --navy-800:#1D2F55; --navy-700:#28406F;
  --navy-600:#3A5588; --navy-400:#7288AD; --navy-200:#C3CEDF;
  --green-700:#4E7F14; --green-600:#639F1B; --green-500:#80CC28; --green-300:#A8E05C; --green-100:#EAF7D6;
  --teal-700:#2F6B62; --teal-500:#4E9E93; --teal-300:#8FC9C1;
  --ink:#16202F; --ink-2:#41506A; --ink-3:#6C7A91;
  --line:#E3E8F0; --line-2:#EDF1F7;
  --bg:#FFFFFF; --bg-2:#F6F8FC; --bg-3:#EEF2F9;
  --surface:#FFFFFF; --surface-2:#F6F8FC;
  --focus:#80CC28;
  --shadow-1:0 1px 2px rgba(18,32,60,.05),0 2px 8px rgba(18,32,60,.05);
  --shadow-2:0 2px 4px rgba(18,32,60,.06),0 14px 34px -12px rgba(18,32,60,.18);
  --shadow-3:0 30px 70px -30px rgba(18,32,60,.35);

  --ff-body:Inter,"Plex Arabic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-head:Manrope,"Plex Arabic",Inter,system-ui,sans-serif;
  --ff-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --step--1:clamp(.8125rem,.79rem + .11vw,.875rem);
  --step-0:clamp(1rem,.97rem + .14vw,1.0625rem);
  --step-1:clamp(1.15rem,1.09rem + .27vw,1.3125rem);
  --step-2:clamp(1.35rem,1.24rem + .5vw,1.65rem);
  --step-3:clamp(1.6rem,1.4rem + .9vw,2.1rem);
  --step-4:clamp(1.9rem,1.55rem + 1.6vw,2.9rem);
  --step-5:clamp(2.25rem,1.6rem + 2.9vw,4rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --wrap:1180px; --wrap-narrow:760px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:76px;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E7ECF5; --ink-2:#B3BFD3; --ink-3:#8794AC;
    --line:#22314C; --line-2:#1A2740;
    --bg:#0B1526; --bg-2:#101D33; --bg-3:#16253E;
    --surface:#101D33; --surface-2:#16253E;
    --navy-200:#2A3E5F;
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
    --shadow-2:0 2px 4px rgba(0,0,0,.35),0 14px 34px -12px rgba(0,0,0,.6);
    --shadow-3:0 30px 70px -30px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#E7ECF5; --ink-2:#B3BFD3; --ink-3:#8794AC;
  --line:#22314C; --line-2:#1A2740;
  --bg:#0B1526; --bg-2:#101D33; --bg-3:#16253E;
  --surface:#101D33; --surface-2:#16253E;
  --navy-200:#2A3E5F;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --shadow-2:0 2px 4px rgba(0,0,0,.35),0 14px 34px -12px rgba(0,0,0,.6);
  --shadow-3:0 30px 70px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------- 3. Temel ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-body);
  font-size:var(--step-0);line-height:1.65;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-head);margin:0 0 .5em;line-height:1.15;
  letter-spacing:-.02em;font-weight:700;color:var(--ink);text-wrap:balance}
h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3)}
h4{font-size:var(--step-2)}h5{font-size:var(--step-1)}h6{font-size:var(--step-0)}
p{margin:0 0 1.15em;text-wrap:pretty}
a{color:var(--green-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-600)}
img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{padding-inline-start:1.3em}
li{margin-bottom:.4em}
strong,b{font-weight:650}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
::selection{background:var(--green-500);color:var(--navy-900)}
[hidden]{display:none!important}

.skip{position:absolute;inset-inline-start:0;top:0;transform:translateY(-120%);z-index:1000;background:var(--navy-800);
  color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r-md) 0;font-weight:600}
.skip:focus{transform:translateY(0)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. Yerleşim -------------------------------------------------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
@media(max-width:640px){.wrap{width:min(100% - 2rem,var(--wrap))}}
.wrap-narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4.5rem)}
.section--alt{background:var(--bg-2)}
.section--navy{background:var(--navy-900);color:#EAF0FA}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.section--navy p{color:#B9C6DC}
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}
.stack>*+*{margin-top:var(--sp-4)}
.center{text-align:center}
.flow-tight>*+*{margin-top:var(--sp-2)}

/* ---------- 5. Tipografik parçalar --------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ff-head);
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-700);margin:0 0 var(--sp-3)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green-500);border-radius:2px}
.section--navy .eyebrow{color:var(--green-300)}
.lead{font-size:var(--step-1);line-height:1.6;color:var(--ink-2);max-width:62ch}
.section--navy .lead{color:#C4D0E5}
.muted{color:var(--ink-3)}
.section-head{max-width:min(100%,62ch);margin-bottom:clamp(2rem,4vw,3rem)}
.section-head.center{margin-inline:auto}
.rule{width:44px;height:3px;background:var(--green-500);border-radius:2px;margin-bottom:var(--sp-4)}

/* ---------- 6. Butonlar --------------------------------------------------- */
.btn{--btn-bg:var(--navy-800);--btn-fg:#fff;--btn-bd:var(--navy-800);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--ff-head);font-weight:650;font-size:var(--step--1);letter-spacing:.01em;
  padding:.85rem 1.6rem;border-radius:var(--r-full);border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),
             background-color .2s,color .2s,border-color .2s;
  will-change:transform}
.btn:hover{color:var(--btn-fg);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0)}
.btn svg{width:1em;height:1em;flex:none}
.btn--primary{--btn-bg:var(--green-500);--btn-bd:var(--green-500);--btn-fg:var(--navy-900)}
.btn--primary:hover{--btn-bg:var(--green-300);--btn-bd:var(--green-300)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bd:var(--green-500);--btn-fg:var(--green-700)}
.section--navy .btn--ghost,.hero .btn--ghost,.phero .btn--ghost,.cta .btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.32)}
.section--navy .btn--ghost:hover,.hero .btn--ghost:hover,.phero .btn--ghost:hover,.cta .btn--ghost:hover{--btn-bd:var(--green-500);--btn-fg:var(--green-300)}
.btn--sm{padding:.6rem 1.15rem;font-size:.8rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.link-more{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ff-head);
  font-weight:650;font-size:var(--step--1);color:var(--green-700);text-decoration:none}
.link-more span[aria-hidden]{transition:transform .3s var(--ease-out)}
.link-more:hover span[aria-hidden]{transform:translateX(4px)}
[dir=rtl] .link-more:hover span[aria-hidden]{transform:translateX(-4px)}

/* ---------- 7. Header ---------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background-color .3s}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 20px -8px rgba(18,32,60,.25)}
.hdr__bar{display:flex;align-items:center;gap:var(--sp-5);height:var(--header-h)}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img,.brand svg{height:38px;width:auto}
.brand__light{display:none}
:root[data-theme="dark"] .brand__dark{display:none}
:root[data-theme="dark"] .brand__light{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand__dark{display:none}
  :root:not([data-theme="light"]) .brand__light{display:block}}

.nav{margin-inline-start:auto}
.nav__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .8rem;border-radius:var(--r-full);
  font-family:var(--ff-head);font-weight:600;font-size:.875rem;color:var(--ink-2);
  text-decoration:none;white-space:nowrap;transition:color .2s,background-color .2s}
.nav__link:hover,.nav__item:hover>.nav__link,.nav__item:focus-within>.nav__link{color:var(--ink);background:var(--bg-3)}
.nav__link[aria-current]{color:var(--green-700)}
.nav__link[aria-current]::after{content:"";position:absolute;bottom:.15rem;inset-inline:.8rem;
  height:2px;background:var(--green-500);border-radius:2px}
.nav__caret{width:.6em;height:.6em;transition:transform .25s var(--ease)}
.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg)}
.nav__sub{position:absolute;top:calc(100% + .4rem);inset-inline-start:0;min-width:250px;
  --cols:1;display:grid;grid-template-columns:repeat(var(--cols),minmax(210px,1fr));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:.5rem;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.nav__item:hover>.nav__sub,.nav__item:focus-within>.nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub--wide{--cols:2}
.nav__sub a{display:block;padding:.55rem .8rem;border-radius:var(--r-sm);font-size:.875rem;
  font-weight:550;color:var(--ink-2);text-decoration:none;transition:background-color .18s,color .18s}
.nav__sub a:hover{background:var(--bg-3);color:var(--green-700)}
.nav__sub li{margin:0}

.hdr__tools{display:flex;align-items:center;gap:.4rem;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-full);
  border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;
  transition:border-color .2s,color .2s,background-color .2s}
.icon-btn:hover{border-color:var(--green-500);color:var(--green-700)}
.icon-btn svg{width:18px;height:18px}

.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:.35rem;height:40px;padding:0 .8rem;
  border-radius:var(--r-full);border:1px solid var(--line);background:transparent;
  font-family:var(--ff-head);font-weight:650;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s}
.lang__btn:hover{border-color:var(--green-500);color:var(--green-700)}
.lang__globe{width:16px;height:16px}
.lang__cur{line-height:1}
.lang__menu{position:absolute;top:calc(100% + .4rem);inset-inline-end:0;min-width:170px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:.4rem;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:5}
.lang[data-open="true"] .lang__menu,.lang:focus-within .lang__menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang__menu a{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:var(--r-sm);
  font-size:.85rem;font-weight:550;color:var(--ink-2);text-decoration:none}
.lang__menu a:hover{background:var(--bg-3);color:var(--green-700)}
.lang__menu a[aria-current]{color:var(--green-700);font-weight:700}
.lang__code{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--ink-3);text-transform:uppercase}

.burger{display:none}
@media(max-width:1080px){
  .nav{display:none}
  .burger{display:inline-grid}
  .lang__globe{display:none}
}
@media(max-width:720px){
  .hdr__cta{display:none}
  :root{--header-h:66px}
  .brand img,.brand svg{height:32px}
}
@media(max-width:400px){
  .hdr__tools .lang__btn{padding:0 .55rem}
  .icon-btn{width:38px;height:38px}
}

/* mobil çekmece */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none;overflow:hidden}
.drawer[data-open="true"]{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(11,21,38,.55);opacity:0;
  transition:opacity .3s var(--ease);backdrop-filter:blur(2px)}
.drawer[data-open="true"] .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(92vw,400px);
  background:var(--bg);border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .38s var(--ease-out);overflow-y:auto;overscroll-behavior:contain}
[dir=rtl] .drawer__panel{transform:translateX(-100%)}
.drawer[data-open="true"] .drawer__panel{transform:translateX(0)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2}
.drawer__nav{padding:.75rem .6rem 2rem;list-style:none;margin:0}
.drawer__nav li{margin:0}
.drawer__nav>li>a,.drawer__nav>li>details>summary{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;padding:.85rem 1rem;border-radius:var(--r-md);font-family:var(--ff-head);
  font-weight:650;font-size:1rem;color:var(--ink);text-decoration:none;cursor:pointer;list-style:none}
.drawer__nav summary::-webkit-details-marker{display:none}
.drawer__nav>li>a:hover,.drawer__nav summary:hover{background:var(--bg-3)}
.drawer__nav details[open]>summary{color:var(--green-700)}
.drawer__nav details[open] .nav__caret{transform:rotate(180deg)}
.drawer__sub{list-style:none;margin:0 0 .5rem;padding:0 0 0 1rem;border-inline-start:2px solid var(--line-2);
  margin-inline-start:1.1rem}
.drawer__sub a{display:block;padding:.6rem .9rem;border-radius:var(--r-sm);font-size:.92rem;
  color:var(--ink-2);text-decoration:none}
.drawer__sub a:hover{background:var(--bg-3);color:var(--green-700)}
.drawer__foot{margin-top:auto;padding:1.25rem;border-top:1px solid var(--line);display:grid;gap:.6rem}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;background:var(--navy-900);color:#fff;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.26;
  filter:saturate(.5) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(128,204,40,.20),transparent 58%),
    radial-gradient(100% 80% at 8% 92%,rgba(78,158,147,.22),transparent 60%),
    linear-gradient(180deg,rgba(11,21,38,.82) 0%,rgba(11,21,38,.90) 55%,rgba(11,21,38,.97) 100%)}
.hero__grid{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  }
.hero__grid::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,transparent 20%,var(--navy-900) 82%)}
.hero__inner{position:relative;padding-block:clamp(4.5rem,12vw,8.5rem)}
.hero h1{color:#fff;font-size:var(--step-5);max-width:16ch;margin-bottom:var(--sp-5)}
.hero h1 em{font-style:normal;color:var(--green-500)}
.hero__sub{font-size:var(--step-1);color:#BCCADF;max-width:56ch;margin-bottom:var(--sp-6)}
.hero .eyebrow{color:var(--green-300)}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.75rem;margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid rgba(255,255,255,.14)}
.hero__meta div{min-width:120px}
.hero__meta dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8FA3C2;font-weight:650;font-family:var(--ff-head);margin-bottom:.25rem}
.hero__meta dd{margin:0;font-family:var(--ff-head);font-size:var(--step-2);font-weight:700;color:#fff}

/* sayfa başlığı (iç sayfalar) */
.phero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(100% 100% at 85% 0%,rgba(128,204,40,.18),transparent 60%),
             linear-gradient(180deg,rgba(11,21,38,.86),rgba(11,21,38,.95))}
.phero__inner{padding-block:clamp(3rem,7vw,5.25rem)}
.phero h1{color:#fff;font-size:var(--step-4);margin-bottom:.35em;max-width:20ch}
.phero p{color:#B9C6DC;max-width:60ch;margin:0}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;list-style:none;
  margin:0 0 var(--sp-4);padding:0;font-size:.8rem;color:#8FA3C2}
.crumbs li{margin:0;display:flex;align-items:center;gap:.4rem}
.crumbs li+li::before{content:"/";color:rgba(255,255,255,.3)}
.crumbs a{color:#B9C6DC;text-decoration:none}
.crumbs a:hover{color:var(--green-300)}
.crumbs [aria-current]{color:#fff}

/* ---------- 9. Kartlar ---------------------------------------------------- */
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--navy-200)}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease-out),filter .5s}
.card:hover .card__media img{transform:scale(1.055)}
.card__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(18,32,60,.42));opacity:.55;transition:opacity .4s}
.card:hover .card__media::after{opacity:.3}
.card__body{padding:clamp(1.25rem,2.5vw,1.6rem);display:flex;flex-direction:column;flex:1}
.card__kicker{font-family:var(--ff-head);font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-700);margin-bottom:.55rem}
.card h3{font-size:var(--step-1);margin-bottom:.5rem;letter-spacing:-.015em}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card p{color:var(--ink-2);font-size:var(--step--1);margin-bottom:1rem;line-height:1.62}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;font-size:var(--step--1)}
.card__date{font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.02em}

/* ikonlu servis kartı */
.icard{position:relative;display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.4rem,3vw,2rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.icard::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green-500),var(--teal-500));
  border-radius:var(--r-lg) var(--r-lg) 0 0;transform:scaleX(0);transform-origin:inline-start;
  transition:transform .45s var(--ease-out)}
.icard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--navy-200)}
.icard:hover::before{transform:scaleX(1)}
.icard__icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
  background:var(--green-100);color:var(--green-700);flex:none;
  transition:background-color .3s,color .3s,transform .4s var(--ease-out)}
.icard:hover .icard__icon{transform:translateY(-2px) rotate(-4deg)}
.icard__icon svg{width:24px;height:24px}
:root[data-theme="dark"] .icard__icon{background:rgba(128,204,40,.14);color:var(--green-300)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .icard__icon{background:rgba(128,204,40,.14);color:var(--green-300)}}
.icard h3{font-size:var(--step-1);margin:0}
.icard h3 a{color:inherit;text-decoration:none}
.icard h3 a::after{content:"";position:absolute;inset:0}
.icard p{color:var(--ink-2);font-size:var(--step--1);margin:0;line-height:1.62}

/* küçük özellik listesi (hizmet alanları) */
.feats{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  list-style:none;margin:0;padding:0}
.feats li{display:flex;align-items:flex-start;gap:.7rem;margin:0;padding:.8rem .9rem;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  font-size:var(--step--1);font-weight:550;line-height:1.45;
  transition:border-color .25s,background-color .25s,transform .25s var(--ease-out)}
.feats li:hover{border-color:var(--green-500);transform:translateX(3px)}
[dir=rtl] .feats li:hover{transform:translateX(-3px)}
.feats svg{width:17px;height:17px;flex:none;color:var(--green-600);margin-top:.16em}

/* ekip */
.person{position:relative;text-align:center;padding:clamp(1.5rem,3vw,2rem) 1.25rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.person:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--navy-200)}
.avatar{width:88px;height:88px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--ff-head);font-weight:700;font-size:1.9rem;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(140deg,var(--navy-700),var(--navy-900));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 8px 24px -10px rgba(18,32,60,.5);
  position:relative;overflow:hidden}
.avatar::after{content:"";position:absolute;inset-inline-start:-30%;bottom:-40%;width:130%;height:70%;
  background:radial-gradient(circle at 30% 20%,rgba(128,204,40,.55),transparent 62%)}
.avatar span{position:relative;z-index:1}
.person h3{font-size:var(--step-1);margin-bottom:.2rem}
.person .role{font-size:var(--step--1);color:var(--green-700);font-weight:600;margin-bottom:.75rem}
.person .bio{font-size:var(--step--1);color:var(--ink-2);margin-bottom:1rem}
.socials{display:flex;gap:.4rem;justify-content:center;list-style:none;margin:0;padding:0}
.socials li{margin:0}
.socials a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink-3);transition:.25s}
.socials a:hover{border-color:var(--green-500);color:var(--green-700);transform:translateY(-2px)}
.socials svg{width:15px;height:15px}

/* ---------- 10. İstatistikler --------------------------------------------- */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.stat{background:var(--surface);padding:clamp(1.4rem,3vw,2.1rem) 1.25rem;text-align:center}
.stat__num{font-family:var(--ff-head);font-size:var(--step-4);font-weight:800;line-height:1;
  color:var(--navy-800);letter-spacing:-.03em;display:block;margin-bottom:.4rem;
  font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .stat__num{color:var(--green-300)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stat__num{color:var(--green-300)}}
.stat__label{font-size:var(--step--1);color:var(--ink-2);line-height:1.4}
.section--navy .stats{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)}
.section--navy .stat{background:transparent}
.section--navy .stat__num{color:var(--green-500)}
.section--navy .stat__label{color:#B9C6DC}

/* ---------- 11. Referanslar ----------------------------------------------- */
.quotes{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.quote{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.1rem);display:flex;flex-direction:column;gap:1.1rem}
.quote::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:clamp(1.5rem,3vw,2.1rem);
  width:36px;height:3px;background:var(--green-500);border-radius:0 0 3px 3px}
.quote blockquote{margin:0;font-size:var(--step-0);line-height:1.68;color:var(--ink);text-wrap:pretty}
.quote figcaption{display:flex;align-items:center;gap:.85rem;margin-top:auto}
.quote .avatar{width:46px;height:46px;font-size:1rem;margin:0}
.quote .who{font-family:var(--ff-head);font-weight:700;font-size:var(--step--1);line-height:1.3}
.quote .what{font-size:.78rem;color:var(--ink-3)}
.section--navy .quote{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.section--navy .quote blockquote{color:#DDE5F2}

/* ---------- 12. Akordiyon (SSS) ------------------------------------------- */
.acc{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.acc details+details{border-top:1px solid var(--line)}
.acc summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.15rem clamp(1.1rem,2.5vw,1.6rem);cursor:pointer;list-style:none;
  font-family:var(--ff-head);font-weight:650;font-size:var(--step-0);line-height:1.45;
  color:var(--ink);transition:background-color .2s,color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--bg-2);color:var(--green-700)}
.acc summary::after{content:"";flex:none;width:20px;height:20px;margin-top:.2em;
  background:currentColor;transition:transform .3s var(--ease);
  -webkit-mask:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  color:var(--green-600)}
.acc details[open] summary{color:var(--green-700)}
.acc details[open] summary::after{transform:rotate(135deg)}
.acc__body{padding:0 clamp(1.1rem,2.5vw,1.6rem) 1.35rem;color:var(--ink-2);font-size:var(--step--1);line-height:1.7}
.acc__body>*:last-child{margin-bottom:0}
.acc details[open] .acc__body{animation:accIn .32s var(--ease-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 13. CTA şeridi ------------------------------------------------ */
.cta{position:relative;overflow:hidden;background:var(--navy-800);color:#fff;
  border-radius:var(--r-xl);padding:clamp(2rem,5vw,3.5rem);isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 140% at 100% 0%,rgba(128,204,40,.28),transparent 55%),
             radial-gradient(80% 120% at 0% 100%,rgba(78,158,147,.28),transparent 55%)}
.cta__inner{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);
  justify-content:space-between}
.cta h2{color:#fff;font-size:var(--step-3);margin:0;max-width:24ch}
.cta p{color:#C4D0E5;margin:.5rem 0 0;max-width:52ch}

/* ---------- 14. Prose (blog / uzun metin) --------------------------------- */
.prose{font-size:1.0625rem;line-height:1.78;color:var(--ink-2)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:var(--step-2);color:var(--ink);margin-top:2em;margin-bottom:.6em}
.prose h3{font-size:var(--step-1);color:var(--ink);margin-top:1.8em;margin-bottom:.5em}
.prose h4{font-size:var(--step-0);color:var(--ink);margin-top:1.6em;margin-bottom:.4em}
.prose p{margin:0}
.prose ul,.prose ol{margin:0;padding-inline-start:1.35em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--green-600)}
.prose a{color:var(--green-700);font-weight:550}
.prose img{border-radius:var(--r-md);margin-block:1.5em;box-shadow:var(--shadow-1)}
.prose blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.4em;border-inline-start:3px solid var(--green-500);
  font-size:var(--step-1);line-height:1.6;color:var(--ink);font-style:normal}
.prose code{font-family:var(--ff-mono);font-size:.875em;background:var(--bg-3);
  padding:.15em .4em;border-radius:4px;color:var(--navy-800)}
.prose pre{background:var(--navy-950);color:#D7E2F2;padding:1.25rem;border-radius:var(--r-md);
  overflow-x:auto;font-size:.85rem;line-height:1.6}
.prose pre code{background:none;color:inherit;padding:0}
.prose table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.prose th,.prose td{border:1px solid var(--line);padding:.6rem .8rem;text-align:start}
.prose th{background:var(--bg-2);font-family:var(--ff-head);font-weight:650;color:var(--ink)}
.prose hr{margin:2.5em 0}

.article-head{max-width:var(--wrap-narrow);margin-inline:auto}
.article-media{margin-bottom:clamp(2rem,4vw,3rem);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-2);aspect-ratio:16/9;background:var(--bg-3)}
.article-media img{width:100%;height:100%;object-fit:cover}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;
  font-size:var(--step--1);color:var(--ink-3);margin-bottom:var(--sp-5)}
.meta-row time{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.02em}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:var(--r-full);
  background:var(--green-100);color:var(--green-700);font-family:var(--ff-head);
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
:root[data-theme="dark"] .chip{background:rgba(128,204,40,.14);color:var(--green-300)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip{background:rgba(128,204,40,.14);color:var(--green-300)}}

/* okuma ilerleme çubuğu */
.progress{position:fixed;inset-inline:0;top:0;height:3px;z-index:95;background:transparent;pointer-events:none}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--green-500),var(--teal-500));
  transition:width .1s linear;transform-origin:inline-start}

/* ---------- 15. Formlar --------------------------------------------------- */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--ff-head);font-weight:650;font-size:var(--step--1);color:var(--ink)}
.field .req{color:var(--green-700)}
.field input,.field select,.field textarea{width:100%;padding:.8rem 1rem;font:inherit;
  font-size:var(--step--1);color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r-md);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-500);
  box-shadow:0 0 0 4px rgba(128,204,40,.18)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75}
.field select{appearance:none;cursor:pointer;padding-inline-end:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7A91' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px}
[dir=rtl] .field select{background-position:left 1rem center}
.field-row{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.check{display:flex;align-items:flex-start;gap:.65rem;font-size:.82rem;color:var(--ink-2);line-height:1.5}
.check input{width:18px;height:18px;margin-top:.15em;accent-color:var(--green-600);flex:none}
.form__note{font-size:.78rem;color:var(--ink-3)}
.form-status{padding:.9rem 1.1rem;border-radius:var(--r-md);font-size:var(--step--1);font-weight:550}
.form-status[data-state="ok"]{background:var(--green-100);color:var(--green-700);border:1px solid var(--green-300)}
.form-status[data-state="err"]{background:#FDECEC;color:#A32020;border:1px solid #F3BFBF}

/* iletişim bilgi kartı */
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.info-list li{display:flex;gap:.9rem;margin:0}
.info-list svg{width:20px;height:20px;flex:none;color:var(--green-600);margin-top:.2em}
.info-list .k{font-family:var(--ff-head);font-weight:650;font-size:var(--step--1);
  color:var(--ink);display:block;margin-bottom:.1rem}
.info-list .v{font-size:var(--step--1);color:var(--ink-2)}
.info-list a{color:var(--ink-2);text-decoration:none}
.info-list a:hover{color:var(--green-700)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem)}
.panel--tint{background:var(--bg-2)}

/* ---------- 16. Footer ---------------------------------------------------- */
.ftr{background:var(--navy-950);color:#A9B8D0;padding-block:clamp(3rem,6vw,4.5rem) 0;
  font-size:var(--step--1)}
.ftr a{color:#A9B8D0;text-decoration:none;transition:color .2s}
.ftr a:hover{color:var(--green-300)}
.ftr__grid{display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(150px,1fr))}
@media(max-width:860px){.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__brand{grid-column:1 / -1}}
@media(max-width:520px){.ftr__grid{grid-template-columns:minmax(0,1fr)}}
.ftr__brand img{height:40px;margin-bottom:1.1rem}
.ftr__brand p{max-width:36ch;color:#8FA3C2;line-height:1.65}
.ftr h2{font-family:var(--ff-head);font-size:.74rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#fff;margin-bottom:1.1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ftr li{margin:0}
.ftr__bottom{margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem;
  border-top:1px solid rgba(255,255,255,.09);display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;font-size:.8rem;color:#7E90AC}
.ftr__legal{display:flex;flex-wrap:wrap;gap:1.1rem}
.ftr .socials{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;
  grid-template-columns:none;justify-content:flex-start}
.ftr .socials li{margin:0}
.ftr .socials a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);color:#A9B8D0}
.ftr .socials a:hover{border-color:var(--green-500);color:var(--green-300)}

/* ---------- 17. Yüzen aksiyonlar ------------------------------------------ */
.floats{position:fixed;inset-inline-end:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);
  z-index:80;display:grid;gap:.6rem;justify-items:center}
.fab{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;
  cursor:pointer;box-shadow:var(--shadow-2);transition:transform .3s var(--ease-out),opacity .3s}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab svg{width:24px;height:24px}
.fab--wa{background:#25D366;color:#fff}
.fab--top{background:var(--surface);color:var(--ink-2);border:1px solid var(--line);
  width:44px;height:44px;opacity:0;pointer-events:none}
.fab--top.is-on{opacity:1;pointer-events:auto}
.fab--top svg{width:19px;height:19px}

/* ---------- 18. Çerez bildirimi ------------------------------------------- */
.cookie{position:fixed;inset-inline:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);
  z-index:110;max-width:520px;margin-inline:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);
  padding:1.25rem 1.4rem;display:none;gap:1rem;align-items:flex-start}
.cookie.is-on{display:flex;animation:ckIn .45s var(--ease-out)}
@keyframes ckIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cookie p{margin:0 0 .9rem;font-size:.85rem;line-height:1.55;color:var(--ink-2)}
.cookie .btn{padding:.55rem 1.1rem;font-size:.78rem}

/* ---------- 19. Hareket --------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal-group]>*{opacity:0;transform:translateY(22px);
  transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.js [data-reveal-group].is-in>*{opacity:1;transform:none}
.js [data-reveal-group].is-in>*:nth-child(1){transition-delay:0s}
.js [data-reveal-group].is-in>*:nth-child(2){transition-delay:.07s}
.js [data-reveal-group].is-in>*:nth-child(3){transition-delay:.14s}
.js [data-reveal-group].is-in>*:nth-child(4){transition-delay:.21s}
.js [data-reveal-group].is-in>*:nth-child(5){transition-delay:.28s}
.js [data-reveal-group].is-in>*:nth-child(6){transition-delay:.35s}
.js [data-reveal-group].is-in>*:nth-child(7){transition-delay:.42s}
.js [data-reveal-group].is-in>*:nth-child(8){transition-delay:.49s}
.js [data-reveal-group].is-in>*:nth-child(n+9){transition-delay:.56s}

@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-reveal],[data-reveal-group]>*{opacity:1!important;transform:none!important}
}

/* sayfa geçişi */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s var(--ease) both}
::view-transition-new(root){animation:vtIn .32s var(--ease-out) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- 20. RTL ------------------------------------------------------- */
[dir=rtl] .eyebrow::before{transform:scaleX(-1)}
[dir=rtl] .icard::before{transform-origin:right}
[dir=rtl] .icard:hover::before{transform:scaleX(1)}
[dir=rtl] .hero__grid,[dir=rtl] .crumbs li+li::before{transform:none}
[dir=rtl] .prose blockquote{border-inline-start:3px solid var(--green-500)}
[dir=rtl] body{letter-spacing:0}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{letter-spacing:0}
[lang=ar] .card__date,[lang=ar] .meta-row time{font-family:var(--ff-body)}

/* ---------- 21. Baskı ----------------------------------------------------- */
@media print{
  .hdr,.ftr,.floats,.cookie,.progress,.drawer,.crumbs{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:1rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ==========================================================================
   22. HAREKET KATMANI — arka plan animasyonları, geçişler, mikro etkileşimler
   ========================================================================== */

/* ---- 22.1 Aurora: yavaşça sürüklenen renk bulutları ---------------------- */
.aurora{position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;
  opacity:.72;contain:strict;transform:translateZ(0)}
.aurora span{position:absolute;display:block;border-radius:50%;will-change:transform}
.aurora span:nth-child(1){width:52vw;height:52vw;left:34%;top:-30%;
  background:radial-gradient(circle at 42% 42%,rgba(128,204,40,.38) 0%,rgba(128,204,40,.16) 34%,transparent 68%);
  animation:drift1 26s ease-in-out infinite}
.aurora span:nth-child(2){width:46vw;height:46vw;left:-12%;top:44%;
  background:radial-gradient(circle at 52% 46%,rgba(78,158,147,.40) 0%,rgba(78,158,147,.16) 34%,transparent 68%);
  animation:drift2 32s ease-in-out infinite}
.aurora span:nth-child(3){width:38vw;height:38vw;left:26%;top:8%;
  background:radial-gradient(circle at 50% 50%,rgba(40,64,111,.55) 0%,rgba(40,64,111,.2) 38%,transparent 70%);
  }
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-7vw,6vh,0) scale(1.14)}
  66%{transform:translate3d(4vw,-5vh,0) scale(.92)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(9vw,-7vh,0) scale(1.18)}
  70%{transform:translate3d(-3vw,4vh,0) scale(.95)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-6vw,8vh,0) scale(.88)}}

/* ---- 22.2 Izgara: sonsuz kayan teknik ızgara ----------------------------- */
.hero__grid{overflow:hidden;background-image:none!important}
.hero__grid::after{content:"";position:absolute;inset:-80px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;will-change:transform;
  animation:gridDrift 34s linear infinite}
@keyframes gridDrift{to{transform:translate3d(64px,64px,0)}}

/* tarayıcı çizgisi — yukarıdan aşağı süzülen ince ışık */
.scanline{display:none;position:absolute;inset-inline:0;top:0;height:34%;z-index:-1;pointer-events:none;will-change:transform;
  background:linear-gradient(180deg,transparent,rgba(128,204,40,.09) 45%,rgba(128,204,40,.16) 50%,transparent);
  animation:scan 9s cubic-bezier(.5,0,.5,1) infinite;opacity:.75}
@keyframes scan{0%{transform:translateY(-40%)}55%{transform:translateY(240%)}100%{transform:translateY(240%)}}

/* ---- 22.3 Ağ tuvali (hero) ---------------------------------------------- */
.hero__net{position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  opacity:.95;pointer-events:none;overflow:visible}
.hero__net .ln{fill:none;stroke:#80CC28;stroke-width:1}
.hero__net .ln1{stroke-opacity:.50}
.hero__net .ln2{stroke-opacity:.26}
.hero__net .ln3{stroke-opacity:.11}
.hero__net .nd{fill:#A0D6CE;fill-opacity:.85}
.hero__net .hb{fill:#B2EE66}
.hero__net .hubring{fill:none;stroke:#80CC28;stroke-opacity:.30;stroke-width:1}
/* hareketli parçacıklar SVG dışında: büyük grafik hiç yeniden çizilmez */
.hero__pk{position:absolute;inset:0;z-index:-1;pointer-events:none;
  width:1000px;height:760px;left:50%;top:50%;translate:-50% -50%;
  transform:scale(var(--netScale,1.6));transform-origin:50% 50%}
.hero__pk i{position:absolute;display:block;border-radius:50%}
.hero__pk .pk{width:5px;height:5px;margin:-2.5px;background:#DFFFA8;
  box-shadow:0 0 8px rgba(128,204,40,.9);offset-distance:0%;offset-rotate:0deg;
  will-change:offset-distance;animation-name:pkRun;
  animation-timing-function:linear;animation-iteration-count:infinite}
.hero__pk .pk1{animation-delay:-.7s}.hero__pk .pk2{animation-delay:-1.4s}
.hero__pk .pk3{animation-delay:-2.1s}.hero__pk .pk4{animation-delay:-2.8s}
@keyframes pkRun{0%{offset-distance:0%;opacity:0}12%{opacity:1}
  88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.hero__pk .tw{width:var(--r,4px);height:var(--r,4px);margin:calc(var(--r,4px)/-2);
  background:#CFF59A;will-change:opacity;animation:twinkle 4.6s ease-in-out infinite}
.hero__pk .tw1{animation-delay:-.9s}.hero__pk .tw2{animation-delay:-1.8s}
.hero__pk .tw3{animation-delay:-2.7s}.hero__pk .tw4{animation-delay:-3.6s}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
@media(max-width:900px){.hero__net{opacity:.5}.hero__pk{display:none}}
@media (prefers-reduced-motion:reduce){.hero__pk{display:none}}

/* ---- 22.4 Marka yayı: logodaki yeşil kavis, çizilerek beliren motif ------ */
.arc-motif{position:absolute;pointer-events:none;z-index:-1;opacity:.22}
.hero .arc-motif{opacity:.3;animation:arcSpin 90s linear infinite}
@keyframes arcSpin{to{rotate:346deg}}
.arc-motif path{fill:none;stroke:var(--green-500);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.is-in .arc-motif path,.arc-motif.is-in path{animation:drawArc 2.2s var(--ease-out) forwards}
@keyframes drawArc{to{stroke-dashoffset:0}}
.arc-motif--tr{inset-inline-end:-4%;top:2%;width:min(52vw,620px);rotate:-14deg}
.arc-motif--bl{inset-inline-start:-8%;bottom:-16%;width:min(38vw,440px);rotate:158deg}

/* ---- 22.5 Başlık açılışı: kelime kelime maskeli giriş -------------------- */
/* Kelimeler yerinde sarmalanır; <em>, <strong> gibi etiketler korunur. */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;
   padding-block:.06em;margin-block:-.06em}
.w > i{display:inline-block;font-style:inherit;font-weight:inherit;color:inherit;
   transform:translateY(118%);transition:transform .9s var(--ease-out);
   transition-delay:var(--d,0s)}
.is-in .w > i,[data-split].is-in .w > i{transform:translateY(0)}

/* ---- 22.6 Bölüm girişleri: blur + yükselme ------------------------------- */
.js [data-reveal],.js [data-reveal-group]>*{filter:blur(6px)}
.js [data-reveal].is-in,.js [data-reveal-group].is-in>*{filter:blur(0)}
.js [data-reveal],.js [data-reveal-group]>*{transition:opacity .8s var(--ease-out),
  transform .8s var(--ease-out),filter .8s var(--ease-out)}
.js .js [data-reveal="left"]{transform:translateX(-28px) translateY(0)}
.js .js [data-reveal="right"]{transform:translateX(28px) translateY(0)}
.js .js [data-reveal="scale"]{transform:scale(.955)}
.js .js [data-reveal].is-in{transform:none}

/* NOT: animation-timeline: view() ile kaydırma tabanlı giriş denendi ancak
   görüntü alanı dışındaki bölümleri kalıcı olarak gizleyebiliyor (tam sayfa
   yazdırma/ekran görüntüsü ve bazı tarayıcı sürümlerinde). İçeriğin her koşulda
   görünür kalması için giriş animasyonları yalnızca IntersectionObserver ile
   yönetiliyor; JS çalışmazsa öğeler zaten görünür durumda kalır. */

/* ---- 22.7 Kart mikro etkileşimleri -------------------------------------- */
.card,.icard,.person,.quote,.panel{position:relative}
.icard::after,.card::after,.person::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .45s var(--ease-out);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
             rgba(128,204,40,.13),transparent 62%)}
.icard:hover::after,.card:hover::after,.person:hover::after{opacity:1}
.card,.icard,.person{transform-style:preserve-3d}
.card__media img{transition:transform 1.1s var(--ease-out),filter .6s}
.card:hover .card__media img{transform:scale(1.075) rotate(.4deg)}

/* buton parlaması */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transition:transform .8s var(--ease-out)}
.btn:hover::after{transform:translateX(120%) skewX(-18deg)}
.btn--primary::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}

/* bağlantı altı çizgisi */
.link-more{position:relative;padding-bottom:2px}
.link-more::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:inline-start;
  transition:transform .45s var(--ease-out)}
.icard:hover .link-more::after,.card:hover .link-more::after,
.link-more:hover::after{transform:scaleX(1)}

/* ---- 22.8 Kayan şerit (yetkinlik anahtar kelimeleri) --------------------- */
.ticker{position:relative;overflow:hidden;
  border-block:1px solid var(--line);background:var(--bg-2);
  padding-block:.9rem}
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--bg-2),transparent 9%,transparent 91%,var(--bg-2))}
.section--navy .ticker::after{background:linear-gradient(90deg,var(--navy-900),transparent 9%,transparent 91%,var(--navy-900))}
.section--navy .ticker{background:transparent;border-color:rgba(255,255,255,.12)}
.ticker__track{display:flex;width:max-content;gap:0;
  animation:tick 46s linear infinite;will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__row{display:flex;align-items:center;gap:2.6rem;padding-inline-end:2.6rem}
.ticker__row span{display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
  font-family:var(--ff-head);font-weight:650;font-size:.94rem;letter-spacing:-.01em;
  color:var(--ink-2)}
.ticker__row span::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--green-500);flex:none}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
[dir=rtl] .ticker__track{animation-direction:reverse}

/* ---- 22.9 Açık bölümlerde yumuşak arka plan lekeleri --------------------- */
.section{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.blob{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  opacity:.55;contain:strict;transform:translateZ(0);will-change:transform}
.blob--a{width:min(44vw,520px);aspect-ratio:1;inset-inline-end:-10%;top:-12%;
  background:radial-gradient(circle,rgba(128,204,40,.16) 0%,rgba(128,204,40,.07) 38%,transparent 70%);
  animation:drift1 30s ease-in-out infinite}
.blob--b{width:min(38vw,460px);aspect-ratio:1;inset-inline-start:-12%;bottom:-14%;
  background:radial-gradient(circle,rgba(78,158,147,.16) 0%,rgba(78,158,147,.07) 38%,transparent 70%);
  animation:drift2 36s ease-in-out infinite}
:root[data-theme="dark"] .blob{opacity:.65}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .blob{opacity:.65}}

/* ---- 22.10 CTA şeridinde canlı degrade ---------------------------------- */
.cta::before{background:
  radial-gradient(90% 140% at 100% 0%,rgba(128,204,40,.34),transparent 55%),
  radial-gradient(80% 120% at 0% 100%,rgba(78,158,147,.34),transparent 55%);
  animation:ctaShift 18s ease-in-out infinite}
@keyframes ctaShift{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-4%,0) scale(1.1)}}

/* ---- 22.11 Sayfa geçişi ------------------------------------------------- */
::view-transition-old(root){animation:vtOut .26s var(--ease) both}
::view-transition-new(root){animation:vtIn .42s var(--ease-out) both}
@keyframes vtIn{from{opacity:0;transform:translateY(14px) scale(.995);filter:blur(4px)}}

/* ilk yükleme */
.boot .hdr,.boot .hero__inner>*{opacity:0}
@keyframes bootIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.booted .hdr{animation:bootIn .7s var(--ease-out) both}
.booted .hero__inner>*{animation:bootIn .85s var(--ease-out) both}
.booted .hero__inner>*:nth-child(1){animation-delay:.06s}
.booted .hero__inner>*:nth-child(2){animation-delay:.14s}
.booted .hero__inner>*:nth-child(3){animation-delay:.26s}
.booted .hero__inner>*:nth-child(4){animation-delay:.36s}
.booted .hero__inner>*:nth-child(5){animation-delay:.46s}

/* ---- 22.12 Kaydırma göstergesi ------------------------------------------ */
.scroll-hint{position:absolute;inset-inline-start:50%;bottom:1.6rem;translate:-50% 0;
  display:grid;place-items:center;gap:.5rem;z-index:2;color:rgba(255,255,255,.6);
  font-family:var(--ff-head);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.scroll-hint i{display:block;width:1px;height:38px;background:linear-gradient(180deg,
  rgba(255,255,255,.05),var(--green-500));position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset-inline:0;top:0;height:12px;
  background:var(--green-300);animation:hintRun 2.2s var(--ease) infinite}
@keyframes hintRun{0%{transform:translateY(-14px);opacity:0}
  30%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@media(max-width:900px){.scroll-hint{display:none}}

/* ---- 22.13 Hareket azaltma ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .aurora span,.hero__grid,.scanline,.ticker__track,.blob,.cta::before,
  .scroll-hint i::after{animation:none!important}
  .scanline{display:none}
  .hero__net{display:none}
  .split .line > span{transform:none!important}
  .arc-motif path{stroke-dashoffset:0!important;animation:none!important}
  .booted .hdr,.booted .hero__inner>*{animation:none!important;opacity:1!important}
  .btn::after{display:none}
}

/* ---- 22.14 Radar motifi (hero sağ taraf) --------------------------------- */
.hero__orb{position:absolute;inset-inline-end:-6%;top:50%;translate:0 -50%;z-index:-1;
  width:min(50vw,600px);aspect-ratio:1;pointer-events:none;opacity:1;
  }
.hero__orb svg{width:100%;height:100%;overflow:visible}
.hero__orb circle{fill:none;transform-origin:200px 200px;transform-box:view-box;will-change:transform}
.hero__orb .r1{stroke:rgba(168,224,92,.55);stroke-width:1.2;stroke-dasharray:2 9;
  animation:spin 120s linear infinite}
.hero__orb .r2{stroke:rgba(180,222,216,.45);stroke-width:1.2;stroke-dasharray:16 12;
  animation:spinR 84s linear infinite}
.hero__orb .r3{stroke:rgba(168,224,92,.42);stroke-width:1.4;stroke-dasharray:1 7}
.hero__orb .r4{stroke:rgba(255,255,255,.20);stroke-width:1}
.hero__orb .cross{stroke:rgba(255,255,255,.13);stroke-width:1;stroke-dasharray:3 10}
.hero__orb .core{fill:rgba(168,224,92,.9);animation:corePulse 3.6s ease-in-out infinite}
.hero__orb .halo{fill:none;stroke:rgba(128,204,40,.5);stroke-width:1.5;
  transform-origin:200px 200px;transform-box:view-box;will-change:transform,opacity;
  animation:halo 3.6s ease-out infinite}
.hero__orb .sweep{transform-origin:200px 200px;transform-box:view-box;will-change:transform;animation:spin 7.5s linear infinite}
@keyframes spin{to{rotate:360deg}}
@keyframes spinR{to{rotate:-360deg}}
@keyframes corePulse{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes halo{0%{transform:scale(1);opacity:.85}100%{transform:scale(9);opacity:0}}
@media(max-width:900px){.hero__net{display:none}
.hero__orb{opacity:.4;inset-inline-end:-28%;width:min(90vw,520px)}}
@media (prefers-reduced-motion:reduce){
  .hero__orb .r1,.hero__orb .r2,.hero__orb .r3,.hero__orb .sweep,
  .hero__orb .core,.hero__orb .halo{animation:none!important}
  .hero__orb .halo{display:none}
}

/* ---- 22.15 Görüş alanı dışındaki süslemeleri durdur ----------------------
   Uzun bir sayfada onlarca dekoratif katmanın aynı anda animasyon çalıştırması
   gereksiz CPU/GPU tüketir. IntersectionObserver ekrandan çıkan bölümlere
   .anim-off ekler; animasyonlar durur, öğe görünür kalır. */
.anim-off .aurora span,
.anim-off .blob,
.anim-off .hero__grid,
.anim-off .scanline,
.anim-off .ticker__track,
.anim-off .hero__orb circle,
.anim-off .hero__orb .sweep,
.anim-off .arc-motif{animation-play-state:paused!important}
.anim-off.cta::before,.anim-off .cta::before{animation-play-state:paused!important}

/* ---- 23. Partner logo ızgarası ------------------------------------------
   Her marka kendi kartında durur: son satır eksik kalsa bile boşluk
   görünmez, liste 20-30 markaya büyüdüğünde de düzen bozulmaz.
   Logolar build sırasında tek tip tuvale (480x240) optik olarak eşitlenir
   (bkz. src/logos.py): yalnız yükseklik değil alanın karekökü de hesaba
   katıldığı için geniş kelime işaretiyle kare amblem gözde aynı ağırlıkta
   durur. Kartlar koyu temada da açık kalır, çünkü logoların çoğu koyu
   renklidir ve şeffaf zeminde kaybolur. */
.plogos{display:grid;gap:clamp(.6rem,1.2vw,.9rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.plogo{position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1rem,1.8vw,1.35rem) .9rem;min-height:118px;text-align:center;
  transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out),
             transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.plogo::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--green-500),var(--teal-500));
  transform:scaleX(0);transform-origin:inline-start;
  transition:transform .45s var(--ease-out)}
.plogo:hover{border-color:var(--navy-200);transform:translateY(-3px);
  box-shadow:var(--shadow-2);z-index:1}
.plogo:hover::before{transform:scaleX(1)}
.plogo img{width:100%;max-width:176px;height:auto;aspect-ratio:2/1;object-fit:contain;
  filter:saturate(.88) opacity(.82);
  transition:filter .4s var(--ease-out),transform .4s var(--ease-out)}
.plogo:hover img{filter:saturate(1) opacity(1);transform:scale(1.05)}

/* logo dosyası yoksa: sade kelime işareti */
.plogo__name{font-family:var(--ff-head);font-weight:750;font-size:1rem;letter-spacing:-.02em;
  color:var(--ink-3);transition:color .35s var(--ease-out)}
.plogo:hover .plogo__name{color:var(--navy-800)}
.plogo__sub{display:block;font-family:var(--ff-body);font-weight:500;font-size:.66rem;
  letter-spacing:.04em;color:var(--ink-3);opacity:.75;margin-top:.25rem}
.plogos-note{font-size:.76rem;color:var(--ink-3);margin-top:1.1rem;max-width:70ch;line-height:1.55}

/* Koyu zeminlerde (koyu tema + lacivert bölüm) karolar açık kalır. */
:root[data-theme="dark"] .plogo,
.section--navy .plogo{background:#EEF2F7;border-color:rgba(18,32,60,.10)}
:root[data-theme="dark"] .plogo:hover,
.section--navy .plogo:hover{background:#fff;border-color:var(--green-500)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .plogo{background:#EEF2F7;border-color:rgba(18,32,60,.10)}
  :root:not([data-theme="light"]) .plogo:hover{background:#fff;border-color:var(--green-500)}}

@media (max-width:520px){
  .plogos{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))}
  .plogo{min-height:96px;padding:.85rem .6rem}}

/* Referans karoları: logonun altında kurum adı. Logo tek başına tanınmayabilir,
   ad hem erişilebilirlik hem arama motoru için karşılığını verir. */
.plogos--ref{grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr))}
.plogo--ref{margin:0;grid-template-rows:1fr auto;gap:.55rem;min-height:150px;
  padding:clamp(1rem,1.8vw,1.35rem) .9rem 1rem}
.plogo--ref img{max-width:164px}
.plogo__cap{font-family:var(--ff-body);font-weight:600;font-size:.74rem;line-height:1.3;
  letter-spacing:.01em;color:var(--ink-3);transition:color .35s var(--ease-out)}
.plogo--ref:hover .plogo__cap{color:var(--navy-800)}
:root[data-theme="dark"] .plogo--ref .plogo__cap,
.section--navy .plogo--ref .plogo__cap{color:#5A6B85}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .plogo--ref .plogo__cap{color:#5A6B85}}
@media (max-width:520px){
  .plogos--ref{grid-template-columns:repeat(auto-fill,minmax(min(100%,145px),1fr))}
  .plogo--ref{min-height:126px}
  .plogo--ref img{max-width:126px}}

/* ---- 24. Hero slaytları -------------------------------------------------
   Üç slayt tek bir ızgara gözünde üst üste durur: yükseklik en uzun slayta
   göre sabitlenir, geçişte sayfa zıplamaz. JS yoksa ilk slayt görünür kalır
   ve diğerleri hiç gösterilmez — içerik her koşulda erişilebilir. */
/* Kare hızı notu: .hero'daki isolation:isolate hero'yu ayrı bir harmanlama
   grubu yapıyor; içeride hareket eden her katman, koca hero alanının her
   karede yeniden harmanlanmasına yol açıyordu (ölçüm: 34 -> 46 fps).
   Slaytlı hero'da izolasyonu kaldırıp negatif z-index'lerden vazgeçiyoruz:
   boyama sırası artık DOM sırasıyla sağlanıyor —
   zemin > ::before degrade > ızgara > kod akışı > görsel > metin > kumanda. */
.hero--slides{position:relative;isolation:auto}
.hero--slides::after{display:none}
.hero--slides::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(128,204,40,.20),transparent 58%),
    radial-gradient(100% 80% at 8% 92%,rgba(78,158,147,.22),transparent 60%),
    linear-gradient(180deg,rgba(11,21,38,.82) 0%,rgba(11,21,38,.90) 55%,rgba(11,21,38,.97) 100%)}
.hero--slides .hero__grid,
.hero--slides .codefx,
.hero--slides .hero__art-stack,
.hero--slides .hero__net{z-index:auto}
.hero__slides{display:grid;position:relative;z-index:2}
/* metnin arkası: yalnızca hero'nun kendi degrade zemini (bkz. .hero::after) */
.hslide{grid-area:1/1;padding-block:clamp(4rem,10vw,7rem) clamp(2rem,5vw,3rem);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ease-out),visibility 0s linear .6s}
.hslide.is-active{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s}
.hslide__inner{position:relative}
.hslide h1,.hslide__h{color:#fff;font-family:var(--ff-head);font-weight:750;
  line-height:1.06;letter-spacing:-.025em;
  font-size:var(--step-5);max-width:17ch;margin:0 0 var(--sp-5)}
.hslide h1 em,.hslide__h em{font-style:normal;color:var(--green-500)}
.hslide .eyebrow{color:var(--green-300)}
.hslide .hero__sub{max-width:54ch}

/* metin öğeleri sırayla girer */
.js .hslide__inner > *{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease-out),transform .65s var(--ease-out)}
.js .hslide.is-active .hslide__inner > *{opacity:1;transform:none}
.js .hslide.is-active .hslide__inner > *:nth-child(1){transition-delay:.05s}
.js .hslide.is-active .hslide__inner > *:nth-child(2){transition-delay:.12s}
.js .hslide.is-active .hslide__inner > *:nth-child(3){transition-delay:.20s}
.js .hslide.is-active .hslide__inner > *:nth-child(4){transition-delay:.28s}
/* başlık kelime kelime açılır (bkz. 22.5) */
.hslide.is-active .w > i{transform:translateY(0)}
.hslide:not(.is-active) .w > i{transform:translateY(118%);transition-delay:0s}

/* ---- 24.1 Slayt görselleri (sağ taraf) ---------------------------------- */
.hero__art-stack{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Etkin olmayan slaytın görseli yalnız saydam değil, görünmez: opacity:0 olan
   bir katmanın animasyonları yine de çalışıp her kareyi harmanlıyor — üç
   görselden ikisi boşuna dönüyordu. visibility ile tamamen çizim dışı kalır. */
.hero__art-slot{position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:scale(1.05);
  transition:opacity .9s var(--ease-out),transform 1.4s var(--ease-out),
             visibility 0s linear .9s}
.hero__art-slot.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .9s var(--ease-out),transform 1.4s var(--ease-out),visibility 0s}
.hero__art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Ağ grafiği tam sayfa; pusula ve kod penceresi metnin sağında durur. */
.hero__art-slot[data-art="compass"],.hero__art-slot[data-art="code"]{
  inset-inline-start:auto;inset-inline-end:1%;width:min(58%,660px)}

/* Metin tarafını koruma: eskiden dekorun üstüne yarı saydam bir perde
   seriliyordu; büyük saydam katman altındaki her animasyon karesini yeniden
   harmanladığı için ~13 fps'e mal oluyordu. Onun yerine dekorun kendisi
   maskeleniyor — üstte fazladan katman yok, metin tarafı zaten boş kalıyor. */
/* Maske kullanmıyoruz: büyük bir maskeli katmanın altındaki her animasyon
   karesi yeniden harmanlanıyor. Bunun yerine pusula ve kod görselleri zaten
   metnin sağında duruyor; tam sayfa olan ağ görseli ise soluk bırakılıyor. */
.hero--slides .hero__art-slot[data-art="net"]{--net-op:.62}
.hero--slides .hero__art-slot[data-art="net"].is-on{opacity:var(--net-op)}
/* hero'da ayrıca aurora çalıştırmaya gerek yok: slayt görselleri ve kod akışı
   zaten derinlik veriyor, üç bulanık leke boşuna ~10 fps yiyordu. */
.hero--slides > .aurora{display:none}
/* Eski yörünge parçacıkları ve kayan ızgara da kapalı: hero'da aynı anda kaç
   büyük katmanın canlandığı doğrudan kare hızına yansıyor. Kalanlar: kod
   akışı + slayt görseli. */
.hero--slides .hero__pk{display:none}
.hero--slides .hero__grid::after{animation:none}

/* pusula */
.hero__art--compass .cring{fill:none;stroke:rgba(168,224,92,.30);stroke-width:1.1}
.hero__art--compass .r1{stroke:rgba(168,224,92,.30);stroke-dasharray:3 8}
.hero__art--compass .r2{stroke:rgba(180,222,216,.26)}
.hero__art--compass .r3{stroke:rgba(255,255,255,.13)}
.hero__art--compass .r4{stroke:rgba(168,224,92,.24)}
.hero__art--compass .ctick{stroke:rgba(255,255,255,.15);stroke-width:1.1;fill:none}
.hero__art--compass .ccross{stroke:rgba(255,255,255,.12);stroke-width:1;fill:none;
  stroke-dasharray:4 9}
.hero__art--compass .cletter{fill:rgba(190,214,240,.55);font-family:var(--ff-head);
  font-size:19px;font-weight:700;letter-spacing:.06em}
.hero__art--compass .crose{stroke:rgba(168,224,92,.34);stroke-width:.9}
.hero__art--compass .rmaj{fill:rgba(128,204,40,.13)}
.hero__art--compass .rmin{fill:rgba(180,222,216,.10)}
.hero__art--compass .csweep path{fill:none;stroke:var(--green-500);stroke-width:2.5;
  stroke-linecap:round;opacity:.42;filter:none}
.hero__art--compass .csweep{animation:spin 26s linear infinite;will-change:transform}
.hero__art--compass .cneedle{will-change:transform;
  animation:needleSwing 11s cubic-bezier(.36,.07,.25,1) infinite}
.hero__art--compass .nN{fill:rgba(128,204,40,.62)}
.hero__art--compass .nS{fill:rgba(226,236,250,.30)}
.hero__art--compass .chub{fill:rgba(11,21,38,.9);stroke:rgba(168,224,92,.6);stroke-width:1.5}
.hero__art--compass .chub2{fill:var(--green-300)}
/* Noktalar sabit: on ayrı öğeyi ayrı ayrı yanıp söndürmek, hero'da her kareye
   on katman daha ekliyordu. Hareketi tek bir yerde topluyoruz (ibre + tarama). */
.hero__art--compass .cdot{fill:#A0D6CE;fill-opacity:.45}
@keyframes needleSwing{0%,100%{rotate:38deg}18%{rotate:52deg}
  42%{rotate:31deg}64%{rotate:44deg}82%{rotate:36deg}}

/* kod penceresi */
.hero__art--code .cdwin{fill:rgba(255,255,255,.022);stroke:rgba(255,255,255,.13);stroke-width:1.2}
.hero__art--code .cdbar{stroke:rgba(255,255,255,.12);stroke-width:1}
.hero__art--code .cddot{fill:rgba(255,255,255,.22)}
.hero__art--code .cdd0{fill:rgba(128,204,40,.7)}
.hero__art--code .cdbrace{fill:rgba(128,204,40,.16);font-family:var(--ff-head);
  font-size:150px;font-weight:300}
.hero__art--code .cdline{fill:rgba(255,255,255,.16);opacity:0;
  transform:translateX(-10px);transform-box:fill-box;
  animation:cdIn .7s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*.09s + .25s)}
.hero__art--code .cdk{fill:rgba(128,204,40,.55)}
.hero__art--code .cds{fill:rgba(160,214,206,.45)}
.hero__art--code .cdm{fill:rgba(255,255,255,.09)}
.hero__art--code .cdcaret{fill:var(--green-300);animation:caret 1.15s steps(1) infinite}
.hero__art--code .cdsym{fill:rgba(160,214,206,.18);font-family:ui-monospace,SFMono-Regular,
  Menlo,Consolas,monospace;font-size:22px}
@keyframes cdIn{to{opacity:1;transform:none}}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---- 24.2 Arka planda süzülen kod --------------------------------------
   Metin canlı DOM değil: build sırasında döşenebilir SVG'ye çizilir
   (src/heroart.py). Tarayıcı dokuyu bir kez rasterleştirir, sonra yalnızca
   kaydırır. Canlı metin sürümü ana sayfayı ~16 fps aşağı çekiyordu.
   Sırıtmaması için: çok düşük opaklık, üstte/altta ve sol tarafta maskeyle
   erime, yavaş hız, komşu şeritlerde zıt yön. */
.codefx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:.075;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 66%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 16%,#000 66%,transparent)}
.codefx__col{position:absolute;top:0;width:250px;
  height:calc(100% + var(--tile,416px));
  background-repeat:repeat-y;background-position:0 0;
  background-size:250px var(--tile,416px);will-change:transform;
  animation-name:cfxUp;animation-duration:var(--dur,70s);animation-delay:var(--dly,0s);
  animation-timing-function:linear;animation-iteration-count:infinite}
.codefx__col--dn{animation-name:cfxDn}
.codefx__col.c1{background-image:url(../img/codefx-1.1e3af5362a.svg)}
.codefx__col.c2{background-image:url(../img/codefx-2.da1949199f.svg)}
.codefx__col.c3{background-image:url(../img/codefx-3.cf6987ff92.svg)}
@keyframes cfxUp{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,calc(var(--tile,416px) * -1),0)}}
@keyframes cfxDn{from{transform:translate3d(0,calc(var(--tile,416px) * -1),0)}
  to{transform:translate3d(0,0,0)}}
@media (max-width:900px){
  .codefx{opacity:.07}
  .codefx__col.c2{display:none}}
@media (prefers-reduced-motion:reduce){.codefx{display:none}}

/* ---- 24.3 Slayt kumandası ----------------------------------------------- */
.hero__foot{position:relative;z-index:3;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:1.5rem 2rem;
  padding-bottom:clamp(3rem,6vw,4.5rem)}
.hero__foot .hero__meta{margin-top:0;padding-top:0;border-top:0;flex:1 1 340px}
.hero__dots{display:flex;align-items:center;gap:.15rem;order:-1;flex:0 0 auto}
.hdot{appearance:none;background:none;border:0;padding:.7rem .3rem;cursor:pointer;
  display:grid;place-items:center;line-height:0}
.hdot i{display:block;width:26px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.22);transition:background-color .4s var(--ease-out),
  width .4s var(--ease-out)}
.hdot:hover i{background:rgba(255,255,255,.45)}
.hdot.is-on i{width:46px;background:linear-gradient(90deg,var(--green-500),var(--teal-500))}
/* etkin slaytta ilerleme çubuğu doldurulur */
.hdot.is-on i{position:relative;overflow:hidden;background:rgba(255,255,255,.22)}
.hdot.is-on i::after{content:"";position:absolute;inset:0;transform-origin:inline-start;
  background:linear-gradient(90deg,var(--green-500),var(--teal-500));
  transform:scaleX(0);animation:hdotFill var(--hero-dur,7s) linear forwards}
.hero--paused .hdot.is-on i::after{animation-play-state:paused}
@keyframes hdotFill{to{transform:scaleX(1)}}
.hplay{appearance:none;background:none;border:0;margin-inline-start:.6rem;cursor:pointer;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  color:rgba(255,255,255,.55);transition:color .3s,background-color .3s}
.hplay:hover{color:#fff;background:rgba(255,255,255,.09)}
.hplay i{display:block;width:9px;height:11px;
  border-inline-start:3px solid currentColor;border-inline-end:3px solid currentColor}
.hplay:not(.is-on) i{width:0;height:0;border:0;
  border-block-start:6px solid transparent;border-block-end:6px solid transparent;
  border-inline-start:10px solid currentColor;border-inline-end:0;margin-inline-start:3px}
.hero--slides .scroll-hint{bottom:.6rem;z-index:3}

@media (max-width:900px){
  .hslide{padding-block:clamp(3rem,9vw,4.5rem) 1.5rem}
  .hslide h1,.hslide__h{max-width:none}
  .hero__foot{padding-bottom:2.5rem;gap:1.25rem}
  .hero__foot .hero__meta{flex-basis:100%;gap:1rem 1.5rem}
  .hero__art-slot{opacity:0!important}
  .hero__art-slot.is-on{opacity:.62!important}
  .hero__art-slot[data-art="compass"],.hero__art-slot[data-art="code"]{
    inset-inline-end:-20%;inset-inline-start:auto;width:min(92%,430px);
    top:-10%;bottom:auto;height:min(72%,430px)}
  .hero__art-stack{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 26%,transparent 46%);
            mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 26%,transparent 46%)}}

@media (prefers-reduced-motion:reduce){
  .hslide,.js .hslide__inner > *,.hero__art-slot{transition-duration:.01ms!important}
  .hero__art--compass .csweep,.hero__art--compass .cneedle,
  .hero__art--compass .cdot,.hero__art--code .cdsym,
  .hero__art--code .cdcaret{animation:none!important}
  .hero__art--code .cdline{opacity:1;transform:none;animation:none}
  .hdot.is-on i::after{animation:none;transform:scaleX(1)}}

.anim-off .codefx__col,.anim-off .hero__art--compass .csweep,
.anim-off .hero__art--compass .cneedle,.anim-off .hero__art--compass .cdot,
.anim-off .hero__art--code .cdsym,.anim-off .hero__art--code .cdcaret,
.anim-off .lmq__track{animation-play-state:paused!important}

/* ---- 25. Logo şeridi ----------------------------------------------------- */
/* İki özdeş yarı yan yana; parça %50 kaydırılınca başa döner, dikiş görünmez. */
.lmq{position:relative;overflow:hidden;padding-block:.35rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lmq__track{display:flex;width:max-content;will-change:transform;
  animation:lmqRun var(--lmq-dur,64s) linear infinite}
.lmq__half{display:flex;align-items:stretch;gap:clamp(.6rem,1.4vw,1rem);
  padding-inline-end:clamp(.6rem,1.4vw,1rem)}
.lmq .lmq__item{flex:0 0 auto;width:clamp(146px,17vw,188px);min-height:106px;
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1rem .85rem;
  transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out)}
.lmq__item img{width:100%;max-width:150px;height:auto;aspect-ratio:2/1;object-fit:contain;
  filter:saturate(.88) opacity(.82);transition:filter .4s var(--ease-out)}
.lmq__item:hover img{filter:saturate(1) opacity(1)}
.lmq__item b{font-family:var(--ff-head);font-weight:750;font-size:.95rem;color:var(--ink-3)}
@keyframes lmqRun{to{transform:translate3d(-50%,0,0)}}
.lmq:hover .lmq__track,.lmq:focus-within .lmq__track{animation-play-state:paused}
:root[data-theme="dark"] .lmq .lmq__item,
.section--navy .lmq .lmq__item{background:#EEF2F7;border-color:rgba(18,32,60,.10)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lmq .lmq__item{background:#EEF2F7;border-color:rgba(18,32,60,.10)}}
@media (max-width:640px){
  .lmq .lmq__item{width:130px;min-height:88px;padding:.75rem .6rem}
  .lmq__item img{max-width:110px}
  .lmq__track{animation-duration:calc(var(--lmq-dur,64s) * .72)}}
@media (prefers-reduced-motion:reduce){
  .lmq{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lmq__track{animation:none}
  .lmq__half:nth-child(2){display:none}}

/* ---- 26. Hizmet sayfası başlık motifi ------------------------------------
   Fotoğrafın üstüne binen çizgisel bir kompozisyon: dolgu neredeyse yok,
   çizgiler ince ve sönük. Metin sütununu daraltmadan sağdaki boşluğu
   dolduruyor; 900px altında gizleniyor çünkü orada boşluk zaten kalmıyor. */
.phero--art .phero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  align-items:center;gap:clamp(1.5rem,4vw,3rem)}
.phero--art .phero__text{min-width:0}
.phero__art{justify-self:end;width:100%;max-width:380px;line-height:0}
.svcart{width:100%;height:auto;overflow:visible;opacity:.9}
.svcart .a{fill:none;stroke:rgba(190,214,240,.30);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.svcart .b{fill:none;stroke:rgba(168,224,92,.44);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.svcart .b2{fill:rgba(190,214,240,.28)}
.svcart .c{fill:none;stroke:var(--green-500);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.svcart .n{fill:var(--green-300)}
.svcart .d{fill:#A0D6CE;fill-opacity:.42}
.svcart .l{fill:rgba(255,255,255,.20);stroke:none}
.svcart .hub{fill:rgba(11,21,38,.85);stroke:rgba(168,224,92,.55);stroke-width:1.6}
.svcart .s{fill:rgba(128,204,40,.14);stroke:none}
.svcart--shield .s{fill:none;stroke:var(--green-300);stroke-width:1.6;opacity:.55}

/* hareket: her motifte en fazla iki öğe */
.svcart .spin{transform-origin:200px 140px;animation:spin 9s linear infinite;
  will-change:transform}
.svcart .spin2{transform-origin:200px 140px;animation:spin 16s linear infinite;
  will-change:transform}
.svcart .scan{animation:svcScan 5.5s cubic-bezier(.5,0,.5,1) infinite;
  will-change:transform}
@keyframes svcScan{0%{transform:translateY(-46px);opacity:0}
  15%{opacity:1}85%{opacity:1}100%{transform:translateY(64px);opacity:0}}
.svcart .pulse{fill:none;stroke:var(--green-500);stroke-width:1.4;
  transform-box:fill-box;transform-origin:50% 50%;
  animation:svcPulse 4.2s ease-out infinite;will-change:transform,opacity}
@keyframes svcPulse{0%{transform:scale(.5);opacity:.55}100%{transform:scale(2.2);opacity:0}}
.svcart .caret{fill:var(--green-300);animation:caret 1.15s steps(1) infinite}
.svcart .arr{opacity:0;animation:svcArr 3.4s ease-out infinite}
.svcart .a0{animation-delay:0s}.svcart .a1{animation-delay:.28s}
.svcart .a2{animation-delay:.56s}.svcart .a3{animation-delay:.84s}
@keyframes svcArr{0%{opacity:0;transform:translateX(-10px)}
  25%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateX(10px)}}
.svcart .slide{animation:svcSlide 5s ease-in-out infinite;will-change:transform}
@keyframes svcSlide{0%,8%{transform:translateX(0)}
  46%,54%{transform:translateX(114px)}92%,100%{transform:translateX(228px)}}
.svcart--rack .n0{animation:twinkle 3s ease-in-out infinite}
.svcart--rack .n1{animation:twinkle 3s ease-in-out infinite;animation-delay:-1s}
.svcart--rack .n2{animation:twinkle 3s ease-in-out infinite;animation-delay:-2s}

@media (max-width:900px){
  .phero--art .phero__inner{display:block}
  .phero__art{display:none}}
@media (prefers-reduced-motion:reduce){
  .svcart *{animation:none!important}
  .svcart .pulse,.svcart .arr{opacity:.35}}
.anim-off .svcart *{animation-play-state:paused!important}

/* ---- 27. Faaliyet ve eğitim listeleri ------------------------------------ */
.icard--list h2{font-size:var(--step-1);margin:0 0 .5rem}
.minilist{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.45rem;
  border-top:1px solid var(--line);padding-top:.9rem}
.minilist li{position:relative;padding-inline-start:1.1rem;font-size:var(--step--1);
  color:var(--ink-2);line-height:1.5}
.minilist li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--green-500)}

/* dört adımlık süreç şeridi */
.steps{list-style:none;padding:0;margin:0 0 clamp(2.5rem,5vw,4rem);
  display:grid;gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.step{position:relative;padding:1.4rem 1.2rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.step__n{display:block;font-family:var(--ff-head);font-size:.8rem;font-weight:750;
  letter-spacing:.16em;color:var(--green-300);margin-bottom:.5rem}
.step h3{font-size:var(--step-0);margin:0 0 .35rem;color:#fff}
.step p{margin:0;font-size:var(--step--1);color:#B9C6DC;line-height:1.55}
.step::after{content:"";position:absolute;inset-inline:1.2rem;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--green-500),transparent);
  transform:scaleX(0);transform-origin:inline-start;
  transition:transform .6s var(--ease-out)}
.is-in .step::after,.step.is-in::after{transform:scaleX(1)}

/* eğitim grupları */
.trgroup__head{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.trgroup__head h2{font-size:var(--step-1);margin:0}
.trlist{list-style:none;padding:0;margin:0;display:grid}
.trlist li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem 1rem;padding:.7rem 0;border-top:1px solid var(--line)}
.trlist li:first-child{border-top:0}
.trlist__name{font-weight:600;color:var(--ink-1);font-size:var(--step--1);line-height:1.4}
.trlist__meta{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.trlist__meta em{font-style:normal;font-size:.68rem;font-weight:650;letter-spacing:.04em;
  color:var(--green-700);background:rgba(128,204,40,.12);
  padding:.16rem .5rem;border-radius:999px;white-space:nowrap}
.trlist__meta span{font-size:.72rem;color:var(--ink-3);white-space:nowrap}
:root[data-theme="dark"] .trlist__meta em{color:var(--green-300);background:rgba(128,204,40,.16)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .trlist__meta em{color:var(--green-300);background:rgba(128,204,40,.16)}}
@media (max-width:480px){
  .trlist li{flex-direction:column;align-items:flex-start;gap:.3rem}}

/* ---- 28. Haber kartları --------------------------------------------------- */
.card--news .card__body{display:grid;gap:.5rem;align-content:start}
.card--news h3{font-size:var(--step-0);line-height:1.35;margin:0}
.card--news p{margin:0;font-size:var(--step--1);color:var(--ink-2);line-height:1.55}
.card--news .link-more{margin-top:.35rem;font-size:var(--step--1);font-weight:650;
  color:var(--green-700);text-decoration:none;justify-self:start}
:root[data-theme="dark"] .card--news .link-more{color:var(--green-300)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card--news .link-more{color:var(--green-300)}}

/* ---- 29. AR-GE proje kartı görselleri ------------------------------------
   Kartlarda fotoğraf yok; yerine projeyi anlatan çizgisel bir kompozisyon
   duruyor. Açık zeminde durduğu için renkler hero motiflerinden farklı. */
.card__media--art{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2,#F3F6FA)}
.pjart{display:block;width:100%;height:100%}
.pjart .bg{fill:#EEF3F8}
.pjart .a{fill:none;stroke:rgba(18,32,60,.26);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pjart .b{fill:none;stroke:var(--green-700);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pjart .b2{fill:none;stroke:var(--teal-600,#2F8C80);stroke-width:2}
.pjart .c{fill:none;stroke:rgba(18,32,60,.34);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.pjart .n{fill:var(--green-600,#67A81F)}
.pjart .d{fill:rgba(18,32,60,.30)}
.pjart .p0{fill:rgba(18,32,60,.10)}
.pjart .p1{fill:rgba(128,204,40,.45)}
.pjart .ok{fill:none;stroke:var(--green-600,#67A81F);stroke-width:1.8}
.pjart .no{fill:none;stroke:rgba(18,32,60,.28);stroke-width:1.8}
.pjart .sev1{fill:#D9463E}.pjart .sev2{fill:#E0A21B}.pjart .sev3{fill:var(--green-600,#67A81F)}
.pjart .caret{fill:var(--green-700);animation:caret 1.15s steps(1) infinite}
.pjart .pulse{fill:none;stroke:var(--green-500);stroke-width:1.5;
  transform-box:fill-box;transform-origin:50% 50%;
  animation:svcPulse 4.6s ease-out infinite}
.pjart .spin{transform-origin:210px 118px;animation:spin 14s linear infinite}
.pjart .dash{stroke-dasharray:5 7}
.pjart .a0{animation:svcArr 3.4s ease-out infinite}
.pjart .a1{animation:svcArr 3.4s ease-out infinite;animation-delay:.35s}
.pjart .a2{animation:svcArr 3.4s ease-out infinite;animation-delay:.7s}
:root[data-theme="dark"] .pjart .bg{fill:#101C31}
:root[data-theme="dark"] .pjart .a{stroke:rgba(214,228,246,.24)}
:root[data-theme="dark"] .pjart .c{stroke:rgba(214,228,246,.30)}
:root[data-theme="dark"] .pjart .b{stroke:var(--green-300)}
:root[data-theme="dark"] .pjart .p0{fill:rgba(214,228,246,.10)}
:root[data-theme="dark"] .pjart .d{fill:rgba(214,228,246,.30)}
:root[data-theme="dark"] .pjart .caret{fill:var(--green-300)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pjart .bg{fill:#101C31}
  :root:not([data-theme="light"]) .pjart .a{stroke:rgba(214,228,246,.24)}
  :root:not([data-theme="light"]) .pjart .c{stroke:rgba(214,228,246,.30)}
  :root:not([data-theme="light"]) .pjart .b{stroke:var(--green-300)}
  :root:not([data-theme="light"]) .pjart .p0{fill:rgba(214,228,246,.10)}
  :root:not([data-theme="light"]) .pjart .d{fill:rgba(214,228,246,.30)}
  :root:not([data-theme="light"]) .pjart .caret{fill:var(--green-300)}}
/* kart görseli fotoğraf değil: yakınlaşma efekti kapalı dursun */
.card--proj:hover .card__media--art .pjart{transform:none}
@media (prefers-reduced-motion:reduce){.pjart *{animation:none!important}}
.anim-off .pjart *{animation-play-state:paused!important}

/* ---- 30. Konu kartı: üstte şerit grafik + küçük simgeli başlık ----------
   Faaliyet ve eğitim kartlarında başlıklar tek başına duruyordu ve ölçü
   olarak da ağır kaçıyordu. Grafik şerit görsel çapa oluyor, simge konuyu
   ikinci kez işaretliyor, başlık bir kademe küçüldü. */
.card__media--band{aspect-ratio:420/112;overflow:hidden;background:#EEF3F8}
.cdart{display:block;width:100%;height:100%}
.cdart .bg{fill:#EEF3F8}
.cdart .a{fill:none;stroke:rgba(18,32,60,.26);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cdart .b{fill:none;stroke:var(--green-700);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cdart .b2{fill:none;stroke:var(--teal-600,#2F8C80);stroke-width:2}
.cdart .c{fill:none;stroke:rgba(18,32,60,.34);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.cdart .n{fill:var(--green-600,#67A81F)}
.cdart .d{fill:rgba(18,32,60,.24)}
.cdart .p0{fill:rgba(18,32,60,.10)}
.cdart .p1{fill:rgba(128,204,40,.45)}
.cdart .s{fill:rgba(128,204,40,.18);stroke:none}
.cdart .sev1{fill:#D9463E}.cdart .sev2{fill:#E0A21B}.cdart .sev3{fill:var(--green-600,#67A81F)}
.cdart .spin{transform-origin:92px 56px;animation:spin 11s linear infinite}
:root[data-theme="dark"] .card__media--band,
:root[data-theme="dark"] .cdart .bg{background:#101C31;fill:#101C31}
:root[data-theme="dark"] .cdart .a{stroke:rgba(214,228,246,.24)}
:root[data-theme="dark"] .cdart .c{stroke:rgba(214,228,246,.30)}
:root[data-theme="dark"] .cdart .b{stroke:var(--green-300)}
:root[data-theme="dark"] .cdart .p0{fill:rgba(214,228,246,.10)}
:root[data-theme="dark"] .cdart .d{fill:rgba(214,228,246,.26)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card__media--band,
  :root:not([data-theme="light"]) .cdart .bg{background:#101C31;fill:#101C31}
  :root:not([data-theme="light"]) .cdart .a{stroke:rgba(214,228,246,.24)}
  :root:not([data-theme="light"]) .cdart .c{stroke:rgba(214,228,246,.30)}
  :root:not([data-theme="light"]) .cdart .b{stroke:var(--green-300)}
  :root:not([data-theme="light"]) .cdart .p0{fill:rgba(214,228,246,.10)}
  :root:not([data-theme="light"]) .cdart .d{fill:rgba(214,228,246,.26)}}

.card--topic .card__body{display:grid;gap:.6rem;align-content:start}
.topic__head{display:flex;align-items:center;gap:.6rem}
.topic__icon{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;
  border-radius:9px;background:rgba(128,204,40,.14);color:var(--green-700)}
.topic__icon svg{width:18px;height:18px}
:root[data-theme="dark"] .topic__icon{color:var(--green-300)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .topic__icon{color:var(--green-300)}}
.card--topic h2{font-size:var(--step-0);line-height:1.25;margin:0;letter-spacing:-.01em}
.card--topic > .card__body > p{margin:0;font-size:var(--step--1);color:var(--ink-2);
  line-height:1.55}
.card--topic .minilist{margin-top:.35rem}
.card--topic:hover .card__media--band .cdart{transform:none}
.trgroup .trlist{margin-top:.3rem}
@media (prefers-reduced-motion:reduce){.cdart *{animation:none!important}}
.anim-off .cdart *{animation-play-state:paused!important}

/* ---- 31. Uyarlanabilir hafifletme ---------------------------------------
   site.js sayfa oturduktan sonra gerçek kare hızını ölçer; eşiğin altındaysa
   kök öğeye .perf-lite ekler. Burada kapatılanlar tamamen dekoratif olanlar;
   içerik, düzen ve etkileşim aynen kalır. */
.perf-lite .codefx{display:none}
.perf-lite .aurora span{animation:none}
.perf-lite .hero__grid::after{animation:none}
.perf-lite .hero__pk{display:none}
.perf-lite .svcart .pulse,
.perf-lite .pjart .pulse,
.perf-lite .cdart .spin{animation:none;opacity:.3}