@charset "utf-8";
/* ============================================================
   UBG İstif Makinaları — "Yakında" sayfası
   Forklift sahnesi + karşılama metni. Tamamen CSS ile çalışır;
   JavaScript kapalıyken de animasyon oynar.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-var.woff2') format('woff2-variations'),
       url('../fonts/montserrat-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --amber:      #EBAA1A;
  --amber-acik: #F7C954;
  --zemin:      #0C0D0F;
  --zemin-2:    #131519;
  --metin:      #E9EBED;
  --sonuk:      #8B929A;

  --logo-cerceve: #7E848B;
  --logo-slogan:  #C3C8CE;

  --govde: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --yay:   cubic-bezier(.22, .9, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--govde);
  color: var(--metin);
  background: var(--zemin);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

svg { display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }

/* ---------- Ortam: ışık, çerçeve, doku ---------------------------- */
.isik {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 40% at 50% 30%, rgba(235,170,26,.17), transparent 72%),
    radial-gradient(80% 60% at 50% 108%, rgba(235,170,26,.06), transparent 62%),
    linear-gradient(180deg, var(--zemin-2) 0%, var(--zemin) 55%);
  animation: nefes 8s ease-in-out infinite;
}

/* köşe karartması — merkezi öne çıkarır */
.vinyet {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 clamp(120px, 22vw, 260px) clamp(30px, 7vw, 90px) rgba(0,0,0,.72);
}

/* ince film grenli doku — baskı hissi verir */
.doku {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Yerleşim --------------------------------------------- */
.kabuk {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(10px, 2.2vw, 26px);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 40px) clamp(16px, 3vw, 28px);
  text-align: center;
}

/* ---------- Forklift sahnesi --------------------------------------
   Sahne SVG'sinin en-boy oranı 730/560 = 1.3036. Genişlik ekran
   yüksekliğinden türetilir: alçak ekranlarda iletişim düğmeleri katlanmaz,
   dar ekranlarda ise `min(100%, …)` devreye girip taşmayı engeller.
------------------------------------------------------------------- */
:root { --sahne-oran: 1.3036; }

.sahne {
  width: min(100%, calc(clamp(180px, 54svh, 540px) * var(--sahne-oran)));
  filter: drop-shadow(0 34px 60px rgba(0,0,0,.55));
}
.sahne svg { width: 100%; height: auto; }

