/* ==========================================================================
   İDA HALI YIKAMA — BASE
   Reset, design tokens, typography, layout primitives, utilities
   ========================================================================== */

/* ---- Design Tokens ------------------------------------------------------ */
:root{
  /* Brand palette — corporate navy + muted teal + warm gold */
  --c-white:#ffffff;
  --c-mist:#f4f3ef;
  --c-mist-2:#eceae4;
  --c-fog:#ddd8cf;
  --c-ink:#10233d;
  --c-ink-2:#16304c;
  --c-ink-soft:#2a4160;
  --c-slate:#5c6770;
  --c-slate-light:#7a858c;
  --c-aqua:#1a7a6c;
  --c-aqua-light:#4aad9c;
  --c-aqua-deep:#0f5a50;
  --c-ice:#e7f2ef;
  --c-gold:#b08a3e;
  --c-gold-light:#e4d09a;
  --c-on-photo:#fff;
  --c-on-photo-muted:rgba(255,255,255,.9);
  --scrim-photo: linear-gradient(180deg, rgba(8,14,22,.12) 0%, rgba(8,14,22,.42) 42%, rgba(8,14,22,.88) 74%, rgba(8,14,22,.96) 100%);
  --c-brand-red:#c0392b;

  --grad-deep: linear-gradient(165deg, #10233d 0%, #16324d 58%, #14343c 100%);
  --grad-aqua: linear-gradient(120deg, #0f5a50 0%, #1a7a6c 58%, #2e9a88 100%);
  --grad-gold: linear-gradient(120deg, #8f6e32 0%, #b08a3e 55%, #d4bc7a 100%);
  --grad-mist: linear-gradient(180deg, #ffffff 0%, #f4f3ef 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));

  /* Typography */
  --font-display:'Plus Jakarta Sans', 'Manrope', -apple-system, sans-serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1: clamp(2.15rem, 4.2vw, 4.1rem);
  --fs-h2: clamp(1.75rem, 2.8vw, 2.85rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  /* Spacing */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5.5rem;
  --space-2xl: 8.5rem;

  --container: 1240px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 4px 18px rgba(11,21,32,.08);
  --shadow-md: 0 16px 46px rgba(11,21,32,.14);
  --shadow-lg: 0 30px 80px rgba(11,21,32,.22);
  --shadow-aqua: 0 14px 36px rgba(26,122,108,.22);

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .28s;
  --dur-med: .55s;
  --dur-slow: .9s;

  --header-h: 88px;
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--c-ink);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  line-height:1.6;
}
img, svg, video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input, select, textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

/* ---- Typography ----------------------------------------------------------*/
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.06;
  color:var(--c-ink);
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:700; }
.lead{ font-size:var(--fs-lead); color:var(--c-slate); font-weight:500; line-height:1.55; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-display);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-aqua-deep);
}
.eyebrow::before{
  content:''; width:22px; height:2px; background:var(--c-aqua); border-radius:2px;
}
.on-dark .eyebrow,
.bg-deep .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow{
  color:var(--c-gold-light);
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.on-dark .eyebrow::before,
.bg-deep .eyebrow::before,
.hero .eyebrow::before,
.page-hero .eyebrow::before{ background:var(--c-gold-light); }

/* ---- Layout ----------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 2.5rem);
}
.section{ padding-block:var(--space-2xl); position:relative; }
.section-head{
  max-width:760px;
  margin-bottom:var(--space-lg);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top:.9rem; }
.section-head .lead{ margin-top:1.1rem; }

.grid{ display:grid; gap:var(--space-md); }
.on-dark{ color:var(--c-white); }
.on-dark h1, .on-dark h2, .on-dark h3,
.bg-deep h1, .bg-deep h2, .bg-deep h3{ color:var(--c-white); }
.on-dark .lead, .bg-deep .lead{ color:var(--c-on-photo-muted); }

.bg-deep{ background:var(--grad-deep); color:var(--c-white); }
.bg-mist{ background:var(--grad-mist); }

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1rem 1.9rem;
  border-radius:var(--radius-full);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
  isolation:isolate;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-primary{
  background:var(--c-aqua);
  color:#fff;
  box-shadow:var(--shadow-aqua);
}
a.btn-primary, button.btn-primary{ color:#fff; }
.btn-primary:hover{ transform:translateY(-1px); background:var(--c-aqua-deep); box-shadow:0 16px 40px rgba(15,90,80,.28); }
a.btn-ghost, .btn-ghost{
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); color:#fff; }
a.btn-outline, .btn-outline{
  overflow:hidden;
  background:linear-gradient(180deg, #fff 0%, #f7f4ee 100%);
  color:var(--c-ink);
  border:1px solid rgba(176,138,62,.48);
  padding:1.05rem 1.55rem 1.05rem 1.75rem;
  box-shadow:0 10px 26px rgba(16,35,61,.07), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-outline::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.55) 50%, transparent 64%);
  transform:translateX(-130%);
  mix-blend-mode:overlay;
}
.btn-outline:hover::before{ animation:shine-sweep .95s var(--ease-out); }
.btn-outline:not(:has(svg))::after{
  content:''; width:16px; height:16px; position:relative; z-index:1; flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-outline:hover{
  transform:translateY(-2px);
  border-color:var(--c-gold);
  color:var(--c-ink);
  box-shadow:0 16px 34px rgba(16,35,61,.12), 0 0 18px rgba(212,188,122,.22);
}
@media (max-width:480px){
  .btn-outline{
    white-space:normal; line-height:1.25; max-width:100%;
    padding:.95rem 1.25rem .95rem 1.35rem;
  }
}
@media (prefers-reduced-motion: reduce){
  .btn-outline:hover::before{ animation:none; }
}
.btn-dark{ background:var(--c-ink); color:var(--c-white); }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-block{ width:100%; }
.btn-sm{ padding:.75rem 1.3rem; font-size:.85rem; }

/* magnetic effect wrapper target */
.magnetic{ will-change:transform; }

/* ---- Cards / Chips -------------------------------------------------------*/
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .85rem;
  border-radius:var(--radius-full);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.04em;
  background:var(--c-mist);
  color:var(--c-slate);
}

/* ---- Utilities ------------------------------------------------------------*/
.container-narrow{ max-width:860px; margin-inline:auto; }
.mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }
p.text-center:has(.btn){
  display:flex; justify-content:center; flex-wrap:wrap; gap:.75rem;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-60px;
  background:var(--c-ink); color:#fff; padding:.8rem 1.2rem;
  border-radius:var(--radius-sm); z-index:999; transition:top .2s;
}
.skip-link:focus{ top:1rem; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid var(--c-aqua);
  outline-offset:3px;
  border-radius:6px;
}

