/* Design tokens: global renkler, gölgeler, cam/çerçeve, link rengi.
   Layout/akış değişkenleri (örn. --footer-h, --vh, --top-safe) base'e gelmez. */

:root {
  --site-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --site-font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --site-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --site-line-body: 1.5;
  --site-line-heading: 1.08;
  --site-track-body: -0.01em;
  --site-track-heading: -0.025em;

  /* Header ? */
  --hdr-h: clamp(56px, 8vh, 72px);
  --hdr-offset: 32px; /* header’ı aşağı itme miktarı */
  --hdr-logo-h: 44px; /* header logo yüksekliği */

  /* [YENİ] Header tasarım tokenları (Customizer ile oynanacak) */
  --hdr-icon-size: 30px; /* sosyal ikon boyutu varsayılan */
  --hdr-toggle-size: 44px; /* toggle genişlik/yükseklik varsayılan */
  --hdr-toggle-bg: rgba(20, 20, 22, 0.35);
  --hdr-toggle-border: rgba(255, 255, 255, 0.25);
  --hdr-font: system-ui, -apple-system, 'Segoe UI', sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --page-bg: #0b0c0f; /* ilk açılışta beyaz flaşı önler */
  --page-fg: #f2f3f5;

  /* Header varsayılanları (hero daha sonra override edebilir) */
  --header-bg: rgba(12, 12, 14, 0.4);
  --header-fg: #ffffff;

  /* Güvenli fallback; gerçek değerler PHP ile wp_head’de yazılıyor */
  --c-bg: #ffffff;
  --c-surface: #14161a;
  --c-text: #eaeaea;
  --c-muted: #8b8b8b;
  --c-primary: #5be7a9;
  --c-accent: #7ca6ff;
  --c-bg-white: #fff;

  --c-bg-rgb: 11, 12, 15;
  --c-surface-rgb: 20, 22, 26;
  --c-text-rgb: 234, 234, 234;
  --c-muted-rgb: 139, 139, 139;
  --c-primary-rgb: 91, 231, 169;
  --c-accent-rgb: 124, 166, 255;

  --c-glass: rgba(var(--c-surface-rgb), 0.55);
  --c-border: rgba(var(--c-text-rgb), 0.1);
  --c-shadow: rgba(var(--c-bg-rgb), 0.6);

  --section-bg: var(--c-bg, #0b0c0f);

  /* Projects’e özel viewport rengi: base’te NÖTR bırak */
  --prj-viewport-bg: transparent;

  --prj-text: #fff;
  --prj-text-dark: #0b0b0d;
  --prj-muted: rgba(255, 255, 255, 0.75);

  --prj-card-bg-light: rgba(0, 0, 0, 0.04);
  --prj-card-b-light: rgba(0, 0, 0, 0.08);

  --prj-dot-b: rgba(255, 255, 255, 0.6);
  --prj-dot-active: rgba(255, 255, 255, 0.9);

  /* Films */
  --films-card-radius: 18px;
  --films-glass-bg: rgba(0, 0, 0, 0.55);
  --films-glass-b: rgba(255, 255, 255, 0.22);
  --films-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);

  /* Panorama */
  --pano-info-bg: color-mix(in oklab, var(--c-bg, #0b0c0f) 88%, transparent);
  --pano-info-fg: var(--c-text, #eaeaea);
  --pano-gap: clamp(16px, 3.4vw, 28px);
  --pano-info-pad: clamp(24px, 4vw, 42px);

  /* About — design tokens (opsiyonel, global) */
  --ab-panel: rgba(255, 255, 255, 0.04);
  --ab-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --ab-border: var(--c-border); /* zaten base’te var olan sınır rengi */
  --ab-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ab-dur: 900ms;
  --ab-accent: 167, 139, 250; /* gradient için RGB üçlüsü */

  /* Contact — design tokens (opsiyonel, global) */
  --ct-text: #fafafa;
  --ct-muted: rgba(255, 255, 255, 0.65);
  --ct-card: rgba(255, 255, 255, 0.06);
  --ct-card-b: rgba(255, 255, 255, 0.12);
  --ct-ring: rgba(255, 255, 255, 0.45);
  /* Arkaplan gradyanı için iki uç renk (Customizer köprüsü varsa override edilir) */
  --ct-bg1: #0a0a0a;
  --ct-bg2: #18181b;

  /* Header için güvenli üst boşluk (varsayılan: sadece safe-area top) */
  --header-safe: var(--sa-top, 0px);

  --vh: 1vh;

  /* Footer yüksekliği ve safe alanı */
  --footer-h: 0px;
  --footer-safe: calc(var(--footer-h) + var(--safe-b));

  /* Uygulama yüksekliği: tüm section’lar bununla çalışacak */
  --app-h: calc(var(--vh) * 100);
  --app-hf: calc(var(--app-h) - var(--footer-safe));

  /* iOS safe-area ve WP admin bar yüksekliği */
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --adminbar-h: 0px;

  /* Katmanlama */
  --z-header: 9999;

  /* Renk şeması ipucu (tarayıcıya) */
  color-scheme: dark light;

  --ft-logo-h: 48px; /* Footer logosu yüksekliği */

  /* Global "sonraki" (fp-next) butonu konum token'ları */
  --fp-next-right-web: 16px; /* Desktop: sağdan uzaklık */
  --fp-next-bottom-web: 16px; /* Desktop: alttan uzaklık (footer hariç) */

  --fp-next-right-mobile: 26px; /* Mobil: sağdan uzaklık */
  --fp-next-bottom-mobile: 28px; /* Mobil: alttan uzaklık */

  /* TEAM tasarım tokenları */
  --team-bg: #f8f5ef;
  --team-fg: #1d1a16;

  /* Film şeridi bandı (arkadaki mavi şerit) */
  --team-band-bg: #3b82f6;

  /* Kart */
  --team-card-bg: #efe7dc;
  --team-card-radius: 0px;
  --team-card-padding: 24px;
  --team-card-shadow: 0 18px 45px rgba(15, 23, 42, 0.32);

  /* Tipografi (Customizer hâlâ bunları override edebilecek)  */
  --team-font-family:
    ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial;

  --team-name-fs: 20px;
  --team-name-fw: 500;
  --team-name-style: normal;

  --team-job-fs: 13px;
  --team-job-fw: 500;
  --team-job-style: normal;

  --team-quote-fs: 12px;
  --team-quote-style: normal;

  /* Sayfa başına kart sayısı (team.js buradan okuyor) */
  --team-per-desktop: 4;
  --team-per-tablet-lg: 3;
  --team-per-tablet: 2;
  --team-per-mobile: 1;

  /* Opsiyonel kart yükseklik kontrolü (Customizer’dan gelebilir) */
  --team-card-h: 340px;
  --team-card-min-h: 320px;
  --team-card-v-align: center;

  /* İçerik bloğu offset */
  --team-body-offset-top: 0px;
  --team-body-offset-bottom: 0px;

  /* Band pozisyonu */
  --team-band-top: 50%;
  --team-band-h: 240px;
}

html,
body {
  background: var(--page-bg);
  color: var(--page-fg);
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

body {
  font-family: var(--site-font-sans);
  line-height: var(--site-line-body);
  letter-spacing: var(--site-track-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--site-line-heading);
  letter-spacing: var(--site-track-heading);
  text-wrap: balance;
}

p,
li,
blockquote,
figcaption {
  text-wrap: pretty;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
}

a {
  color: var(--c-primary);
}
a:hover {
  color: var(--c-accent);
}

/* === Genel yardımcı === */
.no-scroll {
  overflow: hidden;
  touch-action: none;
}

/* Footer güvenliği — içerik ve fixed alt elemanlar için yardımcılar */
.avoid-footer,
[data-avoid-footer] {
  padding-bottom: var(--footer-safe);
}

.stick-above-footer,
[data-stick-above-footer] {
  bottom: var(--footer-safe) !important;
}

.fp-next {
  position: fixed !important;
  right: calc(var(--fp-next-right-web, 16px) + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(var(--fp-next-bottom-web, 16px) + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147482000 !important;

  display: grid !important;
  place-items: center;

  width: var(--fp-next-size-web, 56px);
  height: var(--fp-next-size-web, 56px);
  border-radius: 999px;

  background: var(--fp-next-bg-web, rgba(20, 20, 22, 0.65));
  border: 1px solid var(--fp-next-border-web, rgba(255, 255, 255, 0.18));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--fp-next-icon-web, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(0);
  transition: transform 0.2s;
}

.fp-next:active {
  transform: translateY(2px) scale(0.98);
}

.fp-next > * {
  pointer-events: none;
}

.fp-next__icon {
  font-size: clamp(18px, calc(var(--fp-next-size-web, 56px) * 0.4), 34px);
}

.fp-more {
  position: fixed !important;
  right: calc(var(--fp-more-right-web, 16px) + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(var(--fp-more-bottom-web, 16px) + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147482000 !important;

  display: grid !important;
  place-items: center;

  width: var(--fp-more-size-web, 56px);
  height: var(--fp-more-size-web, 56px);
  border-radius: 999px;

  background: var(--fp-more-bg-web, rgba(20, 20, 22, 0.65));
  border: 1px solid var(--fp-more-border-web, rgba(255, 255, 255, 0.18));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--fp-more-icon-web, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(0);
  transition: transform 0.2s;
}

.fp-more:active {
  transform: translateY(2px) scale(0.98);
}

.fp-more > * {
  pointer-events: none;
}

.fp-more__icon {
  width: clamp(18px, calc(var(--fp-more-size-web, 56px) * 0.4), 34px);
  height: clamp(18px, calc(var(--fp-more-size-web, 56px) * 0.4), 34px);
}

/* (Opsiyonel) Global logo standardı */
.site-branding img.custom-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: var(--hdr-logo-h);
  max-width: clamp(120px, 24vw, 220px);
  object-fit: contain;
  aspect-ratio: auto;
  flex: 0 0 auto;
}

/* === MOBILE: bağımsız tam ekran section + global ok görünür === */
/* === MOBILE: yalnızca global “aşağı” oku ayarla
   Section yükseklikleri style.css içindeki mobil blok tarafından yönetilecek. */
@media (max-width: 900px) {
  /* Global aşağı ok: her zaman sağ-altta, cam/dairesel kontrol */
  .fp-next {
    position: fixed !important;
    right: calc(var(--fp-next-right-mobile, 26px) + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--fp-next-bottom-mobile, 28px) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147482000 !important;

    display: grid !important;
    place-items: center;

    width: var(--fp-next-size-mobile, 56px);
    height: var(--fp-next-size-mobile, 56px);
    border-radius: 999px;

    background: var(--fp-next-bg-mobile, rgba(20, 20, 22, 0.65));
    border: 1px solid var(--fp-next-border-mobile, rgba(255, 255, 255, 0.18));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--fp-next-icon-mobile, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(0);
    transition: transform 0.2s;
  }

  .fp-next:active {
    transform: translateY(2px) scale(0.98);
  }

  /* İçteki ok tıklamayı engellemesin, tüm daire hit-area olsun */
  .fp-next > * {
    pointer-events: none;
  }
  .fp-next__icon {
    font-size: clamp(18px, calc(var(--fp-next-size-mobile, 56px) * 0.4), 34px);
  }

  .fp-more {
    position: fixed !important;
    right: calc(var(--fp-more-right-mobile, 26px) + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--fp-more-bottom-mobile, 28px) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147482000 !important;

    display: grid !important;
    place-items: center;

    width: var(--fp-more-size-mobile, 56px);
    height: var(--fp-more-size-mobile, 56px);
    border-radius: 999px;

    background: var(--fp-more-bg-mobile, rgba(20, 20, 22, 0.65));
    border: 1px solid var(--fp-more-border-mobile, rgba(255, 255, 255, 0.18));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--fp-more-icon-mobile, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(0);
    transition: transform 0.2s;
  }

  .fp-more:active {
    transform: translateY(2px) scale(0.98);
  }

  .fp-more > * {
    pointer-events: none;
  }
  .fp-more__icon {
    width: clamp(18px, calc(var(--fp-more-size-mobile, 56px) * 0.4), 34px);
    height: clamp(18px, calc(var(--fp-more-size-mobile, 56px) * 0.4), 34px);
  }
}

/* =========================
   VIEWPORT YÜKSEKLİĞİ AYARLARI
   ========================= */

/* 1) (fallback) dynamic: dalgalanabilir, JS ile güncellenebiliyor */
@supports (height: 100dvh) {
  :root {
    --app-h: 100dvh;
    --app-hf: calc(100dvh - var(--footer-safe));
  }
}

/* 2) Tüm cihazlarda, özellikle MOBİLDE:
   UI çubukları görünürken stabil viewport (small) */
@supports (height: 100svh) {
  :root {
    --app-h: 100svh;
    --app-hf: calc(100svh - var(--footer-safe));
  }
}

/* 3) SADECE DESKTOP için large viewport
   - Mobilde 100lvh KULLANMIYORUZ; aksi halde gerçek cihazda
     section’lar gereğinden uzun olup about info aşağı kayıyor. */
@media (min-width: 1024px) {
  @supports (height: 100lvh) {
    :root {
      --app-h: 100lvh;
      --app-hf: calc(100lvh - var(--footer-safe));
    }
  }
}

/* Desktop'ta mouse/trackpad, mobilde doğal scroll */
#asp-sections {
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}
@media (min-width: 769px) {
  #asp-sections {
    touch-action: none;
  }
}

/* MOBIL: footer kaldırıldığı için yüksekliği sıfırla */
@media (max-width: 1023.98px) {
  :root {
    --footer-h: 0px !important; /* sayfalarda ayrılan alt boşluğu iptal */
    --footer-safe: 0px !important; /* varsa güvenli alan değişkeni de sıfır */
  }
}

/* WP admin bar — layout'ta YOK SAY, sadece overlay olsun */
html.wp-toolbar {
  /* WP'nin html{margin-top:32/46px} ayarını iptal et */
  margin-top: 0 !important;
}

html.wp-toolbar,
html.wp-toolbar body,
body.admin-bar {
  padding-top: 0 !important;
}

/* Admin bar görünür kalsın; layout offset'ini temadaki değişkenler yönetir */
#wpadminbar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: fixed !important;
  inset: 0 0 auto 0;
  z-index: 2147483000 !important;
}

/* Layout değişkenleri admin bar yüksekliğini dikkate alsın */
body.admin-bar {
  --adminbar-h: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar {
    --adminbar-h: 46px !important;
  }
}

/* modal açıkken body kilidi */
.asp-modal-open {
  overflow: hidden; /* iOS için de kalsın */
  touch-action: none;
}

/* =========================================================
   Menü Konumu: Header / Footer  •  Desktop (≥901px)
   - Header modunda: footer yok, içerik header + safe-area top dikkate alınarak başlar
   - Footer modunda: header yok, içerik sadece safe-area top dikkate alınarak başlar
   ========================================================= */
@media (min-width: 901px) {
  /* HEADER aktif, FOOTER gizli */
  body.menu-loc-header {
    /* Footer yokmuş gibi davran, ama safe-area bottom korunsun */
    --footer-h: 0px;
    /* --footer-safe: var(--safe-b); */

    /* Header'ın kapladığı güvenli alan:
       safe-area top + header yüksekliği + customizer offset */
    /* --header-safe: calc(
      var(--sa-top, 0px) + var(--hdr-h, 72px) + var(--hdr-offset, 0px)
    ); */
  }

  /* FOOTER aktif, HEADER gizli */
  body.menu-loc-footer {
    /* Sadece safe-area top boşluğu, ekstra header yok */
    --header-safe: var(--sa-top, 0px);
  }

  /* HEADER + FOOTER birlikte */
  body.menu-loc-both {
    /* Header safe, header modundaki gibi */
    --header-safe: calc(var(--sa-top, 0px) + var(--hdr-h, 72px) + var(--hdr-offset, 0px));
    /* Footer için root değerleri (footer-h/footer-safe) korunuyor */
  }

  /* Header modunda footer ve “Takip et” orbiti tamamen gizle */
  body.menu-loc-header .site-footer,
  body.menu-loc-header .sf-orbit {
    display: none !important;
  }
}

/* Kartların bulunduğu satırı dikey hizalama kontrolü */
#team .tals-team__inner {
  align-items: var(--team-card-v-align, center);
}

/* İçerik bloğu offsetleri (üst/alt boşluk) */
#team .team-card__body {
  padding-top: var(--team-body-offset-top, 0px);
  padding-bottom: var(--team-body-offset-bottom, 0px);
}

/* Sectionlar arasi geciste kisa perde efekti (hero benzeri) */
#asp-section-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147482505;
  opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(
      180deg,
      rgba(10, 10, 12, 0.22) 0%,
      rgba(10, 10, 12, 0) 35%,
      rgba(10, 10, 12, 0.2) 100%
    );
}

#asp-section-flash.is-on {
  animation: aspSectionFlash 420ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes aspSectionFlash {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}