/* ==========================================================================
   ACC TEKNOLOJİ — Kayseri Yazılım
   Tasarım dili: VOYA esintili · Siyah-beyaz ana yapı · Lacivert (logo) +
   sıcak turuncu/kırmızı vurgular · Büyük grotesk tipografi · Yumuşak kartlar.
   Not: Tüm sınıf adları ve HTML/SEO içeriği korunmuştur; yalnızca görsel katman değişti.
   ========================================================================== */

/* VOYA karakterinde sıcak-geometrik grotesk: General Sans (tek aile, başlık + gövde) */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root{
  /* ---- Marka çekirdeği ---- */
  --siyah:#0A0A0A;
  --siyah-2:#141414;
  --beyaz:#FFFFFF;
  --kum:#F4F4F2;
  --kum-2:#ECECE8;
  --lacivert:#031F50;
  --lacivert-acik:#1B3A73;
  --mavi:#2E5BC0;
  --mavi-acik:#4F7BE0;

  /* ---- Sıcak vurgular ---- */
  --turuncu:#F0641E;
  --turuncu-acik:#FF8A46;
  --kirmizi:#E4322B;
  --amber:#F5A623;
  --whatsapp:#25D366;

  /* ---- Eski değişken adları (HTML inline uyumu için korunur) ---- */
  --guven-mavisi:var(--lacivert);
  --guven-mavisi-koyu:#02163A;
  --guven-mavisi-acik:var(--mavi);
  --bakir-amber:var(--turuncu);
  --bakir-amber-koyu:#C44E12;
  --filiz-yesili:#2E9E8C;
  --gece-petrol:var(--siyah);
  --gece-petrol-acik:var(--siyah-2);
  --sis-beyazi:var(--kum);
  --bulut-grisi:#E3E3DF;
  --murekkep:#161616;
  --murekkep-soft:#5B5B57;
  --murekkep-hafif:#9A9A94;

  --kilcal:rgba(10,10,10,.10);
  --kilcal-koyu:rgba(255,255,255,.14);

  /* ---- Tipografi ---- */
  --font-baslik:'General Sans','Manrope','Inter',system-ui,-apple-system,sans-serif;
  --font-govde:'General Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-teknik:'General Sans','Inter',system-ui,sans-serif;

  /* ---- Ölçü ---- */
  --kapsayici:1320px;
  --r:14px;
  --r-l:22px;
  --r-xl:28px;
  --tel:1px;
  --gecis:.55s cubic-bezier(.16,1,.3,1);
  --gecis-hizli:.28s cubic-bezier(.16,1,.3,1);
  --golge:0 1px 2px rgba(10,10,10,.04),0 8px 30px rgba(10,10,10,.06);
  --golge-yuksek:0 20px 60px rgba(10,10,10,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-govde);
  color:var(--murekkep);background:var(--beyaz);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--lacivert);text-decoration:none}

