/* ============================================================
   ALARATA İNŞAAT — Prototip tasarım sistemi (endüstriyel)
   Semantik renkler CSS değişkenleriyle dark/light arası geçer.
   --color-primary panelden (tema_yonetimi) gelecek; burada sabit.
   ============================================================ */

:root {
  /* Marka — turuncu (şantiye/enerji). RGB kanalları (Tailwind alpha için). */
  --color-primary: 242 107 29;       /* #F26B1D */
  --color-primary-dark: 209 78 12;   /* #D14E0C */

  /* AYDINLIK MOD (varsayılan) — gri/çelik nötrler */
  --bg: 245 246 248;        /* #F5F6F8 */
  --surface: 255 255 255;   /* #FFFFFF */
  --surface-2: 239 241 244; /* #EFF1F4 */
  --text: 22 27 34;         /* #161B22 */
  --text-muted: 90 100 114; /* #5A6472 */
  --border: 221 225 231;    /* #DDE1E7 */
  --grid-line: 15 23 42 / 0.05;
}

.dark {
  /* KARANLIK MOD — çelik/grafit */
  --bg: 13 15 18;           /* #0D0F12 */
  --surface: 22 25 30;      /* #16191E */
  --surface-2: 30 34 41;    /* #1E2229 */
  --text: 226 229 234;      /* #E2E5EA */
  --text-muted: 150 159 172;/* #969FAC */
  --border: 39 44 53;       /* #272C35 */
  --grid-line: 148 163 184 / 0.07;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: rgb(var(--bg));
  color: rgb(var(--text));
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, .font-head { font-family: 'Archivo', system-ui, sans-serif; }
::selection { background: rgb(var(--color-primary) / 0.85); color: #fff; }

/* Tutarlı genişlik — tüm sayfalarda header ile aynı hizada */
.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
}

/* ---- Eyebrow (turuncu çizgili üst başlık) ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em;
  font-size: .78rem; color: rgb(var(--color-primary));
}
.eyebrow::before {
  content: ""; width: 2rem; height: 2px;
  background: rgb(var(--color-primary)); display: inline-block;
}
.eyebrow--center::after {
  content: ""; width: 2rem; height: 2px;
  background: rgb(var(--color-primary)); display: inline-block;
}

/* ---- Blueprint / endüstriyel grid arkaplanı ---- */
.blueprint {
  background-image:
    linear-gradient(rgb(var(--grid-line)) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--grid-line)) 1px, transparent 1px);
  background-size: 48px 48px;
}
.blueprint--fade {
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
}

/* Diyagonal turuncu "şantiye" şeridi */
.hazard-stripe {
  background-image: repeating-linear-gradient(45deg,
    rgb(var(--color-primary)) 0, rgb(var(--color-primary)) 12px,
    transparent 12px, transparent 24px);
}

/* ---- Butonlar ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .95rem 1.6rem; border-radius: 2px;
  transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
  cursor: pointer; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: rgb(var(--color-primary)); color: #fff; }
.btn--primary:hover { background: rgb(var(--color-primary-dark)); box-shadow: 0 12px 28px -10px rgb(var(--color-primary) / .7); }
.btn--ghost { background: transparent; color: rgb(var(--text)); border: 1px solid rgb(var(--border)); }
.btn--ghost:hover { border-color: rgb(var(--color-primary)); color: rgb(var(--color-primary)); }
.btn--light { background: rgb(var(--surface)); color: rgb(var(--text)); border: 1px solid rgb(var(--border)); }
.btn--light:hover { border-color: rgb(var(--color-primary)); }

/* ---- Kart ---- */
.card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 4px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-6px); border-color: rgb(var(--color-primary) / .55); box-shadow: 0 24px 50px -22px rgb(0 0 0 / .35); }

/* Başlık altı ince çizgi */
.rule { height: 1px; background: rgb(var(--border)); }

/* Kesik köşe (endüstriyel) */
.cut-corner { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }

/* ---- Reveal animasyonu ---- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Logo (tema-bazlı görsel; src JS ile değişir) ---- */
.logo-img { display: block; height: 36px; width: auto; }
@media (min-width: 1024px) { .logo-img { height: 42px; } }

