/* =================================================================
   Petdent — Site styles
   Direction A · Klinik Editoryal
   DM Serif Display + IBM Plex Sans, locked palette
   ================================================================= */
@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--pd-font-body);
  font-size: var(--pd-text-base);
  line-height: var(--pd-lh-relaxed);
  color: var(--pd-fg-1);
  background: var(--pd-bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* Mobile horizontal-overflow guard (float/negatif-margin taşmalarına karşı) */
@media (max-width: 980px) { html, body { overflow-x: hidden; } }

/* ===== Layout ===== */
.container {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
}
.container-wide {
  max-width: 1320px; margin: 0 auto; padding: 0 32px;
}
.section { padding: 112px 0; position: relative; }
.section--alt { background: var(--pd-neutral-50); }
.section--dark { background: var(--pd-charcoal); color: #fff; }
.section--tight { padding: 80px 0; }

@media (max-width: 900px) {
  .section { padding: 80px 0; }
  .section--tight { padding: 56px 0; }
  .container, .container-wide { padding: 0 22px; }
}
@media (max-width: 560px) {
  .section { padding: 64px 0; }
}

/* ===== Section head — eyebrow + h2 + lede ===== */
.eyebrow {
  font-family: var(--pd-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pd-orange);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--pd-orange);
}
.section--dark .eyebrow { color: var(--pd-orange); }

.h-display {
  font-family: var(--pd-font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--pd-fg-1);
  margin: 0;
  text-wrap: balance;
}
.h1 { font-size: clamp(44px, 5.6vw, 76px); }
.h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.05; }
.h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.h4 {
  font-family: var(--pd-font-body); font-weight: 600;
  font-size: 18px; line-height: 1.3; letter-spacing: -0.005em;
}

.lede {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--pd-fg-2);
  text-wrap: pretty;
}
.section--dark .h-display, .section--dark .lede { color: #fff; }
.section--dark .lede { color: rgba(255,255,255,0.78); }

.orange-word { color: var(--pd-orange); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--pd-font-body); font-weight: 600; font-size: 14px;
  border-radius: 6px;
  padding: 13px 22px;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color 160ms var(--pd-ease-out),
              color 160ms var(--pd-ease-out),
              border-color 160ms var(--pd-ease-out),
              transform 160ms var(--pd-ease-out),
              box-shadow 160ms var(--pd-ease-out);
}
.btn:focus-visible { outline: none; box-shadow: var(--pd-shadow-focus); }
.btn-primary { background: var(--pd-orange); color: #fff; }
.btn-primary:hover { background: var(--pd-orange-hover); }
.btn-primary:active { background: var(--pd-orange-press); transform: translateY(1px); }
.btn-secondary {
  background: transparent; color: var(--pd-charcoal);
  border-color: var(--pd-neutral-200);
}
.btn-secondary:hover { border-color: var(--pd-charcoal); background: var(--pd-neutral-50); }
.btn-ghost { background: transparent; color: var(--pd-orange); padding: 13px 14px; }
.btn-ghost:hover { background: var(--pd-orange-tint); }
.btn-dark { background: var(--pd-charcoal); color: #fff; }
.btn-dark:hover { background: #2A2A2C; }
.btn-on-dark {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,0.32);
}
.btn-on-dark:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.btn-lg { font-size: 15px; padding: 16px 28px; }
.btn-sm { font-size: 12px; padding: 9px 16px; }
@media (max-width: 720px) {
  .btn { min-height: 48px; }
  .btn-sm { min-height: 44px; padding: 12px 16px; }
}

/* Subtle arrow that slides on hover */
.btn .arrow {
  display: inline-block; transition: transform 220ms var(--pd-ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ===== Underline link ===== */
.ulink {
  font-weight: 500; color: var(--pd-charcoal);
  border-bottom: 2px solid var(--pd-orange);
  padding-bottom: 1px;
  transition: color 160ms;
}
.ulink:hover { color: var(--pd-orange); }
.ulink .arrow { color: var(--pd-orange); margin-left: 6px; transition: transform 220ms; display: inline-block; }
.ulink:hover .arrow { transform: translateX(3px); }

/* ===== Cards ===== */
.card {
  background: #fff;
  border: 1px solid var(--pd-border-1);
  border-radius: 8px;
  padding: 28px;
  transition: border-color 220ms var(--pd-ease-out),
              transform 220ms var(--pd-ease-out),
              box-shadow 220ms var(--pd-ease-out);
}
.card:hover {
  border-color: var(--pd-charcoal-3);
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-2);
}

/* ===== Image placeholder ===== */
.imgph {
  background: linear-gradient(160deg, #4A4A4D, #2C2C2E);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.36);
  position: relative;
  overflow: hidden;
}
.imgph::after {
  content: attr(data-label);
  position: absolute; bottom: 12px; left: 14px;
  color: rgba(255,255,255,0.45);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
}
.imgph.light {
  background: linear-gradient(160deg, #ECECEC, #DCDCDE);
  color: rgba(58,58,60,0.35);
}
.imgph.light::after { color: rgba(58,58,60,0.5); }

/* ===== Reveal — page open ===== */
@keyframes pd-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  animation: pd-rise 720ms var(--pd-ease-out) forwards;
}
.reveal[data-d="0"] { animation-delay:   0ms; }
.reveal[data-d="1"] { animation-delay:  90ms; }
.reveal[data-d="2"] { animation-delay: 180ms; }
.reveal[data-d="3"] { animation-delay: 290ms; }
.reveal[data-d="4"] { animation-delay: 410ms; }
.reveal[data-d="5"] { animation-delay: 530ms; }
.reveal[data-d="6"] { animation-delay: 650ms; }

/* ===== Scroll reveal — triggered when in-view ===== */
.scroll-rise {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 720ms var(--pd-ease-out), transform 720ms var(--pd-ease-out);
}
.scroll-rise.in {
  opacity: 1; transform: translateY(0);
}
.scroll-rise[data-stag="1"] { transition-delay:  90ms; }
.scroll-rise[data-stag="2"] { transition-delay: 180ms; }
.scroll-rise[data-stag="3"] { transition-delay: 270ms; }
.scroll-rise[data-stag="4"] { transition-delay: 360ms; }
.scroll-rise[data-stag="5"] { transition-delay: 450ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .scroll-rise { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== Hairline divider ===== */
.hr {
  height: 1px; background: var(--pd-border-1); border: 0; margin: 0;
}

/* ===== Pill ===== */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  border: 1px solid var(--pd-border-1);
  padding: 5px 11px; border-radius: 999px;
  color: var(--pd-fg-2); background: #fff;
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pd-orange);
}

/* ===== Form ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px; font-weight: 600; color: var(--pd-fg-1);
  letter-spacing: 0.02em;
}
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 14px;
  color: var(--pd-fg-1); background: #fff;
  border: 1px solid var(--pd-neutral-200);
  border-radius: 6px;
  padding: 13px 14px;
  transition: border-color 160ms, box-shadow 160ms;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--pd-orange);
  box-shadow: var(--pd-shadow-focus);
}
.field textarea { resize: vertical; min-height: 104px; }