/* -------------------------------------------------- Tip ölçeği */
h1,h2,h3,h4{font-family:var(--font-baslik);color:var(--siyah);letter-spacing:-.025em;line-height:1.06;font-weight:600;margin:0}
h1{font-size:clamp(2.6rem,6.2vw,5rem);font-weight:600}
h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:600}
h3{font-size:1.3rem;font-weight:600;letter-spacing:-.015em}
h4{font-size:1rem;font-weight:600}
p{margin:0 0 1rem;color:var(--murekkep)}
strong{font-weight:700;color:var(--siyah)}
.bolum--koyu strong{color:#fff}
::selection{background:var(--turuncu);color:#fff}
:focus-visible{outline:2px solid var(--turuncu);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;background:var(--siyah);color:#fff;padding:12px 20px;z-index:9999;border-radius:8px}
.skip-link:focus{left:16px;top:16px}

/* -------------------------------------------------- Yerleşim */
.kapsayici{width:100%;max-width:var(--kapsayici);margin:0 auto;padding:0 40px}
.bolum{padding:104px 0;position:relative}
.bolum--sis{background:var(--kum)}
.bolum--koyu{background:var(--siyah);color:#C9C9C4}
.bolum--koyu h1,.bolum--koyu h2,.bolum--koyu h3,.bolum--koyu h4{color:#fff}
.bolum--koyu p{color:#A7A7A2}

/* İmza teknik öğeleri (bakır tel / sayaç) — VOYA sadeliği için gizlendi */
.tel-rayi,.tel-sayac{display:none!important}

/* -------------------------------------------------- Eyebrow etiket */
.etiket{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-teknik);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--turuncu);margin-bottom:20px;
}
.etiket::before{content:"";width:26px;height:2px;background:var(--turuncu);border-radius:2px}
.bolum--koyu .etiket{color:var(--turuncu-acik)}
.bolum--koyu .etiket::before{background:var(--turuncu-acik)}

.bolum-basligi{max-width:820px;margin-bottom:56px}
.bolum-basligi h2{margin-bottom:6px}
.bolum-basligi p{color:var(--murekkep-soft);font-size:1.12rem;margin-top:18px;line-height:1.65}
.bolum--koyu .bolum-basligi p{color:#9C9C97}

/* -------------------------------------------------- Butonlar */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--font-baslik);font-weight:700;font-size:.98rem;letter-spacing:-.01em;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  transition:transform var(--gecis-hizli),background var(--gecis-hizli),color var(--gecis-hizli),box-shadow var(--gecis-hizli);
  position:relative;white-space:nowrap;line-height:1;
}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px)}
.btn--amber{background:var(--siyah);color:#fff}
.btn--amber:hover{background:var(--turuncu);color:#fff;box-shadow:0 10px 26px rgba(240,100,30,.35)}
.btn--mavi{background:var(--lacivert);color:#fff}
.btn--mavi:hover{background:var(--mavi);color:#fff;box-shadow:0 10px 26px rgba(46,91,192,.32)}
.btn--cizgi{background:transparent;color:var(--siyah);border-color:rgba(10,10,10,.22)}
.btn--cizgi:hover{background:var(--siyah);color:#fff;border-color:var(--siyah)}
.bolum--koyu .btn--cizgi{color:#fff;border-color:rgba(255,255,255,.3)}
.bolum--koyu .btn--cizgi:hover{background:#fff;color:var(--siyah)}
.btn--wa{background:var(--whatsapp);color:#fff}
.btn--wa:hover{filter:brightness(1.06);box-shadow:0 10px 26px rgba(37,211,102,.32)}
.btn-grubu{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ==========================================================================
   ÜST BAR (VOYA tarzı floating navbar)
   ========================================================================== */
.ust-bar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;background:transparent;
  transition:background var(--gecis-hizli),box-shadow var(--gecis-hizli),padding var(--gecis-hizli),border-color var(--gecis-hizli);
  border-bottom:1px solid transparent;
}
.ust-bar.kayiyor{
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 rgba(10,10,10,.06);border-bottom-color:rgba(10,10,10,.06);padding:12px 0;
}
.ust-bar-ic{display:flex;align-items:center;gap:24px}

.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo img{height:34px;width:auto;transition:opacity var(--gecis-hizli)}
.logo .logo-acik{display:none}
.ust-bar.kayiyor .logo .logo-koyu{display:none}
.ust-bar.kayiyor .logo .logo-acik{display:block}

/* Kırıntı (breadcrumb) — header altına hizalı, arka plana göre renk uyarlı */
.kirinti{position:absolute;top:86px;left:0;right:0;z-index:6}
.kirinti ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.82rem;line-height:1.4}
.kirinti li{display:flex;align-items:center;gap:9px;min-width:0}
.kirinti li+li::before{content:"";width:5px;height:5px;flex:0 0 auto;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.5}
.kirinti a{text-decoration:none;transition:color var(--gecis-hizli);white-space:nowrap}
.kirinti span[aria-current="page"]{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,520px)}
/* Koyu hero üzerindeki sayfalar (varsayılan): açık renk */
.kirinti li{color:rgba(255,255,255,.5)}
.kirinti a{color:rgba(255,255,255,.72)}
.kirinti a:hover{color:#fff}
.kirinti span[aria-current="page"]{color:#fff}
/* Açık zeminli sayfalar (blog yazısı, kvkk): koyu renk */
.kirinti:has(+ main > .bolum:first-child) li{color:rgba(10,10,10,.4)}
.kirinti:has(+ main > .bolum:first-child) a{color:var(--mavi)}
.kirinti:has(+ main > .bolum:first-child) a:hover{color:var(--lacivert)}
.kirinti:has(+ main > .bolum:first-child) span[aria-current="page"]{color:var(--siyah)}
@media (max-width:640px){.kirinti{top:74px}.kirinti ol{font-size:.76rem;gap:7px}}

nav[aria-label="Ana menü"]{margin-inline:auto}
.menu{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
.menu > li{position:relative}
.menu a,.acilir-btn{
  font-family:var(--font-baslik);font-weight:500;font-size:1rem;letter-spacing:-.005em;
  color:#fff;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;padding:6px 0;transition:color var(--gecis-hizli);
}
.menu a:hover,.acilir-btn:hover{color:var(--turuncu-acik)}
.menu a[aria-current="page"]{color:var(--turuncu-acik)}
.ust-bar.kayiyor .menu a,.ust-bar.kayiyor .acilir-btn{color:var(--siyah)}
.ust-bar.kayiyor .menu a:hover,.ust-bar.kayiyor .acilir-btn:hover{color:var(--turuncu)}
.acilir-btn svg{width:16px;height:16px;transition:transform var(--gecis-hizli)}
.acilir-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.acilir{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);
  width:min(640px,88vw);background:#fff;border:1px solid rgba(10,10,10,.08);
  border-radius:var(--r-l);box-shadow:var(--golge-yuksek);padding:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--gecis-hizli),transform var(--gecis-hizli),visibility var(--gecis-hizli);
}
.acilir[data-acik="true"]{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.acilir a{display:flex;flex-direction:column;gap:1px;padding:11px 13px;border-radius:12px;color:var(--siyah);position:relative;transition:background var(--gecis-hizli)}
.acilir a:hover{background:var(--kum)}
.acilir a .no{font-family:var(--font-teknik);font-size:.66rem;font-weight:700;color:var(--turuncu);letter-spacing:.1em}
.acilir a strong{font-size:.94rem;font-weight:700;color:var(--siyah)}
.acilir a small{font-size:.78rem;color:var(--murekkep-soft)}

.ust-cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.ust-tel{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-baslik);
  font-weight:600;font-size:.92rem;color:#fff;transition:color var(--gecis-hizli)
}
.ust-tel svg{width:17px;height:17px}
.ust-bar.kayiyor .ust-tel{color:var(--siyah)}
.ust-tel:hover{color:var(--turuncu-acik)}
.ust-cta .btn{padding:12px 22px;background:#fff;color:var(--siyah)}
.ust-cta .btn:hover{background:var(--turuncu);color:#fff}
.ust-bar.kayiyor .ust-cta .btn{background:var(--siyah);color:#fff}
.ust-bar.kayiyor .ust-cta .btn:hover{background:var(--turuncu)}

/* Açık zeminli sayfalar (blog yazısı, kvkk): header baştan solid + koyu metin */
.ust-bar:has(~ main > .bolum:first-child){background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(10,10,10,.06);border-bottom-color:rgba(10,10,10,.06)}
.ust-bar:has(~ main > .bolum:first-child) .logo .logo-koyu{display:none}
.ust-bar:has(~ main > .bolum:first-child) .logo .logo-acik{display:block}
.ust-bar:has(~ main > .bolum:first-child) .menu a,.ust-bar:has(~ main > .bolum:first-child) .acilir-btn{color:var(--siyah)}
.ust-bar:has(~ main > .bolum:first-child) .menu a:hover,.ust-bar:has(~ main > .bolum:first-child) .acilir-btn:hover{color:var(--turuncu)}
.ust-bar:has(~ main > .bolum:first-child) .menu a[aria-current="page"]{color:var(--turuncu)}
.ust-bar:has(~ main > .bolum:first-child) .ust-tel{color:var(--siyah)}
.ust-bar:has(~ main > .bolum:first-child) .ust-cta .btn{background:var(--siyah);color:#fff}
.ust-bar:has(~ main > .bolum:first-child) .ust-cta .btn:hover{background:var(--turuncu)}
.ust-bar:has(~ main > .bolum:first-child) .menu-btn{color:var(--siyah)}
.ust-bar:has(~ main > .bolum:first-child) .dil{color:var(--siyah)}

.menu-btn{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:6px}
.menu-btn svg{width:26px;height:26px}
.ust-bar.kayiyor .menu-btn{color:var(--siyah)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:radial-gradient(120% 90% at 78% 30%,#1c1c1c 0%,#0d0d0d 42%,#070707 100%);
  color:#fff;padding:150px 0 90px;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 40% at 82% 68%,rgba(240,100,30,.16),transparent 60%),
    radial-gradient(40% 40% at 12% 12%,rgba(46,91,192,.14),transparent 60%);
}
.hero::after{
  content:"VA";position:absolute;right:-2%;bottom:-14%;
  font-family:var(--font-baslik);font-weight:800;font-size:44vh;line-height:.8;
  color:rgba(255,255,255,.028);letter-spacing:-.06em;pointer-events:none;user-select:none;
}
.hero-ic{position:relative;max-width:960px}
.hero-etiket{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-teknik);font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:#D8D8D2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  padding:8px 16px;border-radius:999px;margin-bottom:30px;
}
.hero-etiket .nokta{width:8px;height:8px;border-radius:50%;background:var(--turuncu);box-shadow:0 0 0 4px rgba(240,100,30,.25)}
.hero h1{color:#fff;font-size:clamp(2.7rem,6.6vw,5.4rem);line-height:1.02;letter-spacing:-.03em;font-weight:600}
.hero h1 .satir{display:block;overflow:hidden}
.hero h1 em{font-style:normal;color:var(--turuncu)}
.hero-alt{max-width:660px;margin-top:26px;font-size:1.18rem;line-height:1.6;color:#B9B9B3}
.hero-alt strong{color:#fff}
.hero .btn-grubu .btn--amber{background:#fff;color:var(--siyah)}
.hero .btn-grubu .btn--amber:hover{background:var(--turuncu);color:#fff}
.hero-guven{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:40px}
.hero-guven div{display:flex;align-items:center;gap:9px;font-size:.92rem;color:#CFCFC9}
.hero-guven svg{width:18px;height:18px;color:var(--turuncu);flex:0 0 auto}

/* ==========================================================================
   GİRİŞ ANİMASYONU
   ========================================================================== */
.gir{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.gir.gorunur{opacity:1;transform:none}
[data-gecikme="1"]{transition-delay:.08s}
[data-gecikme="2"]{transition-delay:.16s}
[data-gecikme="3"]{transition-delay:.24s}
[data-gecikme="4"]{transition-delay:.32s}
[data-gecikme="5"]{transition-delay:.4s}

/* ==========================================================================
   HİZMET KARTLARI
   ========================================================================== */
.kart-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kart{
  --accent:var(--lacivert);--accent2:var(--mavi);
  background:var(--beyaz);border:1px solid rgba(10,10,10,.08);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--gecis),box-shadow var(--gecis),border-color var(--gecis);
}
.kart:hover{transform:translateY(-6px);box-shadow:var(--golge-yuksek);border-color:transparent}
.kart-izgara .kart:nth-child(9n+1){--accent:var(--lacivert);--accent2:var(--mavi)}
.kart-izgara .kart:nth-child(9n+2){--accent:var(--mavi);--accent2:var(--mavi-acik)}
.kart-izgara .kart:nth-child(9n+3){--accent:var(--turuncu);--accent2:var(--turuncu-acik)}
.kart-izgara .kart:nth-child(9n+4){--accent:var(--filiz-yesili);--accent2:#48C4B0}
.kart-izgara .kart:nth-child(9n+5){--accent:var(--kirmizi);--accent2:#F4574F}
.kart-izgara .kart:nth-child(9n+6){--accent:var(--amber);--accent2:#FFC85A}
.kart-izgara .kart:nth-child(9n+7){--accent:var(--lacivert-acik);--accent2:var(--mavi)}
.kart-izgara .kart:nth-child(9n+8){--accent:var(--turuncu);--accent2:var(--kirmizi)}
.kart-izgara .kart:nth-child(9n+9){--accent:var(--mavi);--accent2:var(--filiz-yesili)}

.kart-gorsel{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--kum)}
.kart-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.kart:hover .kart-gorsel img{transform:scale(1.05)}
.kart-gorsel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,10,10,.35));opacity:.5}

/* Sektör kartı — görselsiz, aksan başlık bandı */
.sektor-ust{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-content:center;padding:16px 18px;min-height:72px;color:#fff;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.16) 47%,transparent 58%) no-repeat,linear-gradient(140deg,var(--accent),var(--accent2));background-size:260% 100%,auto;background-position:170% 0,0 0}
.sektor-ust::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 130% at 100% 0,rgba(255,255,255,.24),transparent 55%),linear-gradient(0deg,rgba(8,10,18,.18),transparent 62%)}
.sektor-ust::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.sektor-ust>*{position:relative;z-index:1}
.sektor-ust .kart-no{display:none}
.sektor-ikon{grid-column:1;grid-row:1 / span 2;align-self:center;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);box-shadow:0 5px 14px rgba(0,0,0,.16);margin:0}
.sektor-ikon svg{width:22px;height:22px}
.sektor-ust h3{grid-column:2;grid-row:1;align-self:end;color:#fff;font-size:1.12rem;line-height:1.12;margin:0}
.sektor-slogan{grid-column:2;grid-row:2;align-self:start;margin:3px 0 0;font-size:.82rem;font-weight:500;color:rgba(255,255,255,.84)}
.sektor-deko{position:absolute;right:-6px;bottom:-10px;width:96px;height:96px;color:#fff;opacity:.16;pointer-events:none}
.sektor-ust>.sektor-deko{z-index:0}
.sektor-deko svg{width:100%;height:100%;display:block}
.sektor-deko svg *{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Sektör kartı — premium hover koreografisi */
.sektor-kart .sektor-ust{transition:filter var(--gecis)}
.sektor-kart:hover .sektor-ust{filter:brightness(1.05);background-position:-60% 0,0 0;transition:background-position .7s cubic-bezier(.22,1,.36,1),filter var(--gecis)}
.sektor-kart{transition:transform var(--gecis),box-shadow var(--gecis),border-color var(--gecis)}
.sektor-kart:hover{transform:translateY(-6px);box-shadow:0 18px 40px -16px color-mix(in srgb,var(--accent) 36%,transparent),0 8px 20px rgba(10,10,10,.08)}
.sektor-deko{transition:opacity var(--gecis),transform var(--gecis)}
.sektor-kart:hover .sektor-deko{opacity:.24;transform:translate(-4px,-4px) scale(1.05)}
.sektor-ikon{transition:transform var(--gecis),background var(--gecis-hizli),box-shadow var(--gecis)}
.sektor-kart:hover .sektor-ikon{transform:translateY(-2px);background:rgba(255,255,255,.22);box-shadow:0 8px 18px rgba(0,0,0,.2)}
.kart:hover .kart-link svg{transform:translateX(3px)}

/* Vaka çalışması (referans) kartları — kanıt bloklu, profesyonel */
.ref-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ref-kart{--accent:var(--lacivert);--accent2:var(--mavi);position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:var(--r-l);padding:22px 22px 20px;overflow:hidden;transition:transform var(--gecis),box-shadow var(--gecis),border-color var(--gecis)}
.ref-kart::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.ref-kart:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 18px 40px -16px color-mix(in srgb,var(--accent) 30%,transparent),0 8px 20px rgba(10,10,10,.08)}
.ref-izgara .ref-kart:nth-child(6n+2){--accent:var(--mavi);--accent2:var(--mavi-acik)}
.ref-izgara .ref-kart:nth-child(6n+3){--accent:var(--turuncu);--accent2:var(--turuncu-acik)}
.ref-izgara .ref-kart:nth-child(6n+4){--accent:var(--filiz-yesili);--accent2:#48C4B0}
.ref-izgara .ref-kart:nth-child(6n+5){--accent:var(--kirmizi);--accent2:#F4574F}
.ref-izgara .ref-kart:nth-child(6n+6){--accent:var(--amber);--accent2:#FFC85A}
.ref-kart .sektor{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,#fff);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);padding:4px 11px;border-radius:999px;margin-bottom:13px}
.ref-kart .sektor::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ref-kart h3{font-size:1.12rem;line-height:1.25;margin:0 0 9px}
.ref-kart>p{font-size:.9rem;line-height:1.55;color:var(--murekkep-soft);margin:0}
.ref-kart .cikti{display:grid;grid-template-columns:1fr;gap:8px;margin-top:15px;padding-top:15px;border-top:1px dashed rgba(10,10,10,.12)}
.ref-kart .cikti span{display:flex;align-items:baseline;gap:9px;font-size:.85rem;font-weight:500;color:var(--siyah)}
.ref-kart .cikti b{font-family:var(--font-teknik);font-weight:700;font-size:1.06rem;letter-spacing:-.02em;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.ref-kart .kart-link{margin-top:auto;padding-top:15px}
/* Rakam bandı */
.ref-ozet{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 34px}
.ref-ozet article{background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:var(--r);padding:16px 18px;text-align:center}
.ref-ozet b{display:block;font-family:var(--font-teknik);font-weight:700;font-size:1.6rem;letter-spacing:-.03em;color:var(--siyah)}
.ref-ozet span{font-size:.8rem;font-weight:600;color:var(--murekkep-soft)}
@media (max-width:1100px){.ref-izgara{grid-template-columns:repeat(2,1fr)}.ref-ozet{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ref-izgara{grid-template-columns:1fr;gap:15px}.ref-kart{padding:18px 17px 16px}.ref-ozet{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px}.ref-ozet b{font-size:1.3rem}}

/* Sektör gövde — kompakt */
.sektor-kart .kart-govde{padding:17px 18px 18px;gap:9px}
.sektor-kart .kart-govde>p{font-size:.9rem;line-height:1.5}
.sektor-kart .kart-alt-linkler{gap:6px}
.sektor-kart .kart-alt-linkler a{font-size:.73rem;padding:4px 10px}
.sektor-kart .kart-link{font-size:.86rem;padding-top:4px}
@media (max-width:640px){
  .kart-izgara{gap:15px}
  .sektor-ust{padding:13px 15px;min-height:64px}
  .sektor-ust h3{font-size:1.04rem}
  .sektor-ikon{width:38px;height:38px}
  .sektor-ikon svg{width:20px;height:20px}
  .sektor-kart .kart-govde{padding:14px 15px 15px}
  .sektor-kart .kart-govde>p{font-size:.87rem}
}

/* Erişilebilirlik — klavye odak halkası */
a:focus-visible,button:focus-visible,summary:focus-visible,.kart-alt-linkler a:focus-visible{outline:2px solid var(--mavi);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .sektor-kart:hover .sektor-deko,.sektor-kart:hover .sektor-ikon,.kart:hover .kart-link svg{transform:none}
  .sektor-kart:hover .sektor-ust{background-position:170% 0,0 0}
}
.sektor-kart .kart-no{top:14px;left:14px}
.kart-no{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--font-teknik);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:#fff;background:rgba(10,10,10,.5);backdrop-filter:blur(6px);
  padding:5px 10px;border-radius:999px;
}
.kart-govde{padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.kart-ust{display:flex;align-items:center;gap:13px}
.ikon-karo{
  width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent);
}
.ikon-karo svg{width:22px;height:22px}
.kart-govde h3{color:var(--siyah)}
.kart-govde > p{color:var(--murekkep-soft);font-size:.96rem;margin:0}
.kart-alt-linkler{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.kart-alt-linkler a{
  font-size:.78rem;font-weight:600;color:var(--siyah);
  background:var(--kum);border:1px solid rgba(10,10,10,.06);
  padding:5px 11px;border-radius:999px;transition:all var(--gecis-hizli);
}
.kart-alt-linkler a:hover{background:var(--accent);color:#fff;border-color:transparent}
.kart-link{
  margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-baslik);font-weight:700;font-size:.92rem;color:var(--accent);
  transition:gap var(--gecis-hizli)
}
.kart-link svg{width:17px;height:17px;transition:transform var(--gecis-hizli)}
.kart:hover .kart-link{gap:12px}
.kart:hover .kart-link svg{transform:translateX(3px)}
.cerceve{position:relative}

/* ==========================================================================
   RAKAMLAR
   ========================================================================== */
.rakam-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.rakam{padding:34px 28px;border-radius:var(--r-l);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.deger{display:flex;align-items:baseline;gap:2px;font-family:var(--font-baslik);font-weight:800;font-size:clamp(2.6rem,4.6vw,3.8rem);color:#fff;letter-spacing:-.04em;line-height:1}
.deger .sonek{color:var(--turuncu);font-size:.55em}
.rakam .ad{margin-top:12px;color:#9C9C97;font-size:.98rem}

/* ==========================================================================
   ÖNE ÇIKAN
   ========================================================================== */
.one-cikan{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.pin-kolon .cerceve{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--golge-yuksek)}
.one-cikan-gorsel{margin:0;position:relative;overflow:hidden;border-radius:var(--r-xl)}
.one-cikan-gorsel img{width:100%;height:100%;object-fit:cover}
.one-cikan-gorsel .olcu{
  position:absolute;left:16px;bottom:16px;
  font-family:var(--font-teknik);font-size:.72rem;font-weight:600;letter-spacing:.04em;
  color:#fff;background:rgba(10,10,10,.55);backdrop-filter:blur(6px);
  padding:6px 12px;border-radius:999px;
}
.one-cikan .rozet{
  display:inline-block;font-family:var(--font-baslik);font-weight:700;font-size:.74rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--turuncu);
  background:rgba(240,100,30,.1);padding:6px 13px;border-radius:999px;margin-bottom:16px
}
.one-cikan ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:14px}
.one-cikan li{display:flex;gap:12px;align-items:flex-start;color:var(--murekkep-soft);font-size:1rem}
.one-cikan li svg{width:20px;height:20px;flex:0 0 auto;color:#fff;background:var(--turuncu);border-radius:50%;padding:3px;margin-top:2px}
.one-cikan li strong{color:var(--siyah)}

/* ==========================================================================
   SÜREÇ
   ========================================================================== */
.surec{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.surec-cizgi{position:absolute;top:27px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,var(--turuncu),var(--lacivert));opacity:.25;border-radius:2px}
.adim{text-align:left;position:relative}
.halka{
  width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--font-baslik);font-weight:800;font-size:1.2rem;color:#fff;
  background:var(--siyah);position:relative;z-index:1;margin-bottom:18px;
  box-shadow:0 0 0 6px var(--kum);
}
.adim:nth-child(2) .halka{background:var(--lacivert)}
.adim:nth-child(3) .halka{background:var(--mavi)}
.adim:nth-child(4) .halka{background:var(--turuncu)}
.adim:nth-child(5) .halka{background:var(--kirmizi)}
.adim:nth-child(6) .halka{background:var(--filiz-yesili)}
.adim h3{color:var(--siyah);margin-bottom:8px}
.adim p{color:var(--murekkep-soft);font-size:.94rem;margin:0}

/* ==========================================================================
   TEKNOLOJİ ŞERİDİ (marquee)
   ========================================================================== */
.serit{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.serit-ray{display:flex;gap:14px;width:max-content;animation:kay 44s linear infinite}
@keyframes kay{to{transform:translateX(-50%)}}
.serit:hover .serit-ray{animation-play-state:paused}
.tek{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--font-baslik);font-weight:700;font-size:1rem;color:var(--siyah);
  background:var(--kum);border:1px solid rgba(10,10,10,.06);padding:11px 20px;border-radius:999px;
}
.tek .iz{width:7px;height:7px;border-radius:50%;background:var(--turuncu)}
.tek:nth-child(3n) .iz{background:var(--lacivert)}
.tek:nth-child(3n+1) .iz{background:var(--mavi)}

/* ==========================================================================
   REFERANS KARUSELİ
   ========================================================================== */
.karusel{position:relative}
.karusel-btnler{display:flex;gap:12px;justify-content:flex-end;margin-bottom:22px}
.karusel-btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid rgba(10,10,10,.14);color:var(--siyah);transition:all var(--gecis-hizli)
}
.karusel-btn svg{width:19px;height:19px}
.karusel-btn.geri svg{transform:rotate(180deg)}
.karusel-btn:hover{background:var(--siyah);color:#fff;border-color:var(--siyah)}
.swiper{overflow:visible}
.vaka-slayt{
  --accent:var(--lacivert);
  margin:0;height:100%;background:#fff;border:1px solid rgba(10,10,10,.08);
  border-radius:var(--r-l);padding:30px 28px;display:flex;flex-direction:column;
  justify-content:space-between;gap:22px;box-shadow:var(--golge);position:relative;overflow:hidden;
}
.vaka-slayt::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)}
.swiper-slide:nth-child(6n+1) .vaka-slayt{--accent:var(--lacivert)}
.swiper-slide:nth-child(6n+2) .vaka-slayt{--accent:var(--turuncu)}
.swiper-slide:nth-child(6n+3) .vaka-slayt{--accent:var(--mavi)}
.swiper-slide:nth-child(6n+4) .vaka-slayt{--accent:var(--kirmizi)}
.swiper-slide:nth-child(6n+5) .vaka-slayt{--accent:var(--filiz-yesili)}
.swiper-slide:nth-child(6n+6) .vaka-slayt{--accent:var(--amber)}
.yildizlar{display:flex;gap:3px;color:var(--amber);margin-bottom:14px}
.yildizlar svg{width:17px;height:17px;fill:var(--amber);stroke:var(--amber)}
.vaka-slayt blockquote{margin:0;font-size:1.04rem;line-height:1.55;color:var(--siyah);font-weight:500}
.metrik{display:flex;gap:22px;margin-top:18px}
.metrik div{display:flex;flex-direction:column}
.metrik b{font-family:var(--font-baslik);font-weight:800;font-size:1.25rem;color:var(--accent);letter-spacing:-.02em}
.metrik span{font-size:.78rem;color:var(--murekkep-soft)}
.vaka-slayt .alt{display:flex;align-items:center;gap:13px;padding-top:20px;border-top:1px solid rgba(10,10,10,.08)}
.vaka-slayt .harf{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-baslik);font-weight:800;color:#fff;background:var(--accent)
}
.vaka-slayt .alt strong{display:block;color:var(--siyah);font-size:.96rem}
.vaka-slayt .alt small{color:var(--murekkep-soft);font-size:.8rem}
.swiper-pagination{position:static;margin-top:26px;display:flex;gap:8px;justify-content:center}
.swiper-pagination-bullet{width:8px;height:8px;background:rgba(10,10,10,.2);opacity:1;border-radius:999px;transition:all var(--gecis-hizli)}
.swiper-pagination-bullet-active{width:26px;background:var(--turuncu)}

.logo-serit{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px}
.logo-kutu{
  font-family:var(--font-baslik);font-weight:700;font-size:.9rem;color:var(--murekkep-soft);
  background:#fff;border:1px solid rgba(10,10,10,.1);padding:11px 20px;border-radius:999px
}

/* ==========================================================================
   SSS
   ========================================================================== */
.sss{display:flex;flex-direction:column;gap:12px;max-width:920px}
.sss-oge{background:var(--kum);border:1px solid transparent;border-radius:var(--r);overflow:hidden;transition:background var(--gecis-hizli),border-color var(--gecis-hizli)}
.sss-oge[open]{background:#fff;border-color:rgba(10,10,10,.1);box-shadow:var(--golge)}
.sss-oge summary{
  list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-baslik);font-weight:700;font-size:1.08rem;color:var(--siyah)
}
.sss-oge summary::-webkit-details-marker{display:none}
.sss-oge summary::after{content:"";width:12px;height:12px;flex:0 0 auto;border-right:2px solid var(--murekkep-soft);border-bottom:2px solid var(--murekkep-soft);transform:rotate(45deg);transition:transform var(--gecis-hizli)}
.sss-oge[open] summary::after{transform:rotate(-135deg);border-color:var(--turuncu)}
.sss-cevap{padding:0 26px 24px}
.sss-cevap p{margin:0;color:var(--murekkep-soft);line-height:1.7}

/* ==========================================================================
   İLETİŞİM / CTA
   ========================================================================== */
.cta-izgara{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.iletisim-liste{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.iletisim-liste a,.iletisim-liste > div{display:flex;align-items:center;gap:15px;color:#C9C9C4}
.iletisim-liste a:hover strong{color:#fff}
.ik{width:46px;height:46px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;color:#fff}
.ik svg{width:20px;height:20px}
.ik--amber{background:var(--turuncu)}
.ik--mavi{background:var(--lacivert)}
.ik--wa{background:var(--whatsapp)}
.iletisim-liste small{display:block;font-size:.78rem;color:#8A8A85}
.iletisim-liste strong{color:#fff;font-size:1rem;font-weight:600;transition:color var(--gecis-hizli)}

.form-kart{background:#fff;border-radius:var(--r-xl);padding:34px;box-shadow:var(--golge-yuksek)}
.form-kart h3{color:var(--siyah);margin-bottom:4px}
.form-kart > p{color:var(--murekkep-soft);font-size:.92rem;margin-bottom:22px}
.alan{margin-bottom:16px}
.alan label{display:block;font-weight:600;font-size:.86rem;color:var(--siyah);margin-bottom:7px}
.alan input,.alan select,.alan textarea{
  width:100%;font-family:var(--font-govde);font-size:.98rem;color:var(--siyah);
  padding:13px 15px;border:1.5px solid rgba(10,10,10,.14);border-radius:12px;background:var(--kum);
  transition:border-color var(--gecis-hizli),background var(--gecis-hizli)
}
.alan textarea{min-height:96px;resize:vertical}
.alan input:focus,.alan select:focus,.alan textarea:focus{outline:none;border-color:var(--turuncu);background:#fff}
.form-kart .btn{width:100%;justify-content:center;margin-top:6px}
.form-kart .btn--amber{background:var(--siyah)}
.form-kart .btn--amber:hover{background:var(--turuncu)}
.kvkk{font-size:.76rem;color:var(--murekkep-hafif);margin:16px 0 0;text-align:center}
.kvkk a{color:var(--turuncu);text-decoration:underline}
.form-durum{margin-top:14px;font-size:.9rem;padding:0;text-align:center;font-weight:600}
.form-durum--ok{color:var(--filiz-yesili)}
.form-durum--hata{color:var(--kirmizi)}

.harita{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--golge);border:1px solid rgba(10,10,10,.08)}
.harita iframe{display:block;width:100%;height:420px;border:0}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.alt-bilgi{background:var(--siyah);color:#9A9A94;padding:80px 0 32px;position:relative;overflow:hidden}
.alt-bilgi::after{content:"VA";position:absolute;right:2%;bottom:-16%;font-family:var(--font-baslik);font-weight:800;font-size:34vh;line-height:.8;color:rgba(255,255,255,.02);letter-spacing:-.06em;pointer-events:none}
.alt-izgara{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:44px;position:relative;z-index:1}
.alt-logo img{height:40px;width:auto;margin-bottom:18px}
.alt-bilgi h4{color:#fff;margin-bottom:16px;font-size:.95rem;letter-spacing:.02em}
.alt-bilgi ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.alt-bilgi ul a{color:#9A9A94;font-size:.92rem;transition:color var(--gecis-hizli)}
.alt-bilgi ul a:hover{color:var(--turuncu-acik)}
.alt-nap{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.alt-nap div{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:#9A9A94}
.alt-nap svg{width:18px;height:18px;flex:0 0 auto;color:var(--turuncu);margin-top:2px}
.alt-nap a{color:#9A9A94}
.alt-nap a:hover{color:#fff}
.alt-bolgeler{margin-top:22px;font-size:.84rem;color:#7D7D78;line-height:1.6}
.alt-bolgeler strong{display:block;color:#C9C9C4;margin-bottom:6px;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.alt-cizgi{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem;color:#7D7D78;position:relative;z-index:1}

/* ==========================================================================
   YÜZEN WHATSAPP + MOBİL BAR
   ========================================================================== */
.wa-yuzen{
  position:fixed;right:22px;bottom:22px;z-index:900;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--whatsapp);
  box-shadow:0 10px 30px rgba(37,211,102,.45);transition:transform var(--gecis-hizli)
}
.wa-yuzen svg{width:28px;height:28px}
.wa-yuzen:hover{transform:scale(1.08)}
.mobil-bar{display:none}

/* ==========================================================================
   NAV — DİL ROZETİ (VOYA: ayraç + 🌐 TR)
   ========================================================================== */
.dil{
  display:inline-flex;align-items:center;gap:7px;position:relative;
  font-family:var(--font-baslik);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  color:#fff;padding-left:20px;user-select:none;
}
.dil::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:22px;background:rgba(255,255,255,.28)}
.dil svg{width:17px;height:17px;opacity:.85}
.ust-bar.kayiyor .dil{color:var(--siyah)}
.ust-bar.kayiyor .dil::before{background:rgba(10,10,10,.16)}

/* ==========================================================================
   VOYA GEÇİŞLERİ — Yükleme sıralı giriş + scroll reveal (rafine)
   ========================================================================== */
/* Reveal easing'ini yumuşat + mesafeyi VOYA hissine yaklaştır */
.gir{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.gir.gorunur{opacity:1;transform:none}

/* Başlık satır maskesi: h1/h2 alttan yukarı süzülür */
.bolum-basligi h2{overflow:hidden}
.bolum-basligi.gir h2>span,.bolum-basligi h2{display:block}

/* Kart görselleri hafif zoom ile açılır */
.kart.gir .kart-gorsel img{transform:scale(1.08);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.kart.gir.gorunur .kart-gorsel img{transform:scale(1)}

/* HERO — sayfa yüklenince sıralı giriş (VOYA) */
.hero-etiket,.hero h1 .satir>span,.hero h1 .satir>em,.hero-alt,.hero .btn-grubu,.hero-guven{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}
.hero h1 .satir{overflow:hidden;padding-bottom:.04em}
.hero h1 .satir>span,.hero h1 .satir>em{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.22,1,.36,1),opacity 1s}
body.yuklendi .hero-etiket{opacity:1;transform:none;transition-delay:.05s}
body.yuklendi .hero h1 .satir>span,body.yuklendi .hero h1 .satir>em{opacity:1;transform:none}
body.yuklendi .hero h1 .satir:nth-of-type(1)>span,body.yuklendi .hero h1 .satir:nth-of-type(1)>em{transition-delay:.14s}
body.yuklendi .hero h1 .satir:nth-of-type(2)>span,body.yuklendi .hero h1 .satir:nth-of-type(2)>em{transition-delay:.24s}
body.yuklendi .hero-alt{opacity:1;transform:none;transition-delay:.42s}
body.yuklendi .hero .btn-grubu{opacity:1;transform:none;transition-delay:.54s}
body.yuklendi .hero-guven{opacity:1;transform:none;transition-delay:.64s}

/* Üst bar sayfa yüklenince yumuşak iner */
.ust-bar{transform:translateY(-14px);opacity:0}
body.yuklendi .ust-bar{transform:none;opacity:1;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s,background var(--gecis-hizli),box-shadow var(--gecis-hizli),padding var(--gecis-hizli)}

/* ==========================================================================
   TANITIM VİDEOSU (YouTube facade — CWV dostu, tıklayınca yüklenir)
   ========================================================================== */
.video-sarmal{max-width:1000px;margin:0 auto}
.video-cerceve{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--golge-yuksek);background:#000;cursor:pointer;isolation:isolate;
}
.video-cerceve img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity var(--gecis),transform 1.4s cubic-bezier(.22,1,.36,1)}
.video-cerceve:hover img{opacity:.68;transform:scale(1.04)}
.video-cerceve::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent,rgba(10,10,10,.35))}
.video-play{
  position:absolute;inset:0;margin:auto;z-index:2;width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--siyah);
  box-shadow:0 12px 40px rgba(0,0,0,.4);transition:transform var(--gecis-hizli),background var(--gecis-hizli)
}
.video-play svg{width:34px;height:34px;margin-left:4px;fill:currentColor}
.video-cerceve:hover .video-play{transform:scale(1.08);background:var(--turuncu);color:#fff}
.video-etiket{
  position:absolute;left:20px;bottom:20px;z-index:2;display:flex;align-items:center;gap:9px;
  font-family:var(--font-baslik);font-weight:600;font-size:.9rem;color:#fff
}
.video-etiket .nokta{width:9px;height:9px;border-radius:50%;background:var(--turuncu);box-shadow:0 0 0 4px rgba(240,100,30,.3)}
.video-cerceve iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ==========================================================================
   KURUMSAL ÜRÜNLER — canlı arayüzlü vitrin (14 ürün, ürüne özel animasyon)
   ========================================================================== */
.bolum--urunler{background:var(--kum)}
.urun-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.urun-kart{
  --accent:var(--lacivert);--accent2:var(--mavi);
  background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--gecis),box-shadow var(--gecis),border-color var(--gecis);
}
.urun-kart:hover{transform:translateY(-7px);box-shadow:var(--golge-yuksek);border-color:transparent}
.urun-izgara .urun-kart:nth-child(7n+1){--accent:var(--lacivert);--accent2:var(--mavi)}
.urun-izgara .urun-kart:nth-child(7n+2){--accent:#1FA855;--accent2:#25D366}
.urun-izgara .urun-kart:nth-child(7n+3){--accent:var(--mavi);--accent2:var(--mavi-acik)}
.urun-izgara .urun-kart:nth-child(7n+4){--accent:var(--turuncu);--accent2:var(--turuncu-acik)}
.urun-izgara .urun-kart:nth-child(7n+5){--accent:var(--filiz-yesili);--accent2:#48C4B0}
.urun-izgara .urun-kart:nth-child(7n+6){--accent:var(--kirmizi);--accent2:#F4574F}
.urun-izgara .urun-kart:nth-child(7n+7){--accent:var(--amber);--accent2:#FFC85A}

/* Ekran (mini cihaz) — kurumsal konsol yüzeyi */
.urun-ekran{
  position:relative;display:flex;flex-direction:column;color:var(--accent);
  aspect-ratio:3/2;overflow:hidden;isolation:isolate;
  --cam:rgba(255,255,255,.055);--kilcal-ic:rgba(255,255,255,.08);
  --yesil:#33d18f;--kirmizi-ic:#ff6f6f;--amber-ic:#f5b544;
  --metin:#eef2f7;--metin-soft:rgba(238,242,247,.56);
  background:
    radial-gradient(120% 92% at 100% -8%,color-mix(in srgb,var(--accent) 26%,transparent) 0%,transparent 48%),
    radial-gradient(90% 70% at -10% 110%,color-mix(in srgb,var(--accent2) 16%,transparent) 0%,transparent 55%),
    linear-gradient(180deg,#182130 0%,#111823 46%,#0b1017 100%);
  transition:filter var(--gecis);
}
.urun-ekran::before{ /* BI hattı ızgarası + parazit */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:24px 24px,24px 24px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%);
  opacity:.6;
}
.urun-ekran::after{ /* üst ışık çizgisi */
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
}
.ekran-bar{position:relative;z-index:3;display:flex;align-items:center;gap:5px;padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.07);flex:0 0 auto;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0))}
.ekran-bar>span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
.ekran-bar>span:nth-child(1){background:#ff5f57}.ekran-bar>span:nth-child(2){background:#febc2e}.ekran-bar>span:nth-child(3){background:#28c840}
.ekran-bar b{margin-left:7px;font-size:.58rem;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.03em;font-family:var(--font-teknik)}
.ekran-bar::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:7px;border-radius:999px;background:rgba(255,255,255,.09);box-shadow:-11px 0 0 -2px rgba(255,255,255,.09)}
.ekran-ic{flex:1;position:relative;z-index:2;overflow:hidden;padding:9px 11px;color:var(--metin);min-height:0;font-variant-numeric:tabular-nums}
.urun-kart:hover .urun-ekran{filter:saturate(1.12) brightness(1.05)}

/* Gövde */
.urun-govde{padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.urun-ust{display:flex;align-items:flex-start;gap:12px}
.urun-ikon{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.urun-ikon svg{width:21px;height:21px}
.urun-ust h4{color:var(--siyah);font-size:1.08rem;font-weight:600;line-height:1.2}
.urun-slogan{margin:3px 0 0;font-family:var(--font-baslik);font-weight:600;font-size:.86rem;color:var(--accent);line-height:1.3}
.urun-aciklama{color:var(--murekkep-soft);font-size:.9rem;margin:0;line-height:1.55}
.urun-etiket{margin-top:auto;align-self:flex-start;font-size:.7rem;font-weight:600;color:var(--murekkep-soft);background:var(--kum);border:1px solid rgba(10,10,10,.06);padding:5px 11px;border-radius:999px;font-family:var(--font-teknik);letter-spacing:.02em}

.urun-alt{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:var(--r-l);padding:26px 30px}
.urun-alt p{margin:0;font-size:1.05rem;color:var(--siyah)}
.urun-alt strong{color:var(--turuncu)}

/* ---- Ortak yardımcılar ---- */
.ekran-ic .toast{position:absolute;right:12px;bottom:11px;font-size:.62rem;font-weight:700;color:#fff;background:var(--accent);padding:4px 9px;border-radius:999px;opacity:0;animation:toastGir 3.6s ease-in-out infinite}
@keyframes toastGir{0%,55%{opacity:0;transform:translateY(6px)}65%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}

/* 01 · Panel (B2B) — bayi kataloğu */
.mk-panel{display:flex;flex-direction:column;gap:4px;height:100%}
.mk-panel .p-bar{display:flex;align-items:center;gap:6px}
.mk-panel .p-bar .p-ara{flex:1;height:12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--kilcal-ic);position:relative}
.mk-panel .p-bar .p-ara::before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;border:1.4px solid var(--metin-soft)}
.mk-panel .p-bar .p-bakiye{font-size:.5rem;font-weight:700;color:var(--yesil);font-family:var(--font-teknik);white-space:nowrap;letter-spacing:-.01em}
.mk-panel .karolar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mk-panel .p-urun{background:var(--cam);border:1px solid var(--kilcal-ic);border-radius:6px;padding:3px;display:flex;flex-direction:column;gap:2px}
.mk-panel .p-urun .p-img{height:14px;border-radius:4px;background:
  radial-gradient(120% 120% at 20% 0%,color-mix(in srgb,var(--accent2) 55%,transparent),transparent 60%),
  linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#0b1017),rgba(255,255,255,.05))}
.mk-panel .p-urun .p-ad{height:3px;width:82%;border-radius:2px;background:rgba(255,255,255,.24)}
.mk-panel .p-urun .p-fiyat{height:4px;width:52%;border-radius:2px;background:var(--accent2)}
.mk-panel .p-urun:nth-child(3n+2) .p-fiyat{width:62%}.mk-panel .p-urun:nth-child(3n) .p-ad{width:70%}
.mk-panel .p-alt{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px}
.mk-panel .p-alt .p-ozet{font-size:.46rem;font-weight:600;color:var(--metin-soft);font-family:var(--font-teknik)}
.mk-panel .sepet{display:flex;align-items:center;gap:4px;font-size:.54rem;font-weight:700;color:#fff;background:var(--accent);padding:4px 8px;border-radius:999px;box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 50%,transparent)}
.mk-panel .sepet svg{width:11px;height:11px}
.mk-panel .sepet b{display:inline-block;animation:pop 4.2s ease-in-out infinite}
@keyframes pop{0%,44%{transform:scale(1)}54%{transform:scale(1.6)}66%,100%{transform:scale(1)}}

/* 02 · Chat (WhatsApp) */
.mk-chat{display:flex;flex-direction:column;gap:5px;justify-content:flex-end}
.mk-chat .baloncuk{max-width:82%;font-size:.6rem;padding:5px 8px;border-radius:10px;opacity:0;animation:balon 6s ease-in-out infinite}
.mk-chat .gelen{align-self:flex-start;background:rgba(255,255,255,.12);color:#fff;border-bottom-left-radius:3px;animation-delay:.2s}
.mk-chat .giden{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:3px;animation-delay:1.4s}
.mk-chat .b3{animation-delay:2.4s}
.mk-chat .yaziyor{align-self:flex-end;display:flex;gap:3px;padding:6px 8px;background:var(--accent);border-radius:10px;border-bottom-right-radius:3px;opacity:0;animation:balon 6s ease-in-out infinite;animation-delay:3.4s}
.mk-chat .yaziyor i{width:4.5px;height:4.5px;border-radius:50%;background:#fff;animation:zipla 1.1s ease-in-out infinite}
.mk-chat .yaziyor i:nth-child(2){animation-delay:.15s}.mk-chat .yaziyor i:nth-child(3){animation-delay:.3s}
@keyframes balon{0%{opacity:0;transform:translateY(6px)}6%{opacity:1;transform:none}88%{opacity:1}96%,100%{opacity:0}}
@keyframes zipla{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-3px);opacity:1}}

/* 03 · Kanban (CRM) — satış hunisi */
.mk-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;height:100%}
.mk-kanban .kol{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:7px;padding:5px 4px;display:flex;flex-direction:column;gap:4px;min-height:0;overflow:hidden}
.mk-kanban .kol em{display:flex;align-items:center;justify-content:space-between;font-size:.46rem;color:var(--metin-soft);font-style:normal;font-weight:600;letter-spacing:.01em}
.mk-kanban .kol em span{font-family:var(--font-teknik);color:var(--metin);background:rgba(255,255,255,.1);border-radius:999px;padding:0 4px;font-size:.42rem;line-height:1.5}
.mk-kanban .kcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:5px;padding:4px;display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.mk-kanban .kcard .av{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,var(--accent2),var(--accent))}
.mk-kanban .kcard .ln{height:3px;border-radius:2px}
.mk-kanban .kcard .l1{flex:1;min-width:10px;background:rgba(255,255,255,.28)}
.mk-kanban .kcard .l2{width:64%;background:rgba(255,255,255,.14)}
.mk-kanban .kcard .tag{width:100%;font-size:.44rem;font-weight:700;font-family:var(--font-teknik);color:var(--accent2);letter-spacing:-.01em}
.mk-kanban .kcard .tag.ok{color:var(--yesil)}
.mk-kanban .kcard.tasiyan{position:relative;z-index:4;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 82%,#0b1017),color-mix(in srgb,var(--accent2) 60%,#0b1017));border-color:color-mix(in srgb,var(--accent2) 60%,transparent);box-shadow:0 6px 14px rgba(4,10,22,.55);animation:tasi 5.6s ease-in-out infinite}
.mk-kanban .kcard.tasiyan .l1{background:rgba(255,255,255,.55)}.mk-kanban .kcard.tasiyan .l2{background:rgba(255,255,255,.34)}.mk-kanban .kcard.tasiyan .tag{color:#fff}
@keyframes tasi{0%,12%{transform:translateX(0)}33%,45%{transform:translateX(calc(100% + 6px))}66%,100%{transform:translateX(calc(200% + 12px))}}

/* 04 · Barkod (Depo) */
.mk-barkod{display:flex;align-items:center;justify-content:center}
.mk-barkod .barkod{display:flex;align-items:center;gap:2px;height:52px}
.mk-barkod .barkod i{width:3px;height:100%;background:rgba(255,255,255,.85)}
.mk-barkod .barkod i:nth-child(2n){width:2px;height:80%}
.mk-barkod .barkod i:nth-child(3n){width:4px}
.mk-barkod .barkod i:nth-child(3n+1){height:66%}
.mk-barkod .tarama{position:absolute;left:8%;right:8%;height:2px;background:var(--accent);box-shadow:0 0 10px 1px var(--accent);top:14px;animation:tara 3.6s ease-in-out infinite}
@keyframes tara{0%,100%{top:14px}50%{top:calc(100% - 16px)}}

/* 05 · Cari (Muhasebe) — cari hesap defteri */
.mk-cari{display:flex;flex-direction:column;gap:4px;height:100%}
.mk-cari .c-head{display:flex;align-items:center;justify-content:space-between;font-size:.46rem;color:var(--metin-soft);font-weight:600}
.mk-cari .c-head em{font-style:normal;font-family:var(--font-teknik);color:var(--metin)}
.mk-cari .satir{display:flex;align-items:center;gap:5px;font-size:.52rem;color:var(--metin);padding:3px 5px;border-radius:6px;background:var(--cam);border:1px solid rgba(255,255,255,.05);animation:satirVurgu 4.8s ease-in-out infinite}
.mk-cari .satir:nth-child(3){animation-delay:.6s}.mk-cari .satir:nth-child(4){animation-delay:1.2s}
.mk-cari .satir .ini{width:14px;height:14px;flex:0 0 auto;border-radius:4px;display:grid;place-items:center;font-size:.44rem;font-weight:700;color:#fff;font-family:var(--font-teknik);background:linear-gradient(135deg,var(--accent2),var(--accent))}
.mk-cari .satir .nm{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--metin-soft);font-weight:500}
.mk-cari .satir .mbar{width:18px;height:4px;flex:0 0 auto;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.mk-cari .satir .mbar b{display:block;height:100%;border-radius:3px;background:var(--accent2);transform-origin:left;animation:barBuyu 4.8s ease-in-out infinite}
.mk-cari .satir .amt{font-family:var(--font-teknik);font-weight:700;letter-spacing:-.01em;font-size:.5rem;white-space:nowrap}
.mk-cari .art{color:var(--yesil)}.mk-cari .eksi{color:var(--kirmizi-ic)}
.mk-cari .toplam{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:.48rem;font-weight:600;color:var(--metin-soft);padding-top:4px;border-top:1px solid rgba(255,255,255,.09)}
.mk-cari .toplam b{color:var(--metin);font-family:var(--font-teknik);font-weight:700;font-size:.56rem}
.mk-cari .toplam .tbar{flex:1;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;animation:barBuyu 4.8s ease-in-out infinite}
@keyframes satirVurgu{0%,70%,100%{background:var(--cam)}20%,45%{background:color-mix(in srgb,var(--accent) 20%,transparent)}}
@keyframes barBuyu{0%{transform:scaleX(.2)}50%{transform:scaleX(1)}100%{transform:scaleX(.2)}}

/* 06 · Üretim (MES) */
.mk-uretim{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.mk-uretim .gosterge{width:66%;overflow:visible}
.mk-uretim .gosterge .dolu{stroke-dasharray:132;stroke-dashoffset:40;animation:oeeDolu 4s ease-in-out infinite}
.mk-uretim .gosterge .ibre{stroke:#fff;stroke-width:2.5;stroke-linecap:round;transform-origin:50px 50px;animation:ibreDon 4s ease-in-out infinite}
.mk-uretim .oee{font-size:.62rem;color:rgba(255,255,255,.7);font-weight:600}
.mk-uretim .oee b{color:var(--accent);font-family:var(--font-teknik);font-size:.78rem}
.mk-uretim .cubuklar{display:flex;gap:4px;align-items:flex-end;height:16px}
.mk-uretim .cubuklar i{width:8px;background:var(--accent);border-radius:2px;animation:cubukNabiz 1.8s ease-in-out infinite}
.mk-uretim .cubuklar i:nth-child(2){animation-delay:.2s}.mk-uretim .cubuklar i:nth-child(3){animation-delay:.4s}.mk-uretim .cubuklar i:nth-child(4){animation-delay:.6s}
@keyframes oeeDolu{0%,100%{stroke-dashoffset:90}50%{stroke-dashoffset:20}}
@keyframes ibreDon{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(52deg)}}
@keyframes cubukNabiz{0%,100%{height:6px;opacity:.6}50%{height:16px;opacity:1}}

/* 07 · Rota (Saha) */
.mk-rota{padding:0}
.mk-rota .harita{position:absolute;inset:0;width:100%;height:100%}
.mk-rota .yol{opacity:.5}
.mk-rota .durak{fill:var(--accent)}
.mk-rota .pin{position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent);offset-path:path('M20 96 C60 96 60 30 100 30 S150 96 184 40');offset-rotate:0deg;animation:pinGit 5s ease-in-out infinite;left:-6px;top:-6px}
@keyframes pinGit{0%{offset-distance:0%}45%,55%{offset-distance:60%}100%{offset-distance:100%}}

/* 08 · Pazaryeri */
.mk-pazar{display:flex;flex-direction:column;gap:6px;justify-content:center}
.mk-pazar .rozet{display:flex;align-items:center;justify-content:space-between;font-size:.64rem;font-weight:600;color:#fff;padding:6px 9px;border-radius:7px;background:rgba(255,255,255,.07)}
.mk-pazar .ok{width:14px;height:14px;border-radius:50%;background:var(--accent);position:relative;opacity:0;transform:scale(.4);animation:okGel 4.5s ease-in-out infinite}
.mk-pazar .ok::after{content:"";position:absolute;left:4px;top:6px;width:4px;height:2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.mk-pazar .r1 .ok{animation-delay:.3s}.mk-pazar .r2 .ok{animation-delay:.9s}.mk-pazar .r3 .ok{animation-delay:1.5s}
.mk-pazar .senk{display:flex;align-items:center;gap:6px;font-size:.6rem;color:rgba(255,255,255,.6);margin-top:2px}
.mk-pazar .senk svg{width:13px;height:13px;color:var(--accent);animation:don 3s linear infinite}
@keyframes okGel{0%,15%{opacity:0;transform:scale(.4)}30%,85%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
@keyframes don{to{transform:rotate(360deg)}}

/* 09 · Dashboard (Power BI) */
.mk-dash{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:7px 11px;align-content:center;align-items:center;height:100%}
.mk-dash .dash-cubuk{grid-row:1;grid-column:2;display:flex;align-items:flex-end;gap:5px;height:46px}
.mk-dash .dash-cubuk i{flex:1;background:linear-gradient(180deg,var(--accent2),color-mix(in srgb,var(--accent) 70%,#0b1017));border-radius:3px 3px 0 0;transform-origin:bottom;animation:cubukBuyu 3.4s ease-in-out infinite}
.mk-dash .dash-cubuk i:nth-child(1){animation-delay:0s}.mk-dash .dash-cubuk i:nth-child(2){animation-delay:.2s}.mk-dash .dash-cubuk i:nth-child(3){animation-delay:.4s}.mk-dash .dash-cubuk i:nth-child(4){animation-delay:.6s}.mk-dash .dash-cubuk i:nth-child(5){animation-delay:.8s}
.mk-dash .donut{grid-row:1;grid-column:1;width:50px;height:50px;transform:rotate(-90deg)}
.mk-dash .donut .ark{stroke:var(--accent2);stroke-dasharray:94;stroke-dashoffset:70;animation:donutDol 3.4s ease-in-out infinite}
.mk-dash .kpi{grid-row:2;grid-column:1/-1;display:flex;align-items:baseline;gap:6px;font-size:.74rem;font-weight:700;color:var(--metin);font-family:var(--font-teknik);letter-spacing:-.02em;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.mk-dash .kpi span{font-size:.5rem;font-weight:500;color:var(--metin-soft);font-family:var(--font-baslik)}
@keyframes cubukBuyu{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes donutDol{0%,100%{stroke-dashoffset:80}50%{stroke-dashoffset:26}}

/* 10 · Servis */
.mk-servis{display:flex;flex-direction:column;gap:6px}
.mk-servis .talep{display:flex;align-items:center;gap:8px;font-size:.64rem;color:rgba(255,255,255,.85);padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.06)}
.mk-servis .yeni{animation:kayGir 4.4s ease-in-out infinite}
.mk-servis .durum{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.mk-servis .acik{background:var(--accent);animation:nabiz 1.6s ease-in-out infinite}
.mk-servis .islem{background:#febc2e}.mk-servis .kapali{background:#28c840}
@keyframes kayGir{0%{opacity:0;transform:translateY(-10px)}14%,100%{opacity:1;transform:none}}
@keyframes nabiz{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}50%{box-shadow:0 0 0 5px transparent}}

/* 11 · Takvim (Randevu) */
.mk-takvim{display:flex;flex-direction:column;gap:6px}
.mk-takvim .gunler{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.mk-takvim .gunler em{font-style:normal;font-size:.52rem;color:rgba(255,255,255,.5);text-align:center;font-weight:600}
.mk-takvim .slotlar{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.mk-takvim .slotlar span{height:11px;border-radius:3px;background:rgba(255,255,255,.09);animation:slotDol 6s ease-in-out infinite}
.mk-takvim .slotlar span:nth-child(3n){animation-delay:.4s}.mk-takvim .slotlar span:nth-child(3n+1){animation-delay:.9s}.mk-takvim .slotlar span:nth-child(4n){animation-delay:1.5s}.mk-takvim .slotlar span:nth-child(5n){animation-delay:2.1s}.mk-takvim .slotlar span:nth-child(7n){animation-delay:2.7s}
@keyframes slotDol{0%,60%,100%{background:rgba(255,255,255,.09)}18%,48%{background:var(--accent)}}

/* 12 · Kargo */
.mk-kargo{display:flex;flex-direction:column;justify-content:center;gap:14px}
.mk-kargo .ray{position:relative;height:2px;background:rgba(255,255,255,.14);margin:0 4px}
.mk-kargo .durak{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);transform:translate(-50%,-50%)}
.mk-kargo .durak:nth-child(1){left:0}.mk-kargo .durak:nth-child(2){left:33%}.mk-kargo .durak:nth-child(3){left:66%}.mk-kargo .durak:nth-child(4){left:100%}
.mk-kargo .durak:nth-child(1){animation:durakYesil 5s ease-in-out infinite;animation-delay:.3s}.mk-kargo .durak:nth-child(2){animation:durakYesil 5s ease-in-out infinite;animation-delay:1.4s}.mk-kargo .durak:nth-child(3){animation:durakYesil 5s ease-in-out infinite;animation-delay:2.5s}.mk-kargo .durak:nth-child(4){animation:durakYesil 5s ease-in-out infinite;animation-delay:3.6s}
.mk-kargo .paket{position:absolute;left:15px;top:calc(50% - 20px);color:var(--accent);animation:paketGit 5s ease-in-out infinite}
.mk-kargo .paket svg{width:20px;height:20px}
.mk-kargo .kod{text-align:center;font-size:.6rem;color:rgba(255,255,255,.6);font-family:var(--font-teknik)}
@keyframes paketGit{0%{left:6%}100%{left:82%}}
@keyframes durakYesil{0%,20%{background:rgba(255,255,255,.25)}30%,100%{background:#28c840}}

/* 13 · PDKS (İK) */
.mk-pdks{display:flex;flex-direction:column;gap:4px}
.mk-pdks .saat{font-family:var(--font-teknik);font-size:.82rem;font-weight:700;color:#fff;letter-spacing:.04em;margin-bottom:1px}
.mk-pdks .saat .tik{color:var(--accent);animation:yanip 1s steps(1) infinite}
.mk-pdks .giris{display:flex;align-items:center;gap:6px;font-size:.56rem;color:rgba(255,255,255,.8);opacity:0;animation:girisGel 5s ease-in-out infinite}
.mk-pdks .giris i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.mk-pdks .giris b{margin-left:auto;color:#28c840}
.mk-pdks .g1{animation-delay:.4s}.mk-pdks .g2{animation-delay:1.3s}.mk-pdks .g3{animation-delay:2.2s}
@keyframes girisGel{0%{opacity:0;transform:translateX(-8px)}10%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes yanip{0%,50%{opacity:1}51%,100%{opacity:.25}}

/* 14 · QR Menü */
.mk-qr{display:flex;align-items:center;gap:12px;justify-content:center}
.mk-qr .qr{display:grid;grid-template-columns:repeat(5,7px);grid-auto-rows:7px;gap:2px;padding:6px;background:#fff;border-radius:6px}
.mk-qr .qr i{background:#0a0d12;border-radius:1px;animation:qrShim 4s ease-in-out infinite}
.mk-qr .qr i:nth-child(3n){background:transparent}
.mk-qr .qr i:nth-child(5n+1){animation-delay:.5s}.mk-qr .qr i:nth-child(4n){animation-delay:1s}
.mk-qr .adisyon{font-size:.64rem;color:#fff;font-weight:600;line-height:1.4}
.mk-qr .adisyon b{display:inline-block;color:var(--accent);font-family:var(--font-teknik);animation:pop 4s ease-in-out infinite}
@keyframes qrShim{0%,100%{opacity:1}50%{opacity:.55}}

/* 06 · Toplu mesaj / kampanya gönderimi */
.mk-blast{display:flex;flex-direction:column;gap:6px;height:100%}
.mk-blast .b-head{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:.5rem;color:var(--metin-soft);font-weight:600}
.mk-blast .b-head em{font-style:normal;font-family:var(--font-teknik);color:var(--metin);white-space:nowrap}
.mk-blast .b-say{display:flex;align-items:baseline;gap:5px}
.mk-blast .b-say b{font-size:1rem;font-weight:700;color:var(--metin);font-family:var(--font-teknik);letter-spacing:-.02em}
.mk-blast .b-say span{font-size:.48rem;color:var(--metin-soft)}
.mk-blast .b-prog{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.mk-blast .b-prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;animation:blastDol 4s ease-in-out infinite}
.mk-blast .b-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:auto}
.mk-blast .b-chip{background:var(--cam);border:1px solid var(--kilcal-ic);border-radius:6px;padding:4px 5px;display:flex;flex-direction:column;gap:1px}
.mk-blast .b-chip u{text-decoration:none;font-size:.42rem;color:var(--metin-soft)}
.mk-blast .b-chip b{font-size:.6rem;font-family:var(--font-teknik);font-weight:700;color:var(--metin)}
.mk-blast .b-chip.ok b{color:var(--yesil)}
@keyframes blastDol{0%{transform:scaleX(.05)}72%,100%{transform:scaleX(1)}}

/* 06 · E-posta kampanya */
.mk-mail{display:flex;flex-direction:column;gap:5px;height:100%}
.mk-mail .m-row{display:flex;align-items:center;gap:6px;background:var(--cam);border:1px solid var(--kilcal-ic);border-radius:6px;padding:5px 6px}
.mk-mail .m-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 20%,transparent)}
.mk-mail .m-row.read .dot{background:rgba(255,255,255,.2);box-shadow:none}
.mk-mail .m-row .subj{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mk-mail .m-row .subj s{text-decoration:none;height:4px;border-radius:2px;background:rgba(255,255,255,.28);width:80%}
.mk-mail .m-row .subj u{text-decoration:none;height:3px;border-radius:2px;background:rgba(255,255,255,.12);width:56%}
.mk-mail .m-row.read .subj s{width:64%}
.mk-mail .m-row .oran{font-size:.46rem;font-family:var(--font-teknik);font-weight:700;color:var(--accent2)}
.mk-mail .m-row:nth-child(1){animation:satirVurgu 4.6s ease-in-out infinite}
.mk-mail .m-foot{margin-top:auto;display:flex;gap:8px;font-size:.48rem;color:var(--metin-soft);font-weight:600;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.mk-mail .m-foot b{color:var(--metin);font-family:var(--font-teknik)}

/* 06 · Geri dönüş / anket */
.mk-anket{display:flex;flex-direction:column;gap:6px;height:100%}
.mk-anket .a-ust{display:flex;align-items:center;gap:8px}
.mk-anket .a-ust b{font-size:1.05rem;font-family:var(--font-teknik);font-weight:700;color:var(--metin);line-height:1}
.mk-anket .yildiz{display:flex;gap:1px;color:var(--amber);font-size:.66rem;letter-spacing:1px}
.mk-anket .yildiz .bos{color:rgba(255,255,255,.22)}
.mk-anket .a-dagilim{display:flex;flex-direction:column;gap:4px}
.mk-anket .a-bar{display:flex;align-items:center;gap:5px;font-size:.42rem;color:var(--metin-soft)}
.mk-anket .a-bar em{font-style:normal;width:12px;text-align:right}
.mk-anket .a-bar .tr{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.mk-anket .a-bar .tr i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;animation:anketBar 4.4s ease-in-out infinite}
.mk-anket .a-bar.b1 .tr i{animation-delay:0s}.mk-anket .a-bar.b2 .tr i{animation-delay:.4s}.mk-anket .a-bar.b3 .tr i{animation-delay:.8s}
.mk-anket .a-nps{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:.48rem;color:var(--metin-soft);font-weight:600;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.mk-anket .a-nps b{color:var(--yesil);font-family:var(--font-teknik)}
@keyframes anketBar{0%{transform:scaleX(.15)}55%{transform:scaleX(1)}100%{transform:scaleX(.15)}}

/* 06 · Sadakat / puan */
.mk-sadakat{display:flex;flex-direction:column;gap:7px;height:100%;justify-content:center}
.mk-sadakat .s-kart{position:relative;border-radius:11px;padding:9px 11px;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 40%,transparent)}
.mk-sadakat .s-kart::after{content:"";position:absolute;right:-16px;top:-20px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.14)}
.mk-sadakat .s-kart::before{content:"";position:absolute;right:14px;bottom:9px;width:22px;height:14px;border-radius:3px;background:rgba(255,255,255,.28)}
.mk-sadakat .s-tier{display:flex;align-items:center;gap:4px;font-size:.44rem;letter-spacing:.08em;color:rgba(255,255,255,.9);font-weight:700}
.mk-sadakat .s-tier i{width:8px;height:8px;border-radius:2px;background:#fff;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.mk-sadakat .s-puan{font-size:1.05rem;font-weight:700;color:#fff;font-family:var(--font-teknik);letter-spacing:-.02em;margin:2px 0 4px}
.mk-sadakat .s-puan span{font-size:.5rem;font-weight:600;opacity:.85;margin-left:3px}
.mk-sadakat .s-prog{height:5px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden}
.mk-sadakat .s-prog i{display:block;height:100%;width:72%;border-radius:999px;background:#fff;transform-origin:left;animation:sadakatDol 4.2s ease-in-out infinite}
.mk-sadakat .s-alt{display:flex;align-items:center;justify-content:space-between;font-size:.44rem;color:var(--metin-soft);font-weight:600}
.mk-sadakat .s-alt b{color:var(--metin);font-family:var(--font-teknik)}
@keyframes sadakatDol{0%{transform:scaleX(.35)}60%{transform:scaleX(1)}100%{transform:scaleX(.35)}}

/* ==========================================================================
   ÜRÜN GRUPLARI — akordeon (açık) + yatay sürüklenen şerit
   ========================================================================== */
.urun-gruplari{display:flex;flex-direction:column;gap:16px}
.urun-grup{background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:var(--r-l);overflow:hidden}
.urun-grup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;transition:background var(--gecis-hizli)}
.urun-grup>summary::-webkit-details-marker{display:none}
.urun-grup>summary:hover{background:var(--kum)}
.grup-sol{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.grup-no{font-family:var(--font-teknik);font-size:.72rem;font-weight:700;color:var(--turuncu);letter-spacing:.1em}
.grup-sol h3{font-size:clamp(1.25rem,2.3vw,1.85rem);color:var(--siyah);line-height:1.15}
.grup-adet{font-size:.74rem;font-weight:600;color:var(--murekkep-soft);background:var(--kum);padding:4px 11px;border-radius:999px;font-family:var(--font-teknik)}
.grup-ok{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--kum);color:var(--siyah);transition:background var(--gecis-hizli)}
.grup-ok svg{width:18px;height:18px;transition:transform var(--gecis)}
.urun-grup[open] .grup-ok{background:var(--siyah);color:#fff}
.urun-grup[open] .grup-ok svg{transform:rotate(180deg)}
.urun-grup[open]>summary{border-bottom:1px solid rgba(10,10,10,.06)}
.grup-govde{padding:20px 26px 26px}

.kaydir-btnler{display:none}
.kaydir-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:#fff;border:1px solid rgba(10,10,10,.14);color:var(--siyah);transition:all var(--gecis-hizli)}
.kaydir-btn svg{width:18px;height:18px}
.kaydir-btn.geri svg{transform:rotate(180deg)}
.kaydir-btn:hover{background:var(--siyah);color:#fff;border-color:var(--siyah)}
.kaydir-btn:disabled{opacity:.3;cursor:default;pointer-events:none}

.yatay-kaydir{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch}
.yatay-kaydir.suruklenebilir{cursor:default}
.yatay-kaydir .urun-kart{flex:none;width:auto;min-width:0}

/* ==========================================================================
   YENİ MOCKUP'LAR (sunucu, bulut, izleme, güvenlik, kalite, bakım, akış, erp, ocr)
   ========================================================================== */
/* Terminal */
.mk-sunucu{display:flex;flex-direction:column;justify-content:center;gap:12px;font-family:var(--font-teknik)}
.mk-sunucu .term{display:flex;flex-direction:column;gap:6px;font-size:.66rem}
.mk-sunucu .satirt{opacity:0;color:rgba(255,255,255,.85);animation:termGel 5.4s ease-in-out infinite}
.mk-sunucu .s1{animation-delay:.2s}
.mk-sunucu .s2{animation-delay:1.1s;color:#3ad07f}
.mk-sunucu .s3{animation-delay:2s;color:#3ad07f}
.mk-sunucu .s4{opacity:1;color:var(--accent);animation:yanip 1s steps(1) infinite}
.mk-sunucu .ledler{display:flex;gap:7px}
.mk-sunucu .ledler i{width:7px;height:7px;border-radius:50%;background:#3ad07f;animation:nabiz2 1.6s ease-in-out infinite}
.mk-sunucu .ledler i:nth-child(2){animation-delay:.3s}.mk-sunucu .ledler i:nth-child(3){animation-delay:.6s}
@keyframes termGel{0%,6%{opacity:0}12%,92%{opacity:1}100%{opacity:0}}
@keyframes nabiz2{0%,100%{opacity:.35}50%{opacity:1}}

/* Bulut / yedekleme */
.mk-bulut{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.mk-bulut .bicon{width:54px;color:var(--accent)}
.mk-bulut .bicon .ok{animation:yukselOk 3.6s ease-in-out infinite}
.mk-bulut .ilerleme{width:72%;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.mk-bulut .ilerleme i{display:block;height:100%;border-radius:999px;background:var(--accent);width:8%;animation:dolBar 3.6s ease-in-out infinite}
@keyframes dolBar{0%{width:8%}60%,100%{width:100%}}
@keyframes yukselOk{0%,100%{transform:translateY(1px);opacity:.55}50%{transform:translateY(-3px);opacity:1}}

/* İzleme / anomali */
.mk-izleme{display:flex;flex-direction:column;justify-content:center;gap:12px}
.mk-izleme .cizgi{width:100%;height:60px;overflow:visible}
.mk-izleme .pl{stroke-dasharray:430;stroke-dashoffset:430;animation:ciz 3.8s ease-in-out infinite}
.mk-izleme .uptime{display:flex;align-items:center;gap:7px;font-size:.66rem;color:rgba(255,255,255,.75);font-weight:600}
.mk-izleme .uptime .nb{width:8px;height:8px;border-radius:50%;background:#3ad07f;animation:nabiz2 1.4s infinite}
.mk-anomali{display:flex;flex-direction:column;gap:6px;height:100%}
.mk-anomali .an-graf{flex:1;position:relative;background:var(--cam);border:1px solid var(--kilcal-ic);border-radius:7px;overflow:hidden}
.mk-anomali .an-band{position:absolute;left:0;right:0;top:56%;height:24%;background:rgba(255,255,255,.045);border-top:1px dashed rgba(255,255,255,.14);border-bottom:1px dashed rgba(255,255,255,.14)}
.mk-anomali .an-graf svg{position:relative;z-index:1;width:100%;height:100%;display:block}
.mk-anomali .an-line{fill:none;stroke:#5b8fd6;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:430;stroke-dashoffset:430;animation:ciz 4s ease-in-out infinite}
.mk-anomali .an-pt{fill:var(--accent);animation:spikeNabiz 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.mk-anomali .an-ring{position:absolute;z-index:2;left:50%;top:17%;width:15px;height:15px;border-radius:50%;border:2px solid var(--accent);transform:translate(-50%,-50%);animation:halka 1.8s ease-out infinite}
.mk-anomali .an-alt{display:flex;align-items:center;justify-content:space-between;font-size:.48rem;font-weight:600;color:var(--metin-soft)}
.mk-anomali .an-alarm{display:flex;align-items:center;gap:5px;color:var(--accent);font-weight:700}
.mk-anomali .an-alarm i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:nabiz 1.4s infinite}
.mk-anomali .an-alt em{font-style:normal;font-family:var(--font-teknik);color:var(--metin)}
@keyframes halka{0%{transform:translate(-50%,-50%) scale(.35);opacity:.85}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
@keyframes ciz{0%{stroke-dashoffset:430}60%,100%{stroke-dashoffset:0}}
@keyframes spikeNabiz{0%,100%{opacity:.5;transform:scale(.8);transform-origin:center}50%{opacity:1;transform:scale(1.35)}}

/* Güvenlik / kalkan */
.mk-kalkan{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.mk-kalkan .kalkan{width:56px;color:var(--accent);overflow:hidden}
.mk-kalkan .tik{stroke-dasharray:42;stroke-dashoffset:42;animation:cizTik 3.4s ease-in-out infinite}
.mk-kalkan .tarama{fill:rgba(255,255,255,.22);animation:kalkanTara 3.4s ease-in-out infinite}
.mk-kalkan .durum{font-size:.64rem;color:rgba(255,255,255,.8);font-weight:600}
@keyframes cizTik{0%,42%{stroke-dashoffset:42}62%,100%{stroke-dashoffset:0}}
@keyframes kalkanTara{0%{transform:translateY(0);opacity:.5}45%{transform:translateY(40px);opacity:.1}100%{transform:translateY(0);opacity:.5}}

/* Kalite / kamera */
.mk-kalite{display:flex;flex-direction:column;gap:6px;height:100%}
.mk-kalite .k-cam{flex:1;position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--kilcal-ic);background:radial-gradient(120% 90% at 50% 10%,rgba(46,91,192,.16),transparent 60%),#0a1120}
.mk-kalite .k-cam::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.mk-kalite .k-urun{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:56%;height:56%;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.02));box-shadow:inset 0 0 22px rgba(0,0,0,.45)}
.mk-kalite .k-box{position:absolute;border:1.5px solid;border-radius:3px;animation:kbox 4s ease-in-out infinite}
.mk-kalite .k-box::after{position:absolute;top:-8px;left:-1px;font-size:.34rem;font-weight:800;font-family:var(--font-teknik);padding:0 3px;border-radius:2px;line-height:1.5}
.mk-kalite .k-box.ok{border-color:var(--yesil)}
.mk-kalite .k-box.ok::after{content:"OK";background:var(--yesil);color:#06130c}
.mk-kalite .k-box.hata{border-color:var(--kirmizi-ic);animation-delay:.9s}
.mk-kalite .k-box.hata::after{content:"HATA";background:var(--kirmizi-ic);color:#fff}
.mk-kalite .k-scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent2),transparent);box-shadow:0 0 10px var(--accent2);animation:kscan 3.2s ease-in-out infinite}
.mk-kalite .k-alt{display:flex;align-items:center;gap:8px;font-size:.48rem;font-weight:700;font-family:var(--font-teknik)}
.mk-kalite .k-ok{color:var(--yesil)}.mk-kalite .k-hata{color:var(--kirmizi-ic)}
.mk-kalite .k-alt em{margin-left:auto;font-style:normal;color:var(--metin-soft);font-weight:600}
@keyframes kbox{0%,20%{opacity:0;transform:scale(.7)}32%,90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
@keyframes kscan{0%,100%{top:8%}50%{top:82%}}

/* Kestirimci bakım / dalga */
.mk-bakim{display:flex;flex-direction:column;gap:6px;height:100%}
.mk-bakim .bk-head{display:flex;align-items:center;justify-content:space-between;font-size:.5rem;color:var(--metin-soft);font-weight:600}
.mk-bakim .bk-head em{font-style:normal;font-family:var(--font-teknik);color:var(--metin)}
.mk-bakim .bk-graf{flex:1;position:relative;background:var(--cam);border:1px solid var(--kilcal-ic);border-radius:7px;overflow:hidden}
.mk-bakim .bk-esik{position:absolute;left:0;right:0;top:28%;border-top:1px dashed color-mix(in srgb,var(--accent) 65%,transparent);z-index:2}
.mk-bakim .bk-esik::after{content:"eşik";position:absolute;right:4px;top:-8px;font-size:.34rem;color:var(--accent);font-weight:700;font-family:var(--font-teknik)}
.mk-bakim .dalga{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);z-index:1}
.mk-bakim .dalga path{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transform-origin:center;animation:dalgaGenlik 2.2s ease-in-out infinite}
.mk-bakim .bk-alt{display:flex;align-items:center;justify-content:space-between;font-size:.48rem;font-weight:600;color:var(--metin-soft)}
.mk-bakim .bk-durum{display:flex;align-items:center;gap:5px;color:var(--accent);font-weight:700}
.mk-bakim .bk-durum i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:nabiz 1.5s infinite}
.mk-bakim .bk-alt em{font-style:normal;font-family:var(--font-teknik);color:var(--metin)}
@keyframes dalgaAk{to{stroke-dashoffset:-36}}
@keyframes dalgaGenlik{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.15)}}

/* Akış (RPA / SCADA) */
.mk-akis{display:flex;align-items:center;justify-content:center}
.mk-akis .akis{width:100%;height:80px;color:var(--accent)}
.mk-akis .akan{offset-path:path('M30 45 H188');offset-rotate:0deg;animation:akisGit 3s ease-in-out infinite}
.mk-akis .akan2{offset-path:path('M28 24 H100 V66 H172')}
@keyframes akisGit{0%{offset-distance:0%}68%,100%{offset-distance:100%}}

/* ERP panosu — kurumsal BI çalışma alanı */
.ekran-ic.mk-erp{padding:0;display:flex}
.mk-erp .erp-nav{width:34px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border-right:1px solid rgba(255,255,255,.07)}
.mk-erp .erp-nav .brand{width:15px;height:15px;border-radius:5px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 55%,transparent);margin-bottom:3px}
.mk-erp .erp-nav i{width:15px;height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.mk-erp .erp-nav i.on{background:var(--accent2);box-shadow:0 0 10px color-mix(in srgb,var(--accent2) 60%,transparent)}
.mk-erp .erp-nav .alt{margin-top:auto;border-radius:50%;width:13px;height:13px;background:rgba(255,255,255,.16)}
.mk-erp .erp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:8px 10px}
.mk-erp .erp-head{display:flex;align-items:center;justify-content:space-between}
.mk-erp .erp-title{font-size:.6rem;font-weight:700;color:var(--metin);letter-spacing:.01em}
.mk-erp .erp-live{display:flex;align-items:center;gap:3px;font-size:.46rem;font-weight:600;color:var(--metin-soft)}
.mk-erp .erp-live i{width:5px;height:5px;border-radius:50%;background:var(--yesil);box-shadow:0 0 0 0 color-mix(in srgb,var(--yesil) 70%,transparent);animation:nabiz 1.7s ease-in-out infinite}
.mk-erp .erp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mk-erp .kpi{position:relative;background:var(--cam);border:1px solid var(--kilcal-ic);border-radius:7px;padding:5px 5px 4px;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.mk-erp .kpi .k-lbl{font-size:.42rem;font-weight:600;color:var(--metin-soft);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-erp .kpi .k-val{font-size:.66rem;font-weight:700;color:var(--metin);font-family:var(--font-teknik);letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.mk-erp .kpi .k-delta{font-size:.42rem;font-weight:700;font-family:var(--font-teknik)}
.mk-erp .kpi .up{color:var(--yesil)}.mk-erp .kpi .down{color:var(--kirmizi-ic)}
.mk-erp .kpi .k-spark{position:absolute;right:4px;bottom:4px;width:18px;height:9px;overflow:visible;opacity:.9}
.mk-erp .kpi .k-spark polyline{fill:none;stroke:var(--accent2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;animation:ciz 4.2s ease-in-out infinite}
.mk-erp .kpi:nth-child(2) .k-spark polyline{animation-delay:.4s;stroke:var(--yesil)}
.mk-erp .kpi:nth-child(3) .k-spark polyline{animation-delay:.8s;stroke:var(--kirmizi-ic)}
.mk-erp .erp-graf{flex:0 0 auto;height:40px;position:relative;background:var(--cam);border:1px solid var(--kilcal-ic);border-radius:7px;padding:5px 8px 5px;display:flex;flex-direction:column;gap:3px;min-height:0}
.mk-erp .erp-graf .g-ust{display:flex;align-items:center;justify-content:space-between;font-size:.46rem;color:var(--metin-soft);font-weight:600}
.mk-erp .erp-graf .g-ust em{font-style:normal;font-family:var(--font-teknik);color:var(--metin)}
.mk-erp .erp-bars{flex:1;position:relative;display:flex;align-items:flex-end;gap:4px;padding-bottom:1px}
.mk-erp .erp-bars::before{content:"";position:absolute;left:0;right:0;top:30%;height:0;border-top:1px dashed color-mix(in srgb,var(--accent2) 70%,transparent);opacity:.7}
.mk-erp .erp-bars::after{content:"";position:absolute;left:0;right:0;top:65%;height:1px;background:rgba(255,255,255,.07)}
.mk-erp .erp-bars i{position:relative;z-index:1;flex:1;border-radius:2px 2px 1px 1px;background:linear-gradient(180deg,var(--accent2),color-mix(in srgb,var(--accent) 70%,#0b1017));transform-origin:bottom;animation:erpBar 4.6s ease-in-out infinite}
.mk-erp .erp-bars i:nth-child(1){height:42%;animation-delay:0s}
.mk-erp .erp-bars i:nth-child(2){height:60%;animation-delay:.12s}
.mk-erp .erp-bars i:nth-child(3){height:50%;animation-delay:.24s}
.mk-erp .erp-bars i:nth-child(4){height:74%;animation-delay:.36s}
.mk-erp .erp-bars i:nth-child(5){height:64%;animation-delay:.48s}
.mk-erp .erp-bars i:nth-child(6){height:92%;background:linear-gradient(180deg,#fff,var(--accent2));box-shadow:0 0 12px color-mix(in srgb,var(--accent2) 55%,transparent);animation-delay:.6s}
.mk-erp .erp-bars i:nth-child(7){height:70%;animation-delay:.72s}
@keyframes erpBar{0%{transform:scaleY(.28);opacity:.55}22%,78%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.28);opacity:.55}}

/* OCR / belge */
.mk-ocr{display:flex;flex-direction:column;gap:6px;height:100%}
.mk-ocr .o-belge{flex:1;position:relative;overflow:hidden;border-radius:7px;padding:7px 8px;display:flex;flex-direction:column;gap:5px;background:linear-gradient(180deg,#f6f8fc,#e8edf5);box-shadow:inset 0 0 0 1px rgba(10,13,18,.06)}
.mk-ocr .o-head{display:flex;align-items:center;gap:6px}
.mk-ocr .o-logo{width:15px;height:15px;border-radius:4px;flex:0 0 auto;background:var(--accent2)}
.mk-ocr .o-tit{display:flex;flex-direction:column;gap:3px;flex:1}
.mk-ocr .o-tit i{height:3px;border-radius:2px;background:rgba(10,13,18,.22)}
.mk-ocr .o-tit i:first-child{width:48%}.mk-ocr .o-tit i:last-child{width:30%;background:rgba(10,13,18,.13)}
.mk-ocr .o-satir{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mk-ocr .o-satir u{text-decoration:none;height:4px;width:32%;border-radius:2px;background:rgba(10,13,18,.16)}
.mk-ocr .o-satir b{font-size:.5rem;font-family:var(--font-teknik);font-weight:700;color:#0a0d12;background:color-mix(in srgb,var(--accent2) 32%,transparent);padding:0 4px;border-radius:3px}
.mk-ocr .o-scan{position:absolute;left:0;right:0;top:-16px;height:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 50%,transparent),transparent);border-bottom:1.5px solid var(--accent2);animation:oscan 3.2s ease-in-out infinite}
.mk-ocr .o-cipler{display:flex;gap:5px}
.mk-ocr .o-cipler .cip{font-size:.46rem;font-weight:700;color:#fff;background:var(--accent);padding:3px 7px;border-radius:999px;opacity:0;animation:cipGel 3.6s ease-in-out infinite}
.mk-ocr .o-cipler .cip:nth-child(1){animation-delay:1.4s}.mk-ocr .o-cipler .cip:nth-child(2){animation-delay:1.8s}.mk-ocr .o-cipler .cip:nth-child(3){animation-delay:2.2s}
@keyframes oscan{0%{top:-16px}55%,100%{top:100%}}
@keyframes ocrTara{0%,100%{top:12px}55%{top:64px}}
@keyframes cipGel{0%,42%{opacity:0;transform:translateY(4px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Mobil uygulama — telefon çerçeveli canlı ekran */
.ekran-ic.mk-mobil{padding:0;display:flex;align-items:flex-end;justify-content:center}
.mk-mobil .fon{
  width:66%;height:calc(100% + 10px);margin-bottom:-1px;flex:0 0 auto;
  border-radius:18px 18px 0 0;padding:7px 7px 0;
  display:flex;flex-direction:column;gap:5px;overflow:hidden;
  background:linear-gradient(180deg,#0f1b34 0%,#0b1526 100%);
  border:1.5px solid rgba(255,255,255,.14);border-bottom:0;
  box-shadow:0 -14px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);
}
.mk-mobil .fon .cizik{width:28px;height:4px;border-radius:999px;background:rgba(255,255,255,.22);margin:1px auto 1px}
.mk-mobil .fon .f-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px}
.mk-mobil .fon .f-head .hi{display:flex;flex-direction:column;gap:2px}
.mk-mobil .fon .f-head .hi u{text-decoration:none;height:3px;width:20px;border-radius:2px;background:rgba(255,255,255,.3)}
.mk-mobil .fon .f-head .hi s{text-decoration:none;height:4px;width:32px;border-radius:2px;background:rgba(255,255,255,.6)}
.mk-mobil .fon .f-head .av{width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent))}
.mk-mobil .fon .f-kart{position:relative;border-radius:10px;padding:7px 8px;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.mk-mobil .fon .f-kart::after{content:"";position:absolute;right:-14px;top:-18px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16)}
.mk-mobil .fon .f-kart .fk-lbl{font-size:.42rem;color:rgba(255,255,255,.9);font-weight:600;letter-spacing:.04em}
.mk-mobil .fon .f-kart .fk-val{display:block;font-size:.74rem;font-weight:700;color:#fff;font-family:var(--font-teknik);letter-spacing:-.02em;margin:1px 0}
.mk-mobil .fon .f-kart .fk-delta{font-size:.42rem;font-weight:700;color:#eafff4}
.mk-mobil .fon .f-kart .fk-spark{position:absolute;right:6px;top:6px;width:32px;height:13px;overflow:visible}
.mk-mobil .fon .f-kart .fk-spark path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:ciz 4s ease-in-out infinite}
.mk-mobil .fon .f-hizli{display:flex;gap:5px}
.mk-mobil .fon .f-hizli span{flex:1;height:15px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.mk-mobil .fon .f-hizli span:first-child{background:color-mix(in srgb,var(--accent2) 32%,transparent);border-color:transparent}
.mk-mobil .fon>*{flex:0 0 auto}
.mk-mobil .fon .f-liste{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-height:0;overflow:hidden}
.mk-mobil .fon .f-row{display:flex;align-items:center;gap:5px;padding:4px 5px;border-radius:7px;background:rgba(255,255,255,.05)}
.mk-mobil .fon .f-row i{width:11px;height:11px;border-radius:4px;flex:0 0 auto;background:rgba(255,255,255,.16)}
.mk-mobil .fon .f-row .fl-ln{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.mk-mobil .fon .f-row b{font-size:.48rem;font-family:var(--font-teknik);font-weight:700;color:var(--yesil)}
.mk-mobil .fon .f-row.yeni{animation:mobRow 5s ease-in-out infinite}
.mk-mobil .fon .f-tab{margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:6px 4px;border-top:1px solid rgba(255,255,255,.09)}
.mk-mobil .fon .f-tab i{width:9px;height:9px;border-radius:3px;background:rgba(255,255,255,.16)}
.mk-mobil .fon .f-tab i.on{background:var(--accent2);box-shadow:0 0 9px color-mix(in srgb,var(--accent2) 60%,transparent)}
@keyframes mobRow{0%{opacity:0;transform:translateY(-9px)}12%,88%{opacity:1;transform:none}100%{opacity:1;transform:none}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */


@media (max-width:1100px){
  .kart-izgara{grid-template-columns:repeat(2,1fr)}
  .urun-izgara{grid-template-columns:repeat(2,1fr)}
  .yatay-kaydir{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rakam-izgara{grid-template-columns:repeat(2,1fr)}
  .surec{grid-template-columns:repeat(2,1fr);gap:34px}
  .surec-cizgi{display:none}
  .one-cikan{grid-template-columns:1fr;gap:36px}
  .cta-izgara{grid-template-columns:1fr;gap:40px}
  .alt-izgara{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:960px){
  .bolum{padding:76px 0}
  .kapsayici{padding:0 22px}
  nav[aria-label="Ana menü"]{
    position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:#fff;
    transform:translateX(100%);transition:transform var(--gecis);z-index:1001;
    padding:88px 24px 30px;box-shadow:var(--golge-yuksek);overflow-y:auto;margin:0
  }
  nav[aria-label="Ana menü"]:has(.menu.acik){transform:translateX(0)}
  .menu{flex-direction:column;align-items:stretch;gap:4px}
  .menu a,.acilir-btn{color:var(--siyah)!important;font-size:1.05rem;padding:12px 4px;width:100%;justify-content:space-between}
  .acilir{position:static;transform:none;width:100%;box-shadow:none;border:0;grid-template-columns:1fr;padding:4px 0 8px;
    opacity:1;visibility:visible;pointer-events:auto;max-height:0;overflow:hidden;transition:max-height var(--gecis)}
  .acilir[data-acik="true"]{max-height:900px}
  .acilir a{padding:9px 10px}
  .menu-btn{display:inline-flex;order:3}
  .ust-cta .ust-tel,.dil{display:none}
  .ust-bar .menu-btn{color:#fff}
  .ust-bar.kayiyor .menu-btn{color:var(--siyah)}
  .hero{min-height:auto;padding:130px 0 72px}
  .hero-guven{gap:10px 20px}
  .mobil-bar{
    display:block;position:fixed;bottom:0;left:0;right:0;z-index:890;
    background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid rgba(10,10,10,.08)
  }
  .mobil-bar-ic{display:grid;grid-template-columns:repeat(3,1fr)}
  .mobil-bar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;font-size:.72rem;font-weight:600;color:var(--siyah)}
  .mobil-bar a svg{width:21px;height:21px;color:var(--lacivert)}
  .mobil-bar a:nth-child(2) svg{color:var(--whatsapp)}
  .wa-yuzen{bottom:78px}
  body{padding-bottom:60px}
}
@media (max-width:620px){
  .kart-izgara{grid-template-columns:1fr}
  .urun-izgara{grid-template-columns:1fr}
  .yatay-kaydir{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grup-govde{padding:16px 16px 20px}
  .urun-grup>summary{padding:18px 16px}
  .grup-adet{display:none}
  .urun-alt{flex-direction:column;align-items:stretch;text-align:center}
  .urun-alt .btn{justify-content:center}
  .rakam-izgara{grid-template-columns:1fr 1fr}
  .surec{grid-template-columns:1fr}
  .alt-izgara{grid-template-columns:1fr}
  .kapsayici{padding:0 18px}
  .btn-grubu{flex-direction:column;align-items:stretch}
  .btn-grubu .btn{justify-content:center}
  .form-kart{padding:24px}
  .karusel-btnler{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .serit-ray{animation:none}
  .gir,.hero-etiket,.hero h1 .satir>span,.hero h1 .satir>em,.hero-alt,.hero .btn-grubu,.hero-guven,.ust-bar{opacity:1!important;transform:none!important}
}
@media (max-width:620px){
  .video-play{width:66px;height:66px}
  .video-play svg{width:26px;height:26px}
}