/* ==========================================================================
   RSTECH – Giriş kapısı (index.html)
   Bağımsız stil dosyası; site şablonuyla (style.css) paylaşılan kural yok.
   Dil anahtarı görünümü için css/language-switcher.css ayrıca yüklenir.
   ========================================================================== */

:root {
  --red: #cb0000;               /* sitenin vurgu rengi */
  --red-soft: #ff6b68;          /* koyu zeminde okunur kırmızı (6.7:1) */
  --ink: #1e1e1e;               /* sitenin koyu zemini */
  --ink-2: #4d4d4d;
  --paper: #f2f2f2;             /* sitenin .mil-soft-bg rengi */
  --white: #ffffff;

  --seam: 5px;                  /* diyagonal kırmızı dikiş kalınlığı */
  --cut-top: 55%;               /* açık panelin üst kenar başlangıcı */
  --cut-bottom: 45%;            /* açık panelin alt kenar başlangıcı */
  --shift: 0px;                 /* logo rozetinin dikişle birlikte kayması */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;

  --gutter: clamp(2rem, 5vw, 5rem);
  --col: min(32vw, 30rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Sahne
   -------------------------------------------------------------------------- */
.gate {
  position: relative;
  height: 100vh;                 /* dvh desteklemeyen tarayıcılar için */
  height: max(100dvh, 620px);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Marka rozeti: dikişin tam ortasında, iki dünyanın menteşesi
   -------------------------------------------------------------------------- */
.gate__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(9rem, 11vw, 10.5rem);
  height: 4.25rem;
  border-radius: 999px;
  background: var(--white);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 48px -16px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transform: translate(calc(-50% + var(--shift)), -50%);
  transition: transform 560ms var(--ease-out), opacity 240ms ease;
  animation: gate-pop 600ms var(--ease-out) 700ms both;
}

.gate__brand img {
  display: block;
  height: 1.6rem;
  width: auto;
}

/* --------------------------------------------------------------------------
   Dil anahtarı (görünüm: sitenin .mil-lang-switcher bileşeni)
   -------------------------------------------------------------------------- */
.gate__lang {
  position: absolute;
  top: clamp(1rem, 3vh, 1.75rem);
  right: clamp(1rem, 3vw, 2.5rem);
  z-index: 5;
  animation: gate-fade 600ms ease 900ms both;
  transition: opacity 240ms ease;
}

/* --------------------------------------------------------------------------
   Paneller
   -------------------------------------------------------------------------- */
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.panel--dark {
  z-index: 1;
  padding-left: var(--gutter);
  color: var(--white);
  background: var(--ink);
  animation: gate-in-left 900ms var(--ease-out) both;
}

.panel--light {
  z-index: 2;
  justify-content: flex-end;
  padding-right: var(--gutter);
  color: var(--ink);
  background: var(--red);           /* dikiş rengi: iki clip arasındaki şerit */
  clip-path: polygon(var(--cut-top) 0, 100% 0, 100% 100%, var(--cut-bottom) 100%);
  transition: clip-path 560ms var(--ease-out);
  animation: gate-in-right 900ms var(--ease-out) 80ms both;
}

.panel__surface {
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: polygon(
    calc(var(--cut-top) + var(--seam)) 0,
    100% 0,
    100% 100%,
    calc(var(--cut-bottom) + var(--seam)) 100%
  );
  transition: clip-path 560ms var(--ease-out);
}

/* Tüm paneli kaplayan tek erişilebilir link */
.panel__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.panel__link:focus-visible {
  outline: 3px solid var(--red-soft);
  outline-offset: -10px;
}

.panel--light .panel__link:focus-visible { outline-color: var(--red); }

/* Zemin katmanları: statik olanlar bir kez boyanır, yalnızca ışık hareket eder */
.panel__bg,
.panel__glow,
.panel__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Koyu taraf: nokta ızgarası (statik, maskeli) */
.panel--dark .panel__bg {
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(75% 80% at 35% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(75% 80% at 35% 50%, #000 20%, transparent 100%);
}

/* Açık taraf: dikişe paralel ince tarama (statik) */
.panel--light .panel__bg {
  background-image:
    repeating-linear-gradient(98deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #fafafa 0%, var(--paper) 100%);
}

/* Gezinen ışık: kendi katmanında, yalnızca transform animasyonu */
.panel__glow {
  inset: -25%;
  will-change: transform;
  transition: opacity 800ms ease;
  animation: gate-drift 24s ease-in-out infinite alternate;
}

.panel--dark .panel__glow {
  /* sitenin bordo koyu zeminini (rgb 80,0,0) andıran ışık */
  background: radial-gradient(42% 42% at 32% 42%, rgba(203, 0, 0, 0.5), transparent 70%);
  opacity: 0.75;
}

.panel--light .panel__glow {
  background: radial-gradient(40% 40% at 72% 30%, #ffffff, transparent 70%);
  opacity: 0.9;
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

/* Grain: statik doku */
.panel__grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
}

/* Hayalet numaralar */
.panel__num {
  position: absolute;
  bottom: -0.1em;
  font-weight: 700;
  font-size: clamp(10rem, 26vw, 24rem);
  line-height: 1;
  letter-spacing: -0.05em;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

.panel--dark .panel__num { left: 1.5vw; color: var(--white); }
.panel--light .panel__num { right: 1.5vw; color: var(--ink); }

/* İçerik ------------------------------------------------------------------- */
.panel__content {
  position: relative;
  z-index: 1;
  width: var(--col);
  transition: opacity 300ms ease, transform 560ms var(--ease-out);
}

.panel__content > * {
  margin: 0;
  animation: gate-rise 700ms var(--ease-out) both;
  animation-delay: calc(var(--base, 380ms) + var(--i, 0) * 70ms);
}

.panel--light .panel__content { --base: 460ms; }

.panel__content > :nth-child(1) { --i: 0; }
.panel__content > :nth-child(2) { --i: 1; }
.panel__content > :nth-child(3) { --i: 2; }
.panel__content > :nth-child(4) { --i: 3; }
.panel__content > :nth-child(5) { --i: 4; }

.panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

.panel--dark .panel__eyebrow { color: var(--red-soft); }

/* Çizgi genişlikle uzar; transform yazının üstüne taşırdı */
.panel__eyebrow::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 2px;
  background: currentColor;
  transition: width 460ms var(--ease-out);
}

/* Sitenin h1 ritmi: kalın ilk satır + ince ikinci satır */
.panel__title {
  margin-top: 1.1rem;
  font-size: clamp(2rem, 4.2vw + 0.3rem, 4.5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.panel__title-thin { font-weight: 300; }

.panel__desc {
  margin-top: 1.25rem;
  max-width: 28rem;
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
}

.panel--dark .panel__desc { color: rgba(255, 255, 255, 0.74); }

.panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.panel__tags li {
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.panel--dark .panel__tags li {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
}

.panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2rem;
  font-size: 1rem;
  font-weight: 500;
  transition: transform 160ms var(--ease-out);
}

.panel__cta-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  transition: transform 460ms var(--ease-out), background-color 200ms ease;
}

.panel__cta-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 460ms var(--ease-out);
}

/* Basılı tutma geri bildirimi: link DOM'da içerikten önce, kardeş seçici çalışır */
.panel__link:active ~ .panel__content .panel__cta { transform: scale(0.97); }

/* Alt bilgi şeridi ---------------------------------------------------------- */
.panel__foot {
  position: absolute;
  z-index: 4;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-2);
  animation: gate-rise 700ms var(--ease-out) 950ms both;
  transition: opacity 240ms ease;
}

.panel--dark .panel__foot { left: var(--gutter); color: rgba(255, 255, 255, 0.64); }
.panel--light .panel__foot { right: var(--gutter); }

.panel__foot a {
  display: inline-block;
  padding-block: 0.9rem;         /* görünüm aynı, dokunma alanı 44px'e çıkar */
  margin-block: -0.9rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}

.panel__foot a:hover,
.panel__foot a:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}

.panel--dark .panel__foot a:hover,
.panel--dark .panel__foot a:focus-visible { color: var(--white); }
.panel--light .panel__foot a:hover,
.panel--light .panel__foot a:focus-visible { color: var(--ink); }

/* --------------------------------------------------------------------------
   Hover: dikiş kayar, üzerine gelinen taraf genişler, diğeri geri çekilir
   -------------------------------------------------------------------------- */
[data-hover="left"]  { --cut-top: 64%; --cut-bottom: 54%; --shift: 6.5vw; }
[data-hover="right"] { --cut-top: 46%; --cut-bottom: 36%; --shift: -6.5vw; }

[data-hover="left"]  .panel--light .panel__content,
[data-hover="right"] .panel--dark  .panel__content { opacity: 0.5; }

[data-hover="left"]  .panel--light .panel__content { transform: translateX(14px); }
[data-hover="right"] .panel--dark  .panel__content { transform: translateX(-14px); }

[data-hover="left"]  .panel--dark  .panel__eyebrow::before,
[data-hover="right"] .panel--light .panel__eyebrow::before { width: 4rem; }

[data-hover="left"]  .panel--dark  .panel__cta-icon,
[data-hover="right"] .panel--light .panel__cta-icon { transform: scale(1.08); }

[data-hover="left"]  .panel--dark  .panel__cta-icon svg,
[data-hover="right"] .panel--light .panel__cta-icon svg { transform: translateX(3px); }

[data-hover="left"]  .panel--dark  .panel__glow,
[data-hover="right"] .panel--light .panel__glow { opacity: 1; }

/* --------------------------------------------------------------------------
   Seçim: seçilen taraf ekranı kaplar, diğeri söner, ardından yönlendirme
   -------------------------------------------------------------------------- */
[data-select] .panel--light,
[data-select] .panel__surface,
[data-select] .gate__brand {
  transition-duration: 460ms;
  transition-timing-function: var(--ease-in-out);
}

[data-select="left"]  { --cut-top: 100%; --cut-bottom: 100%; --shift: 0px; }
[data-select="right"] { --cut-top: 0%;   --cut-bottom: 0%;   --seam: 0px; --shift: 0px; }

[data-select="left"]  .panel--light .panel__content,
[data-select="right"] .panel--dark  .panel__content,
[data-select] .gate__brand,
[data-select] .gate__lang,
[data-select] .panel__foot { opacity: 0; }

[data-select="left"]  .panel--dark  .panel__content,
[data-select="right"] .panel--light .panel__content { transform: translateY(-8px); opacity: 0.85; }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes gate-in-left  { from { opacity: 0; transform: translateX(-4%); } }
@keyframes gate-in-right { from { opacity: 0; transform: translateX(4%); } }
@keyframes gate-rise     { from { opacity: 0; transform: translateY(18px); } }
@keyframes gate-pop      { from { opacity: 0; scale: 0.9; } }
@keyframes gate-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.06); }
}
@keyframes gate-fade     { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   Dar veya kısa ekranlar (telefon, dikey tablet, yatay telefon):
   paneller alt alta, dikiş yatay
   -------------------------------------------------------------------------- */
@media (max-width: 63.99rem), (max-height: 31.99rem) {
  /* Telefonda tamamı tek ekrana sığmalı: svh adres çubuğu açıkken görünen yüksekliktir */
  .gate {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
  }

  .gate__brand {
    position: static;
    transform: none;
    justify-content: flex-start;
    width: auto;
    height: 3.75rem;
    padding: 0 clamp(1.5rem, 6vw, 4rem);
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    animation: gate-fade 400ms ease both;
  }

  .gate__brand img { height: 1.4rem; }

  /* Dil anahtarı üst çubuğun sağına oturur */
  .gate__lang {
    top: 0.75rem;
    right: clamp(1.5rem, 6vw, 4rem);
    animation-delay: 200ms;
  }

  .panel {
    position: relative;
    inset: auto;
    flex: 1 0 auto;
    min-height: 0;
    padding: clamp(1.25rem, 3vh, 2rem) clamp(1.5rem, 6vw, 4rem) 3rem;
    overflow: hidden;              /* ışık katmanı ve numaralar yatay taşma yapmasın */
    clip-path: none;
    animation-name: gate-fade;
  }

  .panel--light {
    justify-content: flex-start;
    background: var(--paper);
    border-top: var(--seam) solid var(--red);
  }

  .panel__surface { clip-path: none; }

  .panel__content {
    width: 100%;
    max-width: 30rem;
  }

  /* Dikey bütçe dar: aralıklar ve başlık küçülür, açıklama en çok üç satır */
  .panel__title { margin-top: 0.6rem; font-size: clamp(1.75rem, 7vw, 2.4rem); }

  .panel__desc {
    display: -webkit-box;
    margin-top: 0.6rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .panel__tags { margin-top: 0.9rem; }
  .panel__tags li { padding: 0.3rem 0.65rem; font-size: 0.75rem; }
  .panel__cta { margin-top: 1rem; }

  .panel__num {
    left: auto;
    right: -0.05em;
    bottom: -0.16em;
    font-size: 42vw;
  }

  .panel--dark .panel__num { left: auto; }

  .panel__foot {
    left: clamp(1.5rem, 6vw, 4rem);
    right: clamp(1.5rem, 6vw, 4rem);
    bottom: 0.9rem;
  }

  /* Dokunmatikte odak hover'ı tetikler; alt alta düzende karşı panel kaymasın, sönmesin */
  [data-hover] .panel__content,
  [data-hover="left"]  .panel--light .panel__content,
  [data-hover="right"] .panel--dark  .panel__content { opacity: 1; transform: none; }

  [data-select="left"]  .panel--light,
  [data-select="right"] .panel--dark { opacity: 0.35; transition: opacity 260ms ease; }
}

/* Alt alta düzende kısa telefonlar: önce etiketler, çok kısa ekranda açıklama da kalkar */
@media (max-width: 63.99rem) and (max-height: 50rem) {
  .panel__tags { display: none; }
}

@media (max-width: 63.99rem) and (max-height: 38rem) {
  .panel__desc { display: none; }
  .panel__cta { margin-top: 0.85rem; }
}

/* Yan yana düzende kısa pencereler (laptop tarayıcıda küçük pencere) */
@media (min-width: 64rem) and (min-height: 32rem) and (max-height: 40rem) {
  .panel__title { font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
  .panel__num { display: none; }
  .panel__desc { margin-top: 0.9rem; }
  .panel__tags { margin-top: 1rem; }
  .panel__cta { margin-top: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Hareket azaltma: konum animasyonları kalkar, yalnızca opaklık kalır
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel__content > *,
  .panel__foot,
  .gate__brand,
  .gate__lang {
    animation: gate-fade 240ms ease both;
    animation-delay: 0ms;
  }

  .panel__glow { animation: none; }

  .panel--light,
  .panel__surface,
  .gate__brand,
  .panel__content,
  .panel__cta-icon,
  .panel__cta-icon svg,
  .panel__eyebrow::before { transition: opacity 200ms ease; }

  [data-hover] {
    --cut-top: 55%;
    --cut-bottom: 45%;
    --shift: 0px;
  }

  [data-hover] .panel__content { transform: none; }
}