/* ═══════════════════════════════════════════════════
   Sirion Design — main.css
   Tüm sayfalar için ortak stiller
═══════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'League Spartan', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

/* ── Animasyonlar ── */
@keyframes arrowDrop {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(6px); opacity: 0.65; }
}
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sayfa geçişleri: belgeler arası cross-fade (View Transitions API) ──
   Sayfalar arası gezinince (örn. beyaz ana sayfa → siyah İşler) yumuşak fade.
   Desteklemeyen tarayıcıda sessizce devre dışı kalır (normal anında geçiş). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ── Vimeo cover embed ── */
.sd-vimeo-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.sd-vimeo-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 16:9 cover: en az 177.78vh geniş veya en az 56.25vw yüksek */
  width: 177.78vh;
  min-width: 100%;
  height: 100%;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.sd-vimeo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Proje kartı video (Vimeo background) ── */
.sd-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Arka plan videosu (Mux HLS) ── */
.sd-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

/* ── Scroll reveal ── */
.sd-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.95s cubic-bezier(.22,.1,.25,1), transform 0.95s cubic-bezier(.22,.1,.25,1);
}
.sd-reveal.visible { opacity: 1; transform: none; }
.sd-reveal.d1 { transition-delay: 0.08s; }
.sd-reveal.d2 { transition-delay: 0.16s; }
.sd-reveal.d3 { transition-delay: 0.24s; }

/* ── Header logo kutusu ── */
.sd-logo-box {
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.38s ease, width 0.58s, height 0.58s;
}
.sd-logo-lbl { transition: color 0.38s ease; text-transform: uppercase; }

/* ── Navigasyon ── */
.sd-nav-link { transition: opacity 0.18s ease, color 0.38s ease; }
.sd-nav-link:hover { opacity: 0.42; }

/* ── Proje kartı ── */
.sd-proj-img-wrap { overflow: hidden; }
.sd-proj-img-inner {
  width: 100%; height: 100%;
  transition: transform 0.72s cubic-bezier(.25,.1,.25,1);
  will-change: transform;
}
.sd-proj-card:hover .sd-proj-img-inner { transform: scale(1.035); }

.sd-proj-card.sd-reveal {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition: opacity 0.9s cubic-bezier(.22,.1,.25,1), transform 0.9s cubic-bezier(.22,.1,.25,1);
}
.sd-proj-card.sd-reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

/* ── Blog kartı ── */
.sd-post-card { cursor: pointer; }
.sd-post-card:hover .sd-post-title { text-decoration: underline; text-underline-offset: 3px; }

.gl-post-card { cursor: pointer; }
.gl-post-img {
  width: 100%; height: 100%;
  transition: transform 0.72s cubic-bezier(.25,.1,.25,1);
  will-change: transform;
}
.gl-post-card:hover .gl-post-img { transform: scale(1.035); }
.gl-post-card:hover .gl-post-title { text-decoration: underline; text-underline-offset: 4px; }

/* ── Footer ── */
.sd-footer-link { transition: opacity 0.18s ease; }
.sd-footer-link:hover { opacity: 1 !important; }

/* ── CTA kutu hover ── */
.sd-isler-box { transition: border-color 0.22s ease, background 0.22s ease; }
.sd-isler-box:hover { border-color: #000 !important; background: #f8f8f8; }
.sd-isler-box-dark:hover { border-color: rgba(255,255,255,0.5) !important; background: rgba(255,255,255,0.05); }

/* ── Yaklaşım öğeleri ── */
.sd-approach-item { transition: opacity 0.3s ease; }
.sd-approach-item:hover { opacity: 0.45; }
.sd-scroll-item {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.72s cubic-bezier(.22,.1,.25,1), transform 0.72s cubic-bezier(.22,.1,.25,1);
}
.sd-scroll-item.visible { opacity: 1; transform: none; }

/* ── Before/After slider ── */
.sd-ba-container { position: relative; overflow: hidden; cursor: ew-resize; user-select: none; }
.sd-ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: #fff; transform: translateX(-50%); z-index: 10;
  transition: left 0s; /* Override default transition for smooth drag */
}
.sd-ba-handle-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sd-ba-before {
  position: absolute; top: 0; left: 0; bottom: 0; width: 50%;
  overflow: hidden; border-right: 2px solid #fff;
}
.sd-ba-before > div { position: absolute; inset: 0; }

/* ── Genişlet/daralt ── */
.pd-expand-text { overflow: hidden; transition: max-height 0.5s cubic-bezier(.4,0,.2,1); }
.pd-expand-text.collapsed { max-height: 180px; }
.pd-expand-text.expanded  { max-height: 1200px; }

/* ── Proje galerisi ── */
.pd-gal-wrap { overflow: hidden; }
.pd-gal-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(.25,.1,.25,1);
  background: #1a1a1a; display: block;
}
.pd-gal-wrap:hover .pd-gal-img { transform: scale(1.03); }

/* ── Stüdyo dark mode (Nasıl Yapıyoruz sekmesi) ── */
body.st-dark #st-sekmeler { background: #0b0b0b; }
body, main, #st-sekmeler { transition: background 0.38s ease; }

/* ── Form ── */
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.22); }
input, textarea { color-scheme: dark; }

/* ═══════════════════════════════════════
   MOBİL — max-width: 768px
═══════════════════════════════════════ */
.sd-hamburger    { display: none; }
.sd-mob-btns     { display: none !important; }
.sd-desk-actions { display: flex; align-items: center; gap: 4px; margin-left: 36px; }

