/* Ana sayfa — tam ekran bölüm geçişi (CSS scroll-snap).
   Detay sayfaları style.css kullanmaya devam eder. */

:root{
  --bg:#05070c;
  --surface:rgba(255,255,255,0.04);
  --line:rgba(255,255,255,0.10);
  --text:#eef1f7;
  --text-dim:#9aa4b8;
  --accent:#3ec6ff;
  --radius:18px;
  --gutter:clamp(16px, 5vw, 72px);
  --top:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;               /* kaydırma .snap içinde */
}
h1,h2{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.02em; line-height:1.05; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
ul,ol{ list-style:none; }

/* ── Arka plan ışığı ───────────────────────── */
/* İki katman: renk yalnız sönük katmanda değişir, geçiş opaklıkla yapılır (ekran kartında, yeniden çizim yok) */
.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 85% 15%, color-mix(in srgb, var(--g, #3ec6ff) 22%, transparent), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, color-mix(in srgb, var(--g, #3ec6ff) 12%, transparent), transparent 70%);
  opacity:0; transition:opacity .9s ease;
  will-change:opacity;
}
.glow.on{ opacity:1; }

/* ── Kaydırma kabı ─────────────────────────── */
.snap{
  position:relative; z-index:1;
  height:100vh; height:100dvh;   /* dvh desteklemeyen tarayıcı için önce vh */
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.snap::-webkit-scrollbar{ display:none; }
.snap.gliding{ scroll-snap-type:none; scroll-behavior:auto; }   /* JS geçişi sürerken (home.js goTo) */

.panel{
  position:relative;
  min-height:100vh; min-height:100dvh;
  height:100vh; height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;       /* hızlı kaydırmada bölüm atlamasın */
  display:flex; align-items:center;
  padding:calc(var(--top) + 24px) var(--gutter) 40px;
  overflow:hidden;
}

/* ── Üst bar ───────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  height:var(--top);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(to bottom, rgba(5,7,12,.85), rgba(5,7,12,0));
}
.logo{ font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:.04em; }
.logo span{ color:var(--accent); }
.top-right{ display:flex; align-items:center; gap:28px; }
.topnav{ display:flex; gap:32px; }
.topnav a{ font-size:.88rem; font-weight:500; color:var(--text-dim); transition:color .2s; }
.topnav a:hover{ color:var(--text); }

.burger{
  display:none; position:relative;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
.burger span{
  position:absolute; left:11px; right:11px; height:2px; border-radius:2px;
  background:var(--text); transition:transform .3s var(--ease), top .3s var(--ease);
}
.burger span:first-child{ top:17px; }
.burger span:last-child{ top:25px; }
.burger[aria-expanded="true"] span:first-child{ top:21px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ top:21px; transform:rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:15;
  background:rgba(5,7,12,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  overflow-y:auto;
  padding:calc(var(--top) + 16px) var(--gutter) 40px;
}
.menu[hidden]{ display:none; }
.menu-inner{ display:flex; flex-direction:column; max-width:520px; }
.menu-inner a, .menu-soon{
  font-family:'Space Grotesk', sans-serif; font-size:1.3rem; font-weight:600;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.menu-inner a:active{ color:var(--accent); }
.menu-soon{ color:var(--text-dim); }
.menu-label{
  margin:28px 0 4px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.menu-label:first-child{ margin-top:0; }
em{ font-style:normal; font-size:.7em; color:var(--text-dim); margin-left:6px; }

/* ── Dil menüsü ────────────────────────────── */
.lang{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:6px;
  height:36px; padding:0 10px 0 12px; border-radius:99px;
  font:600 .8rem 'Inter', sans-serif; letter-spacing:.04em; color:var(--text);
  background:var(--surface); border:1px solid var(--line); cursor:pointer;
  transition:border-color .2s, background .2s;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"]{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
.lang-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lang-btn svg:first-child{ color:var(--accent); }
.lang-btn .caret{ width:14px; height:14px; opacity:.7; transition:transform .25s var(--ease); }
.lang-btn[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.lang-list{
  position:absolute; right:0; top:calc(100% + 8px); min-width:150px;
  padding:6px; border-radius:14px;
  background:rgba(12,15,24,.96); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
}
.lang-list[hidden]{ display:none; }
.lang-list button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border:0; border-radius:10px; background:none; cursor:pointer;
  font:500 .9rem 'Inter', sans-serif; color:var(--text-dim); text-align:left;
}
.lang-list button b{ font:700 .75rem 'Space Grotesk', sans-serif; letter-spacing:.06em; color:var(--text); width:22px; }
.lang-list button:hover{ background:var(--surface); color:var(--text); }
.lang-list button[aria-current="true"]{ color:var(--text); }
.lang-list button[aria-current="true"] b{ color:var(--accent); }

/* ── İlerleme noktaları ────────────────────── */
.dots{
  position:fixed; right:clamp(10px, 2vw, 28px); top:50%; z-index:10;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px;
}
.dots button{
  position:relative; width:10px; height:10px; padding:0;
  border:0; border-radius:99px; cursor:pointer;
  background:rgba(255,255,255,.28);
  transition:height .35s var(--ease), background .35s;
}
.dots button::before{ content:''; position:absolute; inset:-8px; } /* büyük dokunma alanı */
.dots button[aria-current="true"]{ height:28px; background:var(--accent); }
.dots button span{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-size:.75rem; color:var(--text-dim);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.dots button:hover span, .dots button:focus-visible span{ opacity:1; }

/* ── Butonlar ──────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; border-radius:99px;
  font:600 .95rem 'Inter', sans-serif; color:var(--text);
  border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  cursor:pointer; transition:background .25s, transform .25s var(--ease);
}
.btn:hover{ background:color-mix(in srgb, var(--accent) 22%, transparent); }
.btn:active{ transform:scale(.97); }
.btn i{ font-style:normal; transition:transform .25s var(--ease); }
.btn:hover i{ transform:translateX(4px); }
.btn-solid{ background:var(--accent); border-color:var(--accent); color:#05070c; }
.btn-solid:hover{ background:color-mix(in srgb, var(--accent) 85%, white); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ── Giriş ─────────────────────────────────── */
.hero{ justify-content:center; text-align:center; }
.sky{ position:absolute; inset:0; width:100%; height:100%; }
.hero-body{ position:relative; }
.hero-name{
  font-size:clamp(3rem, 12vw, 8.5rem); font-weight:700; text-transform:uppercase;
}
.hero-line{
  margin-top:18px;
  font-family:'Space Grotesk', sans-serif; font-weight:600;
  font-size:clamp(1.2rem, 3.4vw, 2rem); color:var(--accent);
}
.hero-sub{ margin-top:10px; color:var(--text-dim); font-size:clamp(.95rem, 2.2vw, 1.1rem); }

.scroll-hint{
  position:absolute; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
}
.scroll-hint i{
  width:1px; height:36px;
  background:linear-gradient(var(--accent), transparent);
  animation:drip 1.8s var(--ease) infinite;
}
@keyframes drip{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ── Hizmet bölümleri ──────────────────────── */
/* PC: görsel ekranın bir yanını kenarına kadar kaplar, metne doğru karanlığa karışır; bölümler sağ-sol dönüşümlü */
.svc{ align-items:center; }
.svc-media{
  position:absolute; top:0; bottom:0; right:0; width:62%;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
}
.svc:nth-of-type(even) .svc-media{
  right:auto; left:0;
  -webkit-mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
          mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
}
.svc:nth-of-type(even) .svc-body{ margin-left:auto; }
.svc-media img{ width:100%; height:100%; object-fit:cover; }
.svc-body{ position:relative; max-width:500px; }

.svc-num{ font:600 .8rem 'Space Grotesk', sans-serif; letter-spacing:.14em; color:var(--accent); }
.svc h2{ margin-top:14px; font-size:clamp(2rem, 4.2vw, 3.4rem); }
.svc-lead{ margin-top:16px; font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--text-dim); line-height:1.5; }

.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.tags li{
  padding:6px 12px; border-radius:99px; font-size:.8rem;
  background:var(--surface); border:1px solid var(--line);
}

.flow{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; margin-top:22px; counter-reset:f; }
.flow li{ font:600 .9rem 'Space Grotesk', sans-serif; }
.flow li + li::before{ content:'→'; margin:0 10px; color:var(--accent); }

.proof{
  display:flex; flex-direction:column; gap:2px;
  margin-top:22px; padding-left:14px; border-left:2px solid var(--accent);
  font-size:.85rem; color:var(--text-dim);
}
.proof:empty{ display:none; }
.proof strong{ font:700 1.6rem 'Space Grotesk', sans-serif; color:var(--text); }

.subs{ margin-top:22px; display:grid; gap:10px; }
.subs li{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.subs strong{ font-family:'Space Grotesk', sans-serif; font-weight:600; }
.subs span{ font-size:.85rem; color:var(--text-dim); }

.svc .btn{ margin-top:30px; }

/* ── Sürekli destek ────────────────────────── */
.retainer{ justify-content:center; }
.retainer-body{ width:100%; max-width:980px; text-align:center; }
.eyebrow{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.retainer h2{ margin-top:12px; font-size:clamp(2rem, 5vw, 3.8rem); }
.pillars{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:40px; text-align:left; }
.pillars li{
  padding:22px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.pillars strong{ font:600 1.15rem 'Space Grotesk', sans-serif; color:var(--accent); }
.pillars span{ font-size:.9rem; color:var(--text-dim); line-height:1.45; }
.all-label{ margin-top:36px; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.all{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px; }
.all a, .all span{
  display:inline-block; padding:8px 14px; border-radius:99px; font-size:.85rem;
  border:1px solid var(--line); transition:border-color .2s, color .2s;
}
.all a:hover{ border-color:var(--accent); color:var(--accent); }
.all span{ color:var(--text-dim); }
.retainer .btn{ margin-top:32px; }

/* ── İletişim ──────────────────────────────── */
.contact{
  height:auto;                   /* klavye açılınca içerik sığmazsa kesilmesin */
  flex-direction:column; justify-content:center;
}
.contact-body{ width:100%; max-width:520px; text-align:center; }
.contact h2{ font-size:clamp(2rem, 5vw, 3.6rem); }
.contact-sub{ margin-top:10px; color:var(--text-dim); }
.contact-quick{ display:flex; gap:10px; justify-content:center; margin-top:28px; }
.contact-quick .btn{ flex:1; max-width:200px; }
.form{ display:grid; gap:12px; margin-top:28px; text-align:left; }
.form label{ display:grid; gap:6px; font-size:.8rem; color:var(--text-dim); }
.form input, .form textarea{
  width:100%; padding:13px 14px; border-radius:12px;
  font:16px 'Inter', sans-serif;  /* 16px: iOS odakta yakınlaştırmasın */
  color:var(--text); background:var(--surface); border:1px solid var(--line);
  resize:vertical;
}
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--accent); }
.form .btn{ margin-top:4px; }
.foot{
  margin-top:40px; font-size:.78rem; color:var(--text-dim);
  padding-bottom:env(safe-area-inset-bottom);
}
.foot a{ text-decoration:underline; text-underline-offset:3px; }

/* ── Bölüm giriş animasyonu (yalnız JS varken) ── */
.js .panel .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.js .panel.is-active .reveal{ opacity:1; transform:none; }

/* ── Tablet / mobil ────────────────────────── */
@media (max-width:900px){
  :root{ --top:56px; }
  .topnav{ display:none; }
  .burger{ display:block; }
  .top-right{ gap:8px; }

  /* Reels düzeni: görsel tam ekran, metin altta */
  .svc{ display:flex; align-items:flex-end; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
  .svc-media, .svc:nth-of-type(even) .svc-media{
    position:absolute; inset:0; width:auto; height:auto;
    -webkit-mask-image:none; mask-image:none;
  }
  .svc:nth-of-type(even) .svc-body{ margin-left:0; }
  #imalat .svc-media img{ object-position:88% 50%; }   /* kare görselin sağındaki freze ucu görünsün */
  /* Otomasyon: kırpılınca dolap anlaşılmıyor; bütün hâlde üstte göster, kenarları zemine karışsın */
  #otomasyon .svc-media img{
    object-fit:contain; object-position:50% 22%;
    /* görsel kutunun ~%12–58'ini kaplıyor; üst ve alt kenarı o aralıkta erit */
    -webkit-mask-image:linear-gradient(to bottom, transparent 11%, #000 21%, #000 46%, transparent 58%);
            mask-image:linear-gradient(to bottom, transparent 11%, #000 21%, #000 46%, transparent 58%);
  }
  .svc-media::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, var(--bg) 8%, rgba(5,7,12,.82) 42%, rgba(5,7,12,.15) 75%, rgba(5,7,12,.5));
  }
  .svc-body{ position:relative; padding-right:28px; }  /* noktalara yer */
  .svc h2{ margin-top:10px; }
  .svc-lead{ margin-top:10px; color:#c9d0dd; }
  .tags, .flow, .subs, .proof{ margin-top:16px; }
  .svc .btn{ margin-top:22px; }

  .pillars{ grid-template-columns:1fr; gap:10px; margin-top:24px; }
  .pillars li{ padding:14px 16px; }
  .all-label{ margin-top:22px; }
  .retainer .btn{ margin-top:22px; }

  .dots{ gap:10px; transition:opacity .3s; }
  .at-end .dots{ opacity:0; pointer-events:none; }  /* form alanlarının üstüne binmesin */
  .dots button{ width:6px; height:6px; }
  .dots button[aria-current="true"]{ height:20px; }
}

/* Küçük telefonlar: sürekli destek ekranı tek ekrana sığsın */
@media (max-width:900px) and (max-height:760px){
  .pillars span{ display:none; }
  .retainer h2{ font-size:1.9rem; }
}

/* Kısa ekranlar (yatay telefon, küçük dizüstü) */
@media (max-height:640px){
  .pillars span{ display:none; }
  .proof{ display:none; }
  .svc-lead{ font-size:1rem; }
}

/* Hareketi azalt */
@media (prefers-reduced-motion:reduce){
  .snap{ scroll-behavior:auto; }
  .js .panel .reveal{ transition:opacity .3s; transform:none; }
  .glow{ transition:none; }
  .scroll-hint i{ animation:none; }
}