/* Reveal-on-scroll base state */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-scale]{ opacity:0; transform:scale(.94); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal-scale].is-visible{ opacity:1; transform:scale(1); }
[data-stagger] > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-stagger].is-visible > *{ opacity:1; transform:none; }
[data-stagger].is-visible > *:nth-child(1){ transition-delay:.03s; }
[data-stagger].is-visible > *:nth-child(2){ transition-delay:.11s; }
[data-stagger].is-visible > *:nth-child(3){ transition-delay:.19s; }
[data-stagger].is-visible > *:nth-child(4){ transition-delay:.27s; }
[data-stagger].is-visible > *:nth-child(5){ transition-delay:.35s; }
[data-stagger].is-visible > *:nth-child(6){ transition-delay:.43s; }
[data-stagger].is-visible > *:nth-child(7){ transition-delay:.51s; }
[data-stagger].is-visible > *:nth-child(8){ transition-delay:.59s; }
[data-stagger].is-visible > *:nth-child(9){ transition-delay:.67s; }
[data-stagger].is-visible > *:nth-child(10){ transition-delay:.75s; }
@media (max-width:720px){
  [data-stagger] > *{
    opacity:1; transform:none; transition:none;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal], [data-reveal-scale], [data-stagger] > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@media (max-width: 720px){
  :root{ --space-2xl: 5rem; --space-xl:3.5rem; }
}