/* =====================================================================
   base.css — sıfırlama, tipografi, kapsayıcılar, butonlar, üst etiket,
   bölüm başlığı kalıbı, metin gövdesi ve yardımcılar.
   Kural: bu dosyada sabit renk/font YOK; hepsi tokens.css'ten var(--…).
   Önekler: l- yerleşim · c- bileşen · u- yardımcı · s- sayfa bölümü
   ===================================================================== */

/* ---------- 1. Sıfırlama ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-heading);
  font-size: var(--fs-root);
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

/* ---------- 2. Temel tipografi (tema varsayılanı) ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-heading);
  color: var(--c-heading);
  font-weight: 400;
  line-height: var(--lh-heading);
  margin: 0 0 15px;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 15px; }

/* ---------- 3. Yerleşim ---------- */
/* 1290 px içerik (ana sayfa bölümleri, alt bilgi) — kenar boşluğu 15 px */
.l-container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* 1620 px kutu (kenar boşlukları DAHİL; canlıdaki .container) — iç sayfa metin gövdesi */
.l-container--wide { max-width: var(--container-wide); }
/* Sayfa ana alanı: üst/alt boşluk canlıdaki #pxl-main ile aynı */
.l-main {
  display: block;
  padding-block: var(--section-y);
  min-height: calc(100vh - 606px);
}
@media (max-width: 1200px) { .l-main { padding-block: var(--section-y-lg); overflow-x: hidden; } }
@media (max-width: 1024px) { .l-main { padding-block: var(--section-y-md); } }
@media (max-width: 767px)  { .l-main { padding-block: var(--section-y-sm); } }

/* ---------- 4. Butonlar ---------- */
/* Varsayılan: mor zemin, beyaz yazı, Juana 18/300, 60 px yükseklik, hap köşe */
.c-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 var(--btn-pad-x);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-display-sans);
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  line-height: var(--btn-h);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.c-btn > span { display: block; position: relative; }
/* Canlıdaki "gradient-wipe" vurgusu: iki yumuşak beyaz daire %15 görünür olur */
.c-btn::before, .c-btn::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--c-on-dark);
  opacity: 0;
  z-index: -1;
  transform: translate(100%, -25%);
  transition: transform .15s cubic-bezier(.02, .01, .47, 1), opacity .15s cubic-bezier(.02, .01, .47, 1);
  pointer-events: none;
}
.c-btn:hover, .c-btn:focus-visible { background-color: var(--btn-bg); color: var(--btn-fg); }
.c-btn:hover::before, .c-btn:hover::after,
.c-btn:focus-visible::before, .c-btn:focus-visible::after { opacity: .15; transition-duration: .2s; }
.c-btn:hover::before, .c-btn:focus-visible::before { transform: translate3d(50%, 0, 0) scale(.9); }
.c-btn:hover::after,  .c-btn:focus-visible::after  { transform: translate(50%, 0) scale(1.1); }
.c-btn:active { transform: translateY(1px); }

.c-btn--soft  { border-radius: var(--radius-btn); }                 /* iç sayfa üst bilgi: 20 px köşe */
.c-btn--sm    { font-size: var(--fs-nav-box); }                     /* 16 px (ana sayfa üst bilgi) */
.c-btn--lg    { line-height: var(--btn-h-lg); font-weight: 200; border-radius: var(--radius-btn-lg); padding: 0 33px 0 32px; } /* 70 px */
.c-btn--ghost { background-color: transparent; border: 1px solid var(--c-on-dark); line-height: 52px; padding: 8px var(--btn-pad-x); }
.c-btn--ghost:hover, .c-btn--ghost:focus-visible { background-color: transparent; color: var(--c-on-dark); }
.c-btn--accent { --btn-bg: var(--c-accent); }                       /* yalnız ana sayfa hero */

/* ---------- 5. Üst etiket (eyebrow) + bölüm başlığı kalıbı ---------- */
/* <p class="c-eyebrow">Hakkımda</p>  → solda 42 px ince çizgi + DM Sans 18/300 */
.c-eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 18px;
  font-family: var(--f-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-primary);
}
.c-eyebrow::before {
  content: "";
  flex: 0 0 42px;
  height: 1px;
  margin-right: 25px;
  background-color: var(--c-secondary);
}
.c-eyebrow--plain::before { display: none; }

/* <div class="c-heading [c-heading--center] [c-heading--light]">
     <p class="c-eyebrow">…</p><h2 class="c-heading__title">…</h2></div> */
.c-heading { margin: 0 0 19px; }
.c-heading__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-section);
  font-weight: 200;
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  color: var(--c-heading);
}
.c-heading--center { text-align: center; }
.c-heading--center .c-eyebrow { justify-content: center; }
.c-heading--light .c-heading__title,
.c-heading--light .c-eyebrow { color: var(--c-on-dark); }
.c-heading--light .c-eyebrow::before { background-color: var(--c-on-dark); }