/* Beyaz (light) header — aksiyon linki (EN) + arama ikonu beyaz üstünde okunsun */
#sd-header[data-theme="light"] .sd-desk-actions a      { color: rgba(0,0,0,0.82) !important; }
#sd-header[data-theme="light"] .sd-desk-actions button { opacity: 0.85 !important; }

/* Header'da nav linkleri + EN linki, arama/hamburger ikonlarıyla aynı dikey hizada
   otursun (League Spartan'ın asimetrik satır kutusundan doğan kaymayı giderir) */
.sd-main-nav a,
.sd-desk-actions a { display: flex; align-items: center; line-height: 1; }

/* Arama (büyüteç) ikonu: şekil viewBox merkezinin hafif altında çizili olduğu için
   metinlere göre düşük görünüyor; arama butonunu minik yukarı alıp optik ortalıyoruz.
   (CSS transform bazı motorlarda <svg> elemanına uygulanmadığından butona veriyoruz.) */
.sd-desk-actions button,
.sd-mob-btns button:not(.sd-hamburger) { transform: translateY(-1.5px); }
[data-mobile-panel] { display: none; }

@media (max-width: 768px) {
  [data-mobile-panel] { display: block; }
  .sd-main-nav     { display: none !important; }
  .sd-desk-actions { display: none !important; }
  .sd-mob-btns     { display: flex !important; align-items: center; }

  /* Hero videosu mobilde 9:16 — dikey, edge-to-edge (16:9 video cover, yanlar kırpılır) */
  .sd-vimeo-iframe {
    width: 316.05% !important;   /* (16/9)^2 — 9:16 kutuyu yatay 16:9 videoyla doldur */
    min-width: 316.05% !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  /* Sayfa üst başlığı — tüm sayfalarda aynı (h1, studyo manifesto, isler intro p) */
  h1, .st-manifesto, .sd-page-title { font-size: clamp(30px, 8vw, 46px) !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; }
  h2 { font-size: clamp(22px, 6vw, 32px) !important; }
  h3 { font-size: clamp(18px, 5vw, 28px) !important; }
  p, span, li { font-size: 16px !important; line-height: 1.6 !important; }
  /* Bölüm etiketleri (Yaklaşımımız, Günlük vb.) span{16px} ile ezilmesin */
  .sd-blk-label { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.1 !important; }
  .sd-proj-card .sd-proj-cust { font-size: 18px !important; line-height: 1.2 !important; }
  .sd-proj-card .sd-proj-desc { font-size: 19px !important; line-height: 1.2 !important; }

  /* Ana Sayfa */
  #sd-proj-grid  { grid-template-columns: 1fr !important; gap: 12px !important; padding-left: 20px !important; padding-right: 20px !important; }
  #sd-blog-grid  { grid-template-columns: 1fr !important; gap: 32px !important; }
  #sd-hero       { height: auto !important; min-height: 0 !important; aspect-ratio: 9/16 !important; position: relative !important; top: auto !important; margin-top: 0 !important; }
  #sd-manifesto  { padding-top: 60px !important; padding-bottom: 60px !important; }
  #sd-manifesto .sd-vimeo-wrap, #sd-manifesto .sd-vimeo-overlay { display: none !important; }
  #sd-manifesto h2, #sd-manifesto p { color: #fff !important; }
  #sd-islerimiz  { padding-top: 40px !important; padding-bottom: 40px !important; }
  .sd-proj-desc  { font-size: 16px !important; }
  .sd-approach-item { padding-top: 32px !important; padding-bottom: 32px !important; }
  .sd-approach-item > div { grid-template-columns: 28px 1fr !important; gap: 12px !important; }
  .sd-approach-item .sd-approach-desc { display: none !important; }
  .sd-approach-item h3 { font-size: clamp(28px, 8vw, 44px) !important; }

  /* İşler */
  #isl-proj-grid { grid-template-columns: 1fr !important; gap: 2px !important; }

  /* Stüdyo */
  #st-sekmeler   { padding-left: 20px !important; padding-right: 20px !important; }
  /* Tab pill: yatay scroll yerine 2×2 grid — tüm sekmeler tek ekranda, scrollbar yok */
  #st-pill-wrap  { overflow: visible !important; border-radius: 22px !important; }
  #st-pill-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; }
  #st-pill-inner > button { min-width: 0 !important; flex: none !important; padding: 13px 8px !important; font-size: 16px !important; line-height: 1.2 !important; white-space: normal !important; }
  #st-kimiz-grid { grid-template-columns: 1fr !important; }
  #st-ne-grid    { grid-template-columns: 1fr !important; }
  #st-nasil-grid { grid-template-columns: 1fr !important; min-height: auto !important; }
  #st-logo-grid  { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #st-logo-grid > .st-logo-tile { padding: 16px 22px !important; }

  /* Günlük */
  #gl-featured   { grid-template-columns: 1fr !important; margin-left: 20px !important; margin-right: 20px !important; }
  #gl-grid-1, #gl-grid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* İletişim */
  #il-contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  #il-hero-img-wrap { margin-top: 40px !important; margin-bottom: 40px !important; }

  /* Proje Detay */
  #pd-info-grid  { grid-template-columns: 1fr !important; gap: 40px !important; }
  #pd-gal-double { grid-template-columns: 1fr !important; }

  /* Genel padding */
  section, main { padding-left: 20px !important; padding-right: 20px !important; }

  /* Mobil dikey boşluk normalize — büyük inline section padding'leri küçült (üst/alt) */
  [style*="padding:180px max("] { padding-top: 92px !important; padding-bottom: 56px !important; }
  [style*="padding:170px max("] { padding-top: 104px !important; padding-bottom: 28px !important; }
  [style*="padding:120px max("] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding:80px max("]  { padding-top: 48px !important; padding-bottom: 52px !important; }
}