/* ---- Header ---- */
.site-header { transition: background .3s, border-color .3s, box-shadow .3s; }
.site-header.is-scrolled {
  background: rgb(var(--surface) / .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-color: rgb(var(--border));
  box-shadow: 0 10px 30px -20px rgb(0 0 0 / .4);
}
.nav-link { position: relative; font-weight: 500; color: rgb(var(--text-muted)); transition: color .2s; }
.nav-link:hover, .nav-link.is-active { color: rgb(var(--text)); }
.nav-link.is-active::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px;
  background: rgb(var(--color-primary));
}

/* Büyük rakam (sayaç) */
.stat-num { font-family: 'Oswald', sans-serif; font-weight: 600; line-height: .9; letter-spacing: -.01em; }

/* İnce scrollbar (tablo) */
.thin-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgb(var(--border)); border-radius: 99px; }

/* Tablo satır hover */
.ref-row { transition: background .15s; }
.ref-row:hover { background: rgb(var(--color-primary) / .06); }

/* Detay sayfası olan referans satırları */
.ref-row--link { cursor: pointer; }
.ref-link { color: inherit; font-weight: 500; transition: color .2s; }
.ref-link:hover { color: rgb(var(--color-primary)); }
.ref-link-arrow { color: rgb(var(--color-primary)); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.ref-row--link:hover .ref-link-arrow { opacity: 1; transform: none; }

/* Footer link */
.foot-link { color: rgb(var(--text-muted)); transition: color .2s; }
.foot-link:hover { color: rgb(var(--color-primary)); }

/* ---- Mobil drawer ---- */
.mobile-drawer { visibility: hidden; pointer-events: none; }
.mobile-drawer .drawer-bg { opacity: 0; transition: opacity .3s; }
.mobile-drawer .drawer-panel { transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
body.menu-open { overflow: hidden; }
body.menu-open .mobile-drawer { visibility: visible; pointer-events: auto; }
body.menu-open .drawer-bg { opacity: 1; }
body.menu-open .drawer-panel { transform: none; }

/* Dil/tema küçük buton */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 3px;
  border: 1px solid rgb(var(--border)); color: rgb(var(--text));
  transition: border-color .2s, color .2s, background .2s;
}
.icon-btn:hover { border-color: rgb(var(--color-primary)); color: rgb(var(--color-primary)); }

@media (min-width: 1024px) {
  [data-menu-open] { display: none !important; }
}

/* ============================================================
   Hero video (anasayfa arkaplan)
   ============================================================ */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-poster {
  z-index: 1;
  transition: opacity 0.55s ease;
}
.hero-video {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.hero-video.is-ready { opacity: 1; }
.hero-poster.is-hidden { opacity: 0; }
/* Video üstü okunabilirlik katmanları (dark/light uyumlu) */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgb(var(--bg) / .94), rgb(var(--bg) / .82) 38%, rgb(var(--bg) / .35) 100%),
    linear-gradient(to top, rgb(var(--bg)) 2%, transparent 45%, rgb(var(--bg) / .25) 100%);
}
/* Video oynatılamazsa poster / görsel kalır */

/* "Video oynatılıyor" mini rozeti */
.live-dot { position: relative; display: inline-block; width: .55rem; height: .55rem; border-radius: 99px; background: rgb(var(--color-primary)); }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 99px;
  background: rgb(var(--color-primary)); animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }

/* ============================================================
   Görsel galeri (proje kartları / referanslar)
   ============================================================ */
.tile {
  position: relative; display: block; overflow: hidden;
  border: 1px solid rgb(var(--border)); border-radius: 4px;
  background: rgb(var(--surface));
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.tile:hover img { transform: scale(1.06); }
/* Üzerine gelince beliren karartma + başlık */
.tile-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(to top, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .15) 55%, transparent 100%);
  opacity: 1; transition: opacity .4s;
}
.tile-overlay--hover { opacity: 0; }
.tile:hover .tile-overlay--hover { opacity: 1; }
.tile-tag {
  align-self: flex-start; margin-bottom: .55rem;
  background: rgb(var(--color-primary)); color: #fff;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .68rem;
  letter-spacing: .12em; padding: .28rem .6rem; border-radius: 2px;
}

/* Bento galeri: boşlukları otomatik doldur */
.bento-grid {
  grid-auto-flow: dense;
}
.bento-grid > .tile {
  height: 100%;
  min-height: 0;
}