/* ---------- 6. Metin gövdesi (yasal sayfalar, blog yazısı) ---------- */
/* <div class="c-prose"> içinde düz h1/h2/h3/p/ol/ul yaz; stil buradan gelir */
.c-prose h1 { font-size: var(--fs-h1); }
.c-prose h2 { font-size: var(--fs-h2); }
.c-prose h3 { font-size: var(--fs-h3); }
.c-prose ol { list-style: decimal outside; margin: 1em 0 32px; padding: 0 0 0 40px; font-family: var(--f-heading); font-size: var(--fs-li); }
.c-prose ul { list-style: disc inside; margin: 0 0 32px; padding: 0; font-family: var(--f-heading); font-size: var(--fs-li); }
.c-prose strong, .c-prose b { font-weight: 700; }
.c-prose a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.c-prose::after { content: ""; display: table; clear: both; }

/* ---------- 7. Yardımcılar ---------- */
.u-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 2000;
  padding: 10px 18px; border-radius: var(--radius-sm);
  background: var(--c-primary); color: var(--c-on-dark);
  font-family: var(--f-body); font-size: var(--fs-body);
}
.u-skip-link:focus { top: 16px; }
.u-center { text-align: center; }
@media (max-width: 575px)  { .u-hide-mobile  { display: none !important; } }
@media (min-width: 576px)  { .u-only-mobile  { display: none !important; } }
@media (max-width: 1200px) { .u-hide-tablet  { display: none !important; } }

/* Süs hareketleri (canlıdaki pxl-animation-round / slide-right-to-left karşılığı) */
@keyframes u-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes u-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-20px); } }
.u-anim-spin  { animation: u-spin 10s linear infinite; }
.u-anim-drift { animation: u-drift 12s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 8. JS kalıplarının taban stili (site.js sözleşmesi) ---------- */
[data-carousel-track] {
  position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
[data-carousel-track]::-webkit-scrollbar { display: none; }
[data-carousel-track] > * { flex: 0 0 auto; scroll-snap-align: start; }
.c-carousel__dot {
  width: 8px; height: 8px; margin: 0 4px; border-radius: 50%;
  background-color: var(--c-primary); opacity: .25; transition: opacity var(--dur) var(--ease);
}
.c-carousel__dot.is-active { opacity: 1; }
[data-accordion-trigger] { cursor: pointer; }
[data-accordion-panel][hidden], [data-tab-panel][hidden] { display: none; }

/* ---------- 9. Hareket sistemi (site.js ile; prefers-reduced-motion'da kapalı) ---------- */
html { scroll-behavior: smooth; }
html .u-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
html .u-reveal.is-visible { opacity: 1; transform: none; }
@keyframes u-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes u-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes u-slide-in-right { from { opacity: 0; transform: translate(24px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes u-slide-in-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
/* Akordeon cevabı açılırken yumuşak iniş */
[data-accordion-panel]:not([hidden]) { animation: u-fade-down .35s var(--ease) both; }
/* Butonlar: hafif yükselme + basınca geri */
.c-btn { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.c-btn:hover { transform: translateY(-2px); box-shadow: rgba(var(--c-primary-rgb), .22) 0 12px 24px -12px; }
.c-btn:active { transform: translateY(0); box-shadow: none; }
/* Görseller yüklenince yumuşak belirme */
img[loading="lazy"] { animation: u-fade-up .6s ease both; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html .u-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 10. GSAP hareket katmanı (js/hareket.js) ---------- */
.js-motion .s-hero__body, .js-motion .c-pagetitle__body, .js-motion [data-intro] { visibility: hidden; animation: u-show 0s 2.5s forwards; }
@keyframes u-show { to { visibility: visible; } }
.js-motion .s-hero__bg, .js-motion .s-hero__eyebrow, .js-motion .s-hero__title, .js-motion .s-hero__line, .js-motion .s-hero__btn, .js-motion .c-pagetitle__body > * { animation: none !important; }
.u-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.u-word__in { display: inline-block; will-change: transform; }
.u-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 2px; background-color: var(--c-brand); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.c-footer__menu a, .c-footer__legal a, a.c-footer__text { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color var(--dur) var(--ease), background-size .4s var(--ease); }
.c-footer__menu a:hover, .c-footer__menu a:focus-visible, .c-footer__legal a:hover, .c-footer__legal a:focus-visible, a.c-footer__text:hover, a.c-footer__text:focus-visible { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .js-motion .s-hero__body, .js-motion .c-pagetitle__body, .js-motion [data-intro] { visibility: visible; animation: none; } .u-progress { display: none; } }

/* Mobil güvenlik: yatay taşma kaydırma çubuğu üretmesin */
html, body { overflow-x: clip; }