.sahne__zemin { fill: none; stroke: url(#zeminCizgi); stroke-width: 3; stroke-linecap: round; }

/* Forklift bilinçli olarak logodan bir ton sönük: hiyerarşi logoda kalsın.
   --fk-2 gölgeli/geri planda kalan parçalar için ikinci ton. */
.sahne__forklift { color: #C7CDD4; --fk-2: #8C949E; transform: translateX(-880px); }
.sahne__yuk      { color: #FFFFFF; }

/* kaldırılan logonun arkasındaki sıcak ışık — belirir, sonra hafifçe soluklanır */
.sahne__parilti {
  opacity: 0;
  animation: parla 1.1s ease-out 1.9s both,
             parilti 7s ease-in-out 3s infinite;
}
@keyframes parla   { to { opacity: 1; } }
@keyframes parilti { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.sahne__forklift { animation: surus 1.05s cubic-bezier(.34, .05, .18, 1) .3s both; }
.sahne__tasiyici,
.sahne__yuk      { animation: kaldir .9s cubic-bezier(.5, 0, .16, 1) 1.5s both; }
/* iç direk teleskopik olduğu için taşıyıcının yarısı kadar yükselir */
.sahne__icdirek  { animation: kaldirDirek .9s cubic-bezier(.5, 0, .16, 1) 1.5s both; }

/* Ölçüler sahne SVG'sinin viewBox birimindedir; ekran boyutundan bağımsız. */
@keyframes surus       { from { transform: translateX(-880px); } to { transform: translateX(0); } }
@keyframes kaldir      { from { transform: translateY(0); }      to { transform: translateY(-200px); } }
@keyframes kaldirDirek { from { transform: translateY(0); }      to { transform: translateY(-110px); } }
@keyframes nefes       { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

/* ---------- Metin bloğu ------------------------------------------- */
.yazi { max-width: 720px; display: grid; gap: clamp(14px, 2.2vw, 22px); justify-items: center; }

/* amber saç teli ayraç + altıgen — logodaki formu yankılar */
.ayrac { display: flex; align-items: center; gap: 14px; }
.ayrac span {
  display: block; height: 1px; width: clamp(44px, 11vw, 118px);
  background: linear-gradient(90deg, transparent, rgba(235,170,26,.6));
}
.ayrac span + span { background: linear-gradient(90deg, rgba(235,170,26,.6), transparent); }
.ayrac i {
  width: 10px; height: 11px; background: var(--amber);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.baslik {
  font-size: clamp(25px, 4.6vw, 45px);
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.14;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 2px 40px rgba(235,170,26,.16);
}
.baslik em { font-style: normal; color: var(--amber); }

/* ---------- İletişim ---------------------------------------------- */
.temas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(10px, 1.8vw, 18px); }

.dugme {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px clamp(24px, 3.4vw, 34px);
  border-radius: 999px;
  font-weight: 800; letter-spacing: .015em; white-space: nowrap;
  transition: background .3s var(--yay), color .3s var(--yay),
              border-color .3s var(--yay), transform .3s var(--yay), box-shadow .3s var(--yay);
}
.dugme svg { width: 20px; height: 20px; flex: none; }
.dugme:hover { transform: translateY(-2px); }

.dugme--tel {
  font-size: clamp(17px, 2.4vw, 23px);
  color: var(--amber-acik);
  border: 1px solid rgba(235,170,26,.42);
  background: linear-gradient(180deg, rgba(235,170,26,.15), rgba(235,170,26,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 44px -18px rgba(235,170,26,.6);
}
.dugme--tel:hover {
  background: var(--amber); color: #16181B; border-color: var(--amber);
  box-shadow: 0 18px 44px -14px rgba(235,170,26,.75);
}

.dugme--wa {
  font-size: clamp(14.5px, 1.8vw, 16.5px);
  color: var(--sonuk);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.dugme--wa:hover { color: #FFFFFF; border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.07); }

/* ---------- Alt bilgi --------------------------------------------- */
.altbilgi {
  position: relative; z-index: 2;
  padding: clamp(16px, 2.6vw, 26px) 20px clamp(22px, 3vw, 30px);
  display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center;
  text-align: center;
  font-size: 13px; letter-spacing: .05em;
  color: #5E656D;
}
.altbilgi span { white-space: nowrap; }
.altbilgi b { color: #7C848C; font-weight: 600; }

/* ---------- Kademeli beliriş -------------------------------------- */
.gel { opacity: 0; transform: translateY(16px); animation: gel .75s var(--yay) both; }
.gel--1 { animation-delay: 2.55s; }
.gel--2 { animation-delay: 2.68s; }
.gel--3 { animation-delay: 2.84s; }
.gel--4 { animation-delay: 3.00s; }
.gel--5 { animation-delay: 3.18s; }

@keyframes gel { to { opacity: 1; transform: none; } }

/* ---------- Küçük ekranlar ---------------------------------------- */
@media (max-width: 560px) {
  /* Sahne kenardan kenara: iç boşluk kabuktan alınıp yalnızca metne verilir.
     (vw birimi kullanılmıyor — kaydırma çubuğu çıksa bile taşma olmaz.) */
  .kabuk { padding-inline: 0; }
  .yazi  { padding-inline: 16px; width: 100%; }
  .sahne { width: 100%; }
  .temas { width: 100%; flex-direction: column; align-items: stretch; }
  .dugme { justify-content: center; }
}

/* alçak ekranlarda (dizüstü, yatay telefon) sahne kısalır ki alt bilgi taşmasın */
@media (max-height: 780px) {
  .sahne { width: min(100%, calc(clamp(150px, 46svh, 420px) * var(--sahne-oran))); }
  .kabuk { gap: clamp(6px, 1.4vw, 14px); padding-block: clamp(16px, 2.6vw, 30px) clamp(8px, 1.6vw, 16px); }
  .altbilgi { padding-block: clamp(8px, 1.6vw, 14px) clamp(14px, 2vw, 20px); }
}

/* çok kısa ekranlar (iPhone SE gibi) — her şey tek ekranda kalsın */
@media (max-height: 620px) {
  .sahne { width: min(100%, calc(clamp(120px, 38svh, 300px) * var(--sahne-oran))); }
  .yazi { gap: 10px; }
  .dugme { padding-block: 12px; }
  .temas { margin-top: 0; gap: 10px; }
}

/* ---------- Hareket azaltma tercihi -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .isik { animation: none; }
  .sahne__forklift { animation: none; transform: none; }
  /* animasyon oynamadığı için kaldırılmış son durum doğrudan uygulanır */
  .sahne__tasiyici, .sahne__yuk { animation: none; transform: translateY(-200px); }
  .sahne__icdirek { animation: none; transform: translateY(-110px); }
  .gel { animation: none; opacity: 1; transform: none; }
  .dugme:hover { transform: none; }
}

/* ---------- Yazdırma ---------------------------------------------- */
@media print {
  .isik, .vinyet, .doku { display: none; }
  body { background: #fff; color: #000; }
  .baslik { color: #000; }
}