/* İletişim formu — gönderim animasyonu */
.contact-form {
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
}
.contact-form--hide {
  opacity: 0;
  transform: translateY(12px) scale(.985);
  filter: blur(2px);
  pointer-events: none;
}
.form-success {
  position: relative;
  text-align: center;
  padding: 3rem 1.5rem;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.form-success--show {
  opacity: 1;
  transform: none;
}
.form-success__ring {
  position: absolute;
  inset: 10% 20%;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(var(--color-primary) / .18) 0%, transparent 70%);
  animation: form-pulse 2.4s ease-out infinite;
}
.form-success__icon {
  position: relative;
  z-index: 1;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-primary));
  color: #fff;
  border-radius: 4px;
  transform: scale(.6) rotate(-8deg);
  opacity: 0;
  animation: form-pop .65s cubic-bezier(.2,.9,.2,1.2) .15s forwards;
}
.form-success--show .form-success__icon { animation: form-pop .65s cubic-bezier(.2,.9,.2,1.2) .1s forwards; }
.form-success__eyebrow {
  position: relative;
  z-index: 1;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: rgb(var(--color-primary));
  margin-bottom: .5rem;
}
@keyframes form-pop {
  0% { opacity: 0; transform: scale(.5) rotate(-12deg); }
  70% { transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes form-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Köşe aksanı (endüstriyel "bracket") */
.corner-accent { position: relative; }
.corner-accent::before, .corner-accent::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border-color: rgb(var(--color-primary)); opacity: .9;
}
.corner-accent::before { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; }
.corner-accent::after { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; }

/* Lightbox (basit) */
.lightbox { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgb(0 0 0 / .9); }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1100px, 94vw); max-height: 88vh; object-fit: contain; border: 1px solid rgb(255 255 255 / .12); }
.lightbox-close { position: absolute; top: 1.2rem; right: 1.4rem; color: #fff; opacity: .8; }
.lightbox-close:hover { opacity: 1; }

/* Bölüm üstü ince marka şeridi */
.section-kicker { display: flex; align-items: center; gap: 1rem; }
.section-kicker::after { content: ""; flex: 1; height: 1px; background: rgb(var(--border)); }

/* ============================================================
   Marka logoları — CSS mask ile tek renk (dark/light uyumlu)
   --logo custom property'sine SVG yolu verilir.
   ============================================================ */
.brand-logo {
  display: block; width: 100%; height: 40px;
  background-color: rgb(var(--text-muted) / .8);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: .85;
  transition: background-color .35s, opacity .35s, transform .35s;
}
.brand-logo:hover {
  background-color: rgb(var(--text));
  opacity: 1; transform: translateY(-2px);
}

/* Footer — Powered by Grafion (dark/light uyumlu mask) */
.grafion-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgb(var(--text-muted) / .65);
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}
.grafion-credit:hover {
  color: rgb(var(--text-muted));
  text-decoration: none;
}
.grafion-credit__label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}
.grafion-credit__logo {
  display: block;
  width: 4.75rem;
  height: 0.875rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url(/temalar/alarata/varliklar/grafion_logo.svg) no-repeat center / contain;
  mask: url(/temalar/alarata/varliklar/grafion_logo.svg) no-repeat center / contain;
  opacity: 0.92;
}
.grafion-credit:hover .grafion-credit__logo { opacity: 1; }

/* Faaliyet alanları — sidebar scroll-spy */
.faaliyet-nav-link.is-active {
  border-color: rgb(var(--color-primary));
  color: rgb(var(--text));
  font-weight: 600;
}

