/* =========================================================
   DRS Teknoloji — landing
   Referans: Instrument (renkli panel, koyu blok, alt bilgi)
             Locomotive (ince serif, siyah çizgili dizin, monokrom)
   1. Token  2. Temel  3. Üst menü  4. Karşılama
   5. Elle yapılan işler  6. Hakkımızda  7. Alt  8. Hareket  9. Duyarlı
   ========================================================= */

/* ---------- 1. Token ---------- */
:root {
  --primary: #003596;          /* logodan */
  --primary-koyu: #00266e;
  --primary-acik: #e8eefb;
  --murekkep: #0b0b0c;
  --metin: #1c1c1e;
  --soluk: #6b6b70;
  --alt-metin: #2b2d33;        /* başlık altı metinler: soluk kalmasın */
  --cizgi: #0b0b0c;            /* Locomotive: siyah 1px */
  --cizgi-ince: #e3e3e3;
  --zemin: #ffffff;
  --gri: #ececec;

  --govde: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;    /* etiket, menü, buton */
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif; /* hakkımızda + alt */
  --piksel: "VT323", ui-monospace, monospace;           /* hakkımızda vurguları */

  --kap: 1360px;
  --kenar: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--govde);
  font-size: 17px;
  line-height: 1.55;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { color: var(--murekkep); margin: 0; font-weight: 400; }
p { margin: 0; }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--kenar)); margin: 0 auto; padding: 0 var(--kenar); }

.etiket { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }

.dugme {
  display: inline-flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font-family: var(--mono); font-size: 15px; font-weight: 500; text-decoration: none;
  transition: background-color .16s, color .16s;
}
.dugme span { transition: transform .16s var(--ease); }
.dugme:hover span { transform: translateX(3px); }
.dugme-acik { background: #e8e8e8; color: var(--murekkep); }
.dugme-acik:hover { background: #fff; }
.dugme-koyu { background: var(--murekkep); color: #fff; height: 42px; font-size: 15px; }
.dugme-koyu:hover { background: var(--primary); }

/* ---------- 3. Üst menü ---------- */
.ust {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .3s, box-shadow .3s;
}
.ust-ic {
  display: flex; align-items: center; justify-content: space-between; height: 72px;
  border: 1px solid transparent; border-radius: 0;
  transition: max-width .5s var(--ease), height .5s var(--ease), margin .5s var(--ease), padding .5s var(--ease),
    border-radius .5s var(--ease), background-color .3s, border-color .3s, box-shadow .3s;
}
/* logo menü yüksekliğine göre boyutlanır (üst-altta küçük pay); menü daralınca onunla küçülür */
.ust-logo { align-self: stretch; display: flex; padding-block: 12px; transition: padding .5s var(--ease); }
.ust.dolu .ust-logo { padding-block: 9px; }
.ust-logo img { height: 100%; width: auto; transition: filter .2s; }
/* kaydırınca: daralan, köşeli (hap değil) yüzen panel */
.ust.dolu .ust-ic {
  max-width: min(980px, calc(100% - 24px)); height: 56px; margin-top: 10px; padding: 0 8px 0 18px;
  border-radius: 10px; border-color: var(--cizgi-ince);
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 10px 30px -18px rgba(0,30,90,.35);
}
.ust.dolu .ust-nav .ust-cta { border-radius: 6px; }
.ust.dolu.koyu .ust-ic { background: rgba(11,11,12,.55); border-color: rgba(255,255,255,.14); }
.ust-nav { display: flex; align-items: center; gap: 32px; font-family: var(--mono); font-size: 14px; font-weight: 500; }
.ust-nav a { text-decoration: none; color: var(--murekkep); transition: color .16s, background-color .16s; }
.ust-nav a:hover { color: var(--primary); }
.ust-nav .ust-cta { padding: 9px 18px; border-radius: 999px; background: var(--primary); color: #fff; }
.ust-nav .ust-cta:hover { background: var(--primary-koyu); color: #fff; }
/* sağ altta sabit dil butonu */
.dil {
  position: fixed; right: var(--kenar); bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 14px;
  border: 1px solid var(--cizgi-ince); border-radius: 999px; background: #fff; cursor: pointer;
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--murekkep);
  box-shadow: 0 8px 24px rgba(11,11,12,.12);
  transition: background-color .16s, color .16s, transform .16s var(--ease), box-shadow .16s;
}
.dil:hover { background: var(--primary); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,53,150,.28); }
/* koyu bölümün üstündeyken: yazılar ve logo negatife döner, alt çizgi kalkar */
.ust-nav a { transition: color .2s, background-color .16s, border-radius .3s; }
.ust.koyu { box-shadow: none; }
.ust.koyu .ust-logo img { filter: brightness(0) invert(1); }
.ust.koyu .ust-nav a:not(.ust-cta) { color: #fff; }
.ust.koyu .ust-nav a:not(.ust-cta):hover { color: rgba(255,255,255,.7); }

/* logodaki piksel: etiketlerin önündeki kare */
.kare { display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--primary); vertical-align: 1px; }

/* ---------- 4. Karşılama ---------- */
.giris {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 136px 0 40px;
}
.piksel-giris { position: absolute; inset: 0 0 0 auto; width: 56%; height: 100%; pointer-events: none; }
.giris-ic { position: relative; }
.giris-etiket { color: var(--soluk); }
.giris-baslik {
  margin: 28px 0 0;
  font-size: clamp(2.7rem, 7.8vw, 7.6rem); font-weight: 600;
  line-height: 1; letter-spacing: -.05em; color: var(--murekkep);
}
.giris-baslik em, .dizin-bas h2 em { font-style: normal; color: var(--primary); }
/* "yapay zekâ": site.js sağdaki desenle aynı karelerden SVG olarak çizer; JS yoksa düz metin kalır */
.piksel-yazi { display: inline-block; margin-right: .06em; }
.piksel-yazi svg { display: block; overflow: visible; }
.piksel-yazi.ilk rect { transform-box: fill-box; transform-origin: center; animation: piksel-belir .5s var(--ease) both; }
@keyframes piksel-belir { from { opacity: 0; transform: scale(.4); } }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.giris-metin { max-width: 38ch; margin-top: 32px; font-size: clamp(18px, 1.5vw, 20px); font-weight: 400; line-height: 1.5; color: var(--alt-metin); }
.giris-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.dugme-mavi { background: var(--primary); color: #fff; }
.dugme-mavi:hover { background: var(--primary-koyu); }
.dugme-mavi:hover span { transform: translateY(3px); }
.dugme-cizgi { border: 1px solid #cfd2d8; color: var(--murekkep); }
.dugme-cizgi:hover { border-color: var(--murekkep); }





/* ---------- 5. Elle yapılan işler → otomasyon ---------- */
/* çapaya gelince bölümün kendi üst boşluğu sayılmasın; menünün ~30px altına otursun */
.otomasyon { padding: clamp(80px, 10vw, 128px) 0 clamp(96px, 12vw, 160px); scroll-margin-top: calc(32px - clamp(80px, 10vw, 128px)); }
.dizin-bas { margin-bottom: clamp(40px, 5vw, 64px); }
.dizin-bas .etiket { color: var(--soluk); }
.dizin-bas h2 { margin-top: 20px; font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 600; line-height: 1.04; letter-spacing: -.05em; }
.isler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.is { grid-column: span 2; display: flex; flex-direction: column; border: 1px solid var(--cizgi-ince); border-radius: 20px; overflow: hidden; background: #fff; }
.is:nth-child(n+4) { grid-column: span 3; }
.is-gorsel {
  height: 196px; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(rgba(0,53,150,.13) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--primary-acik);
  font-size: 12px; line-height: 1.35; color: #1b2433;
}
.is-metin { padding: 20px 22px 24px; }
.is-alan { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.is-once { margin-top: 12px; font-size: 15px; color: var(--alt-metin); }
/* eski yol, kart görünür olunca kırmızı çizgiyle üstü çizilir */
.is-once span {
  background: linear-gradient(#e5484d, #e5484d) 0 55% / 0% 2px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .7s var(--ease) .35s;
}
.is.acik .is-once span, html:not(.js) .is-once span { background-size: 100% 2px; }
.is-simdi { margin-top: 6px; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--murekkep); }

/* kart çizimleri */
.g-sohbet { width: min(100%, 300px); display: grid; gap: 6px; }
.g-sohbet p { padding: 8px 11px; border-radius: 12px; }
.g-gelen { justify-self: start; background: #fff; border-bottom-left-radius: 4px !important; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.g-giden { justify-self: end; max-width: 88%; background: var(--primary); color: #fff; border-bottom-right-radius: 4px !important; }
.g-giden i { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-style: normal; font-size: 10px; letter-spacing: .04em; opacity: .75; }
.g-giden .kare { width: 6px; height: 6px; background: #fff; }
.g-onay { justify-self: end; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--primary); font-weight: 600; font-size: 11px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.g-satirlar { width: min(100%, 300px); background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -14px rgba(0,30,90,.35); overflow: hidden; }
.g-satirlar p { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #eef0f4; }
.g-satirlar p:last-child { border-bottom: 0; }
.g-satirlar b { font-weight: 600; font-variant-numeric: tabular-nums; }
.g-satirlar em { padding: 2px 7px; border-radius: 999px; background: #e3f5ea; color: #157a3c; font-style: normal; font-size: 10px; font-weight: 600; }
.g-satirlar em.islendi { background: var(--primary); color: #fff; }

.g-grafik { width: min(100%, 300px); padding: 14px; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -14px rgba(0,30,90,.35); }
.g-uyari { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #fff1e0; color: #a14b00; font-size: 11px; font-weight: 600; }
.g-cubuk { display: flex; align-items: flex-end; gap: 7px; height: 84px; margin-top: 12px; }
.g-cubuk i { flex: 1; height: var(--y); border-radius: 4px 4px 0 0; background: #c9d6f2; }
.g-cubuk i.on { background: var(--primary); }

.g-bag { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; align-items: center; gap: 8px 0; width: min(100%, 380px); }
.g-kutu { padding: 10px 14px; border-radius: 10px; background: #fff; font-weight: 600; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -14px rgba(0,30,90,.35); }
.g-kutu:first-child { grid-column: 1; grid-row: 1 / 3; align-self: center; background: var(--primary); color: #fff; }
.g-hat { grid-column: 2; grid-row: 1 / 3; position: relative; height: 2px; margin: 0 12px; background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 11px); }
.g-hat i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; background: var(--primary); animation: akis 2.4s linear infinite; }
.g-kutu:nth-child(3) { grid-column: 3; grid-row: 1; }
.g-kutu:nth-child(4) { grid-column: 3; grid-row: 2; }
.g-bag small { grid-column: 1 / -1; justify-self: center; margin-top: 6px; color: #157a3c; font-size: 11px; font-weight: 500; }
@keyframes akis { from { left: 0; } to { left: calc(100% - 8px); } }

.g-takip { width: min(100%, 380px); padding: 14px 16px; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -14px rgba(0,30,90,.35); }
.g-siparis { display: flex; justify-content: space-between; font-weight: 600; }
.g-siparis span { color: #157a3c; font-weight: 500; }
.g-takip ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0 0; padding: 0; }
.g-takip li { position: relative; padding-top: 16px; font-size: 11px; color: #8a909a; }
.g-takip li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: #e3e6ec; }
.g-takip li::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #e3e6ec; }
.g-takip li.tamam, .g-takip li.simdi { color: var(--murekkep); }
.g-takip li.tamam::before, .g-takip li.tamam::after, .g-takip li.simdi::after { background: var(--primary); }
.g-takip li.simdi::after { box-shadow: 0 0 0 4px rgba(0,53,150,.18); }

.os-son { margin-top: 32px; font-size: 17px; color: var(--alt-metin); }
.os-son a { color: var(--primary); text-underline-offset: 4px; }

/* ---------- 6. Hakkımızda ---------- */
/* koyu bölüm ekranın en üstüne otursun: menü zaten üstünde şeffaf duruyor */
.hakkinda { scroll-margin-top: -64px; position: relative; overflow: hidden; padding: clamp(112px, 14vw, 192px) 0 clamp(80px, 10vw, 128px); background: var(--murekkep); color: #fff; }
.piksel { position: absolute; inset: 0 0 0 auto; width: 46%; height: 100%; pointer-events: none; }
.hakkinda-ic { position: relative; }
/* hakkımızda ve alt bölüm eski yazı tipleriyle kalır */
.hakkinda, .alt, .hakkinda .etiket, .hakkinda .dugme, .alt .dugme { font-family: var(--sans); }
.hakkinda .dugme, .alt .dugme { font-weight: 400; }
.hakkinda .dugme { font-size: 16px; }
.hakkinda .etiket { color: rgba(255,255,255,.6); }
.hakkinda-cumle {
  margin: 24px 0 40px; max-width: 26ch;
  font-size: clamp(1.9rem, 3.6vw, 3.4rem); font-weight: 400; line-height: 1.12; letter-spacing: -.025em;
}
.yetenek { list-style: none; margin: clamp(80px, 10vw, 128px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.yetenek li { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
.yetenek span { font-size: 13px; color: rgba(255,255,255,.5); }
.yetenek h3 { margin: 28px 0 8px; color: #fff; font-family: var(--piksel); font-size: 42px; font-weight: 400; line-height: 1; }
.yetenek p { font-size: 15px; font-weight: 400; color: rgba(255,255,255,.7); max-width: 30ch; }

/* ---------- 7. Alt ---------- */
.alt { padding: clamp(56px, 7vw, 88px) 0 20px; background: var(--gri); color: var(--murekkep); }
.alt-ust { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px 24px; }
.alt-cagri h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -.015em; margin-bottom: 24px; }
.alt-durum { display: flex; align-items: center; margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--soluk); }
.alt-durum > span + span::before { content: "·"; margin: 0 10px; color: #b4b4b8; }
.alt-saat { font-variant-numeric: tabular-nums; color: var(--murekkep); }
.alt-ofis { display: inline-flex; align-items: center; gap: 8px; }
.alt-ofis b { font-weight: 400; }
.alt-ofis i { width: 7px; height: 7px; border-radius: 50%; background: #9a9aa0; }
.alt-durum.acik .alt-ofis i { background: #1f9d55; animation: nabiz 2s ease-out infinite; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,.45); } 100% { box-shadow: 0 0 0 8px rgba(31,157,85,0); } }
.alt-dev {
  margin: clamp(64px, 9vw, 128px) 0 0; padding-bottom: .22em;
  font-size: 14.6vw; font-weight: 500; line-height: .85; white-space: nowrap;
  color: var(--murekkep);
}
.alt-dev .oturt { display: inline-block; letter-spacing: -.06em; } /* em, oturt sırasında kendi boyutundan hesaplansın */
.alt-dev em { font-style: normal; color: var(--primary); }
.alt-son { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid #cfcfcf; font-size: 13px; color: var(--soluk); }
.alt-son a { text-decoration: none; transition: color .16s; }
.alt-son a:hover { color: var(--murekkep); }
.yasal { position: relative; display: flex; gap: 20px; }
.yasal-ac { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; transition: color .16s; }
.yasal-ac:hover, .yasal-ac[aria-expanded="true"] { color: var(--murekkep); }
.yasal-pencere {
  position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 20;
  width: min(360px, calc(100vw - 2 * var(--kenar))); max-height: 280px; overflow: auto;
  padding: 16px 18px; border: 1px solid var(--cizgi-ince); border-radius: 12px; background: #fff;
  box-shadow: 0 12px 32px rgba(11,11,12,.12); font-size: 13px; line-height: 1.55; color: var(--alt-metin);
  transform-origin: bottom left; animation: pencere-ac .22s var(--ease);
}
.yasal-pencere strong { display: block; margin-bottom: 8px; font-weight: 500; color: var(--murekkep); }
.yasal-pencere p { margin: 0 0 8px; }
.yasal-pencere p:last-child { margin-bottom: 0; }
.yasal-pencere a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
@keyframes pencere-ac { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* ---------- 8. Hareket ---------- */
/* .gor yalnız JS çalışırsa gizlenir; JS yoksa ya da hareket kapalıysa sayfa olduğu gibi görünür */
.js .gor { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--gecikme, 0ms); }
.js .gor.acik { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  .js .gor { opacity: 1; transform: none; transition: none; }
  .is-once span { transition: none; background-size: 100% 2px; }
  .g-hat i { animation: none; left: 50%; }
  .dugme:hover span { transform: none; }
  .dil:hover { transform: none; }
  .alt-durum.acik .alt-ofis i, .yasal-pencere { animation: none; }
}

/* ---------- 9. Duyarlı ---------- */
@media (max-width: 1024px) {
  .yetenek { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .isler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is, .is:nth-child(n+4) { grid-column: auto; }
  .is:last-child { grid-column: 1 / -1; }
  .piksel { width: 100%; opacity: .3; }
  .piksel-giris { opacity: .16; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .ust-ic { height: 64px; }
  .ust-nav { gap: 0; }
  .ust-nav a:not(.ust-cta) { display: none; }
  .dil { bottom: 16px; height: 42px; }
  .alt { padding-bottom: 72px; } /* sabit dil butonu son satırın üstüne binmesin */
  .ust.dolu .ust-ic { height: 52px; margin-top: 8px; }
  .giris { padding-top: 112px; }


  .isler { grid-template-columns: 1fr; }
  .is, .is:nth-child(n+4) { grid-column: auto; }
  .is-gorsel { height: 176px; }
  .yetenek { grid-template-columns: 1fr; }
  .alt-ust { grid-template-columns: 1fr; }
  .alt-son { flex-wrap: wrap; }
  .yasal { order: 3; flex-basis: 100%; }
}