/* Quill içerik + medya embed (editörden gelen HTML) */
.prose-alarata h1,.prose-alarata h2,.prose-alarata h3 { font-family: 'Archivo',sans-serif; font-weight: 700; margin: 1.25em 0 .5em; color: rgb(var(--text)); }
.prose-alarata p { margin-bottom: 1em; }
.prose-alarata ul,.prose-alarata ol { margin: 1em 0; padding-left: 1.5em; }
.prose-alarata img { max-width: 100%; height: auto; border-radius: 2px; }
.prose-alarata blockquote { border-left: 3px solid rgb(var(--color-primary)); padding-left: 1rem; color: rgb(var(--text-muted)); }
.medya-embed { margin: 1.5rem 0; border-radius: 2px; overflow: hidden; background: #000; max-width: 100%; }
.medya-embed video { display: block; width: 100%; height: auto; max-height: 70vh; }
.medya-embed__oran { position: relative; width: 100%; padding-top: 56.25%; }
.medya-embed__oran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   404 — endüstriyel / blueprint
   ============================================================ */
.page-404 {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 78px);
  display: flex;
  flex-direction: column;
}
.page-404__bg {
  position: absolute;
  inset: 0;
  opacity: .55;
  pointer-events: none;
}
.page-404__glow {
  position: absolute;
  top: 12%;
  left: 50%;
  width: min(720px, 90vw);
  height: min(720px, 70vw);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--color-primary) / .14) 0%, transparent 68%);
  pointer-events: none;
}
.page-404__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  align-items: center;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 8vw, 5rem);
}
@media (min-width: 1024px) {
  .page-404__inner {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.05fr);
    gap: 4rem;
  }
}
.page-404__visual {
  text-align: center;
}
.page-404__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.35rem, 2vw, 1rem);
  line-height: 1;
  user-select: none;
}
.page-404__digit {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(5.5rem, 18vw, 11rem);
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(var(--text) / .22);
  text-shadow: 0 0 40px rgb(var(--color-primary) / .08);
}
.page-404__zero {
  position: relative;
  width: clamp(5.5rem, 18vw, 11rem);
  height: clamp(5.5rem, 18vw, 11rem);
  display: grid;
  place-items: center;
}
.page-404__zero-ring {
  position: absolute;
  inset: 8%;
  border: 2px solid rgb(var(--color-primary) / .55);
  border-radius: 50%;
  animation: err404-pulse 3.2s ease-in-out infinite;
}
.page-404__crosshair::before,
.page-404__crosshair::after {
  content: "";
  position: absolute;
  background: rgb(var(--color-primary) / .35);
}
.page-404__crosshair::before {
  left: 50%;
  top: 18%;
  width: 1px;
  height: 64%;
  transform: translateX(-50%);
}
.page-404__crosshair::after {
  top: 50%;
  left: 18%;
  height: 1px;
  width: 64%;
  transform: translateY(-50%);
}
.page-404__tag {
  margin-top: 1rem;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}
.page-404__content { max-width: 38rem; }
.page-404__title {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  line-height: 1.08;
  color: rgb(var(--text));
}
.page-404__lead {
  margin-top: 1.1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgb(var(--text-muted));
  max-width: 34rem;
}
.page-404__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}
.page-404__nav {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.page-404__chip {
  display: inline-flex;
  align-items: center;
  padding: .55rem .95rem;
  border: 1px solid rgb(var(--border));
  border-radius: 2px;
  font-size: .82rem;
  font-weight: 600;
  color: rgb(var(--text-muted));
  background: rgb(var(--surface) / .55);
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.page-404__chip:hover {
  border-color: rgb(var(--color-primary));
  color: rgb(var(--color-primary));
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgb(var(--color-primary) / .55);
}
@keyframes err404-pulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.04); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .page-404__zero-ring { animation: none; }
}

/* ============================================================
   Özel imleç (panelden açılır / renk seçilir)
   ============================================================ */
@media (pointer: fine) {
  html.has-site-cursor,
  html.has-site-cursor * {
    cursor: none !important;
  }
}

.site-cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s ease;
}
.site-cursor.is-visible { opacity: 1; }

.site-cursor__dot,
.site-cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
  pointer-events: none;
}

.site-cursor__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--site-cursor-color, rgb(var(--color-primary)));
  box-shadow: 0 0 10px var(--site-cursor-glow, rgb(var(--color-primary) / .35));
  transition: width .12s ease, height .12s ease;
}

.site-cursor__ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--site-cursor-color, rgb(var(--color-primary)));
  border-radius: 3px;
  opacity: .72;
  transition: width .15s ease, height .15s ease, opacity .12s ease, border-radius .15s ease;
}

.site-cursor.is-hover .site-cursor__ring {
  width: 52px;
  height: 52px;
  opacity: 1;
  border-radius: 4px;
}

.site-cursor.is-hover .site-cursor__dot {
  width: 8px;
  height: 8px;
}

.site-cursor.is-click .site-cursor__ring {
  width: 28px;
  height: 28px;
  opacity: .95;
}

.site-cursor.is-click .site-cursor__dot {
  width: 4px;
  height: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html.has-site-cursor,
  html.has-site-cursor * { cursor: auto !important; }
  .site-cursor { display: none !important; }
}