/* ============================================================
   Kale Zihni — Özel Kaleci Koçluğu • İzmir
   ============================================================ */

:root {
  interpolate-size: allow-keywords;

  --bg: #FBF5EE;
  --surface: #FFFFFF;
  --surface-2: #F5EDE3;
  --ink: #2D1F14;
  --ink-soft: #6B5D52;
  --accent: #B22D2D;
  --accent-2: #C9A84C;
  --line: rgba(45,31,20,0.12);
  --line-strong: rgba(45,31,20,0.25);

  --header-h: 80px;
  --container: 1180px;
  --container-pad: clamp(16px,4vw,32px);

  --font-heading: 'DM Serif Display', 'Palatino Linotype', 'Palatino', serif;
  --font-body: 'Lora', 'Georgia', serif;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 4px 24px -8px rgba(45,31,20,0.10);
  --shadow-lg: 0 12px 40px -16px rgba(45,31,20,0.18);
  --shadow-accent: 0 8px 28px -10px rgba(178,45,45,0.22);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:hidden;max-width:100vw}
body{
  font-family:var(--font-body);
  font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  line-height:1.8;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color 240ms}
a:hover{color:var(--accent-2)}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font:inherit}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:400;
  font-style:italic;
  line-height:1.15;
  color:var(--ink);
  letter-spacing:-0.012em;
}

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link{
  position:absolute;top:-100%;left:16px;
  background:var(--accent);color:#fff;padding:8px 18px;
  border-radius:0 0 var(--radius) var(--radius);
  z-index:10000;font-size:0.875rem;
  transition:top 200ms;
}
.skip-link:focus{top:0}

/* ── Container ─────────────────────────────────────────────── */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

/* ── Typography ────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--font-body);
  font-style:normal;
  font-size:0.8125rem;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:1rem;
}
h1{font-size:clamp(2.5rem, 6vw, 4.5rem)}
h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:1.25rem}
h3{font-size:clamp(1.375rem,2.5vw,1.75rem)}
h4{font-size:1.125rem}
.lead{font-size:clamp(1.125rem,1.5vw,1.375rem);color:var(--ink-soft);max-width:640px}
.section-pad{padding:clamp(80px,12vh,140px) 0}

/* ── Gold divider + glove motif ────────────────────────────── */
.gold-rule{
  display:flex;align-items:center;justify-content:center;
  gap:18px;padding:0;margin:0;
}
.gold-rule::before,.gold-rule::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-2),transparent);
}
.gold-rule svg{width:36px;height:36px;color:var(--accent-2);flex-shrink:0}

/* ── Vertical date decoration ──────────────────────────────── */
.section-with-date{position:relative}
.section-date{
  position:absolute;left:clamp(8px,2vw,24px);top:50%;
  transform:rotate(-90deg) translateX(-50%);
  transform-origin:left center;
  font-family:var(--font-body);font-size:0.6875rem;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent-2);opacity:0.5;
  white-space:nowrap;pointer-events:none;
}
@media(max-width:768px){.section-date{display:none}}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 36px;
  background:var(--accent);color:var(--surface);
  font-family:var(--font-body);font-weight:600;font-size:0.9375rem;
  border-radius:var(--radius);
  transition:background 240ms cubic-bezier(.2,.7,.2,1),
             color 240ms,
             transform 180ms cubic-bezier(.2,.7,.2,1),
             box-shadow 240ms;
  border:none;cursor:pointer;
  letter-spacing:0.02em;
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--ink);color:var(--surface);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.btn-primary:active{
  transform:scale(0.97) translateY(0);
  animation:glove-catch 260ms cubic-bezier(.2,.7,.2,1);
}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;
  background:transparent;color:var(--ink);
  font-family:var(--font-body);font-weight:600;font-size:0.9375rem;
  border:2px solid var(--line-strong);
  border-radius:var(--radius);
  transition:background 240ms,color 240ms,border-color 240ms,transform 180ms;
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  background:var(--surface);color:var(--ink);
  border-color:var(--accent-2);
  transform:translateY(-2px);
}

/* Glove-catch animation for CTA */
@keyframes glove-catch{
  0%,100%{transform:scale(1)}
  40%{transform:scale(0.95) translateY(1px)}
  70%{transform:scale(1.02)}
}

/* ── Focus ring ────────────────────────────────────────────── */
:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(178,45,45,0.12);
}

/* ============================================================
   HEADER (sticky with morph)
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;
  z-index:1080;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(251, 245, 238, 0.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background 240ms ease,box-shadow 240ms ease,height 240ms ease;
}
.site-header.is-scrolled{
  background:rgba(251,245,238,0.98);
  box-shadow:0 8px 24px -16px rgba(45,31,20,0.18);
  height:64px;
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:var(--container);
  margin:0 auto;
  padding:0 var(--container-pad);
}
.header__logo{
  font-family:var(--font-heading);font-style:italic;
  font-size:1.375rem;color:var(--ink);
  text-decoration:none;white-space:nowrap;
  transition:color 240ms;
}
.header__logo span{color:var(--accent)}
.header__logo:hover{color:var(--accent)}

/* Desktop nav */
.nav-desktop{display:flex;align-items:center;gap:clamp(16px,2.5vw,32px)}
.nav-desktop a{
  position:relative;
  font-family:var(--font-body);font-size:0.875rem;font-weight:500;
  color:var(--ink);letter-spacing:0.01em;
  text-decoration:none;padding:6px 0;
  transition:color 240ms;
}
.nav-desktop a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--accent-2);
  transform:scaleX(0);transform-origin:right;
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
}
.nav-desktop a:hover{color:var(--accent)}
.nav-desktop a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-desktop a.is-active{color:var(--accent)}
.nav-desktop a.is-active::after{transform:scaleX(1);transform-origin:left}

.nav-desktop .nav-cta{
  padding:10px 24px;
  background:var(--accent);color:var(--surface);
  border-radius:var(--radius);font-weight:600;
  transition:background 240ms,color 240ms,transform 180ms;
}
.nav-desktop .nav-cta::after{display:none}
.nav-desktop .nav-cta:hover{
  background:var(--ink);color:var(--surface);
  transform:translateY(-2px);
}
@media(max-width:1024px){.nav-desktop{display:none}}

/* Hamburger toggle */
.nav-toggle{
  display:none;
  position:relative;z-index:1100;
  width:44px;height:44px;
  background:var(--surface);
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  cursor:pointer;
  padding:10px;
  transition:background 240ms,border-color 240ms;
}
.nav-toggle:hover,.nav-toggle:focus-visible{
  background:var(--surface-2);
  border-color:var(--accent-2);
}
.nav-toggle span{
  display:block;width:22px;height:2.5px;
  background:var(--ink);border-radius:2px;
  transition:transform 320ms cubic-bezier(.2,.7,.2,1),opacity 200ms;
  position:absolute;left:10px;
}
.nav-toggle span:nth-child(1){top:13px}
.nav-toggle span:nth-child(2){top:20px}
.nav-toggle span:nth-child(3){top:27px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:rotate(45deg);top:20px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:rotate(-45deg);top:20px;
}
@media(max-width:1024px){.nav-toggle{display:block}}

/* ============================================================
   DRAWER (mobile nav — OUTSIDE header)
   ============================================================ */
.drawer-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);
  z-index:1040;
  opacity:0;visibility:hidden;
  transition:opacity 240ms,visibility 240ms;
}
.drawer-backdrop.is-open{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(360px,92vw);
  background:var(--surface);
  z-index:1050;
  transform:translateX(100%);
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
  padding:calc(var(--header-h) + 24px) 32px 32px;
  display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer a{
  display:block;padding:14px 0;
  font-family:var(--font-heading);font-style:italic;
  font-size:1.25rem;color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:color 240ms,padding-left 240ms;
}
.drawer a:hover{color:var(--accent);padding-left:8px}
.drawer a.is-active{color:var(--accent)}
.drawer .drawer-cta{
  margin-top:auto;
  padding:16px 28px;
  background:var(--accent);color:var(--surface);
  border-radius:var(--radius);text-align:center;
  font-weight:600;border:none;
  transition:background 240ms,color 240ms;
}
.drawer .drawer-cta:hover{background:var(--ink);color:var(--surface)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100dvh - var(--header-h));
  display:flex;align-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
}
.hero__field{
  position:absolute;inset:0;
  background:linear-gradient(170deg,#1a3a1a 0%,#2d5a2d 40%,#3d6b3d 70%,#1a3a1a 100%);
  opacity:0;
  transition:opacity 1.2s ease;
}
.hero.mask-active .hero__field{opacity:1}

.hero__silhouette{
  position:absolute;inset:0;
  background:linear-gradient(160deg,var(--ink) 0%,#3d2f22 60%,var(--ink) 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transition:clip-path 0.8s cubic-bezier(.2,.7,.2,1);
}
.hero.mask-active .hero__silhouette{
  clip-path:polygon(
    35% 10%, 65% 10%,
    72% 25%, 68% 50%,
    75% 70%, 60% 95%,
    40% 95%, 25% 70%,
    32% 50%, 28% 25%
  );
}

.hero__photo{
  position:absolute;inset:0;
  background:#2D1F14;
  display:flex;align-items:center;justify-content:center;
}
.hero__photo-placeholder{
  width:100%;height:100%;
  background:linear-gradient(160deg,var(--ink) 0%,#3d2f22 40%,#5a4535 100%);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.08);font-size:6rem;
}

.hero__overlay{
  position:relative;z-index:2;
  width:100%;
  padding:clamp(40px,6vh,80px) 0 clamp(32px,4vh,60px);
}
.hero__eyebrow{
  font-family:var(--font-body);font-style:normal;
  font-size:0.8125rem;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:clamp(16px,2vh,28px);
  text-shadow:0 1px 6px rgba(0,0,0,0.4);
}
.hero__title{
  font-size:clamp(2.8rem, 7vw, 4.5rem);
  color:#fff;
  line-height:1.05;
  margin-bottom:clamp(18px, 3vh, 32px);
  max-width:700px;
  text-shadow:0 2px 16px rgba(0,0,0,0.35);
}
.hero__title span{
  display:inline-block;
  color:var(--accent-2);
}
.hero__sub{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  color:rgba(255,255,255,0.88);
  max-width:520px;line-height:1.7;
  margin-bottom:clamp(24px,4vh,40px);
  text-shadow:0 1px 8px rgba(0,0,0,0.3);
}
.hero__cta{
  font-size:1.0625rem;padding:18px 42px;
  box-shadow:0 6px 24px -8px rgba(178,45,45,0.35);
}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,24px);
  margin-top:clamp(28px,4vh,48px);
}
.hero__trust span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.8125rem;color:rgba(255,255,255,0.6);
  letter-spacing:0.01em;
}
.hero__trust svg{width:18px;height:18px;opacity:0.7}
.hero__overlay img{max-height:clamp(200px,26vh,320px) !important;width:100%;height:auto;object-fit:cover;border-radius:var(--radius)}

/* Hero parallax */
.hero__bg{will-change:transform}

/* ============================================================
   STATS COUNTER
   ============================================================ */
.stats{
  background:var(--ink);
  padding:clamp(48px,6vh,72px) 0;
  position:relative;
  overflow:hidden;
}
.stats::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,0.03) 39px,rgba(255,255,255,0.03) 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,0.03) 39px,rgba(255,255,255,0.03) 40px);
  animation:net-drift 12s linear infinite;
  pointer-events:none;
}
@keyframes net-drift{
  0%{background-position:0 0}
  100%{background-position:40px 40px}
}
@media(prefers-reduced-motion:reduce){
  .stats::before{animation:none}
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,40px);
  text-align:center;
}
.stat{padding:16px 8px}
.stat__number{
  font-family:var(--font-heading);font-style:italic;
  font-size:clamp(2.25rem,5vw,3.5rem);
  color:var(--accent-2);
  line-height:1.1;
  margin-bottom:6px;
}
.stat__label{
  font-size:0.8125rem;color:rgba(255,255,255,0.55);
  letter-spacing:0.04em;
}
@media(max-width:640px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   HIKAYE (Story / Timeline)
   ============================================================ */
.hikaye{
  position:relative;
  padding:clamp(80px,12vh,140px) 0;
}
.hikaye__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px,6vh,72px);
  max-width:720px;
}
.hikaye__block{position:relative;padding-left:clamp(32px,4vw,56px)}
.hikaye__block::before{
  content:'';position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent-2) 60%,transparent);
}
.hikaye__block::after{
  content:'';position:absolute;
  left:-5px;top:8px;width:12px;height:12px;
  border-radius:50%;
  background:var(--accent-2);
  border:3px solid var(--bg);
}
.hikaye__year{
  font-family:var(--font-body);font-size:0.75rem;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
  margin-bottom:8px;
}
.hikaye__block h3{margin-bottom:12px}
.hikaye__block p{color:var(--ink-soft);max-width:580px}
.hikaye__photo{
  aspect-ratio:3/2;
  background:var(--surface-2);
  border-radius:var(--radius-lg);
  margin-top:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:0.8125rem;
  overflow:hidden;
}

/* ============================================================
   METOD (2-block split)
   ============================================================ */
.metod{
  background:var(--surface);
  padding:clamp(80px,12vh,140px) 0;
}
.metod__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,48px);
}
.metod__card{
  padding:clamp(32px,4vw,48px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  position:relative;
  overflow:hidden;
  transition:transform 360ms cubic-bezier(.2,.7,.2,1),box-shadow 360ms;
}
.metod__card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-accent);
}
.metod__card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--accent-2);
}
.metod__icon{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;color:var(--accent);
}
.metod__icon svg{width:28px;height:28px}
.metod__card h3{margin-bottom:14px}
.metod__card p{color:var(--ink-soft);font-size:0.9375rem}
.metod__card ul{
  margin-top:16px;
  display:flex;flex-direction:column;gap:10px;
}
.metod__card li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.9375rem;color:var(--ink-soft);
}
.metod__card li::before{
  content:'';flex-shrink:0;
  width:6px;height:6px;margin-top:10px;
  border-radius:50%;background:var(--accent-2);
}
@media(max-width:768px){
  .metod__grid{grid-template-columns:1fr}
}

/* ============================================================
   SÜREÇ (Process — vertical timeline)
   ============================================================ */
.surec{padding:clamp(80px,12vh,140px) 0}
.surec__timeline{
  max-width:680px;
  margin:clamp(32px,5vh,56px) auto 0;
  position:relative;
  padding-left:clamp(40px,5vw,64px);
}
.surec__timeline::before{
  content:'';position:absolute;
  left:16px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--accent-2),var(--line));
}
.surec__step{
  position:relative;
  padding-bottom:clamp(32px,4vh,48px);
}
.surec__step:last-child{padding-bottom:0}
.surec__step::before{
  content:attr(data-step);
  position:absolute;
  left:calc(-1 * clamp(40px,5vw,64px) + 4px);
  top:0;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--accent);color:var(--surface);
  font-size:0.75rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--bg);
}
.surec__time{
  font-size:0.75rem;font-weight:600;
  color:var(--accent-2);letter-spacing:0.08em;
  text-transform:uppercase;margin-bottom:6px;
}
.surec__step h4{
  font-family:var(--font-heading);font-style:italic;
  margin-bottom:8px;
}
.surec__step p{color:var(--ink-soft);font-size:0.9375rem}

/* ============================================================
   SEANSLAR (Pricing cards)
   ============================================================ */
.seanslar{
  background:var(--surface);
  padding:clamp(80px,12vh,140px) 0;
}
.pricing__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,28px);
  margin-top:clamp(32px,5vh,56px);
}
.pricing__card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(28px,3vw,40px);
  position:relative;
  display:flex;flex-direction:column;
  transition:transform 360ms cubic-bezier(.2,.7,.2,1),box-shadow 360ms;
}
.pricing__card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-accent);
}
.pricing__card.is-featured{
  border-color:var(--accent);
  background:var(--surface);
}
.pricing__card.is-featured::before{
  content:'En Popüler';
  position:absolute;top:-13px;left:24px;
  padding:4px 14px;
  background:var(--accent);color:var(--surface);
  font-size:0.6875rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  border-radius:20px;
}
.pricing__name{
  font-family:var(--font-heading);font-style:italic;
  font-size:1.25rem;margin-bottom:8px;
}
.pricing__price{
  font-family:'Consolas','Courier New',monospace;
  font-size:clamp(1.75rem,3vw,2.25rem);
  font-weight:700;
  color:var(--accent);
  margin-bottom:4px;
  line-height:1.2;
}
.pricing__period{
  font-size:0.8125rem;color:var(--ink-soft);
  margin-bottom:20px;
}
.pricing__list{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:24px;flex:1;
}
.pricing__list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.875rem;color:var(--ink-soft);
}
.pricing__list li svg{
  width:16px;height:16px;flex-shrink:0;margin-top:3px;
}
.pricing__list li.included svg{color:var(--accent-2)}
.pricing__list li.excluded{opacity:0.5;text-decoration:line-through}
.pricing__list li.excluded svg{color:var(--ink-soft)}
.pricing__disclaimer{
  font-size:0.75rem;color:var(--ink-soft);
  margin-top:auto;padding-top:16px;
  border-top:1px solid var(--line);
  font-style:italic;
}
@media(max-width:768px){
  .pricing__grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
}

/* ============================================================
   REFERANSLAR (Testimonials)
   ============================================================ */
.referanslar{padding:clamp(80px,12vh,140px) 0}
.testimonials__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,32px);
  margin-top:clamp(32px,5vh,56px);
}
.testimonials__grid > :nth-child(3){
  grid-column:1 / -1;
  max-width:640px;
  margin:0 auto;
}
.testimonial{
  padding:clamp(24px,3vw,36px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  position:relative;
  transition:transform 360ms cubic-bezier(.2,.7,.2,1),box-shadow 360ms;
}
.testimonial:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.testimonial::before{
  content:'\201C';
  position:absolute;top:16px;right:24px;
  font-family:var(--font-heading);font-style:italic;
  font-size:4rem;line-height:1;
  color:var(--accent-2);opacity:0.2;
}
.testimonial__text{
  font-size:0.9375rem;color:var(--ink-soft);
  line-height:1.75;margin-bottom:18px;
  position:relative;
}
.testimonial__author{
  display:flex;align-items:center;gap:12px;
}
.testimonial__avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-style:italic;
  font-size:1rem;color:var(--accent);
}
.testimonial__name{font-weight:600;font-size:0.875rem;line-height:1.3}
.testimonial__meta{font-size:0.75rem;color:var(--ink-soft)}
@media(max-width:640px){
  .testimonials__grid{grid-template-columns:1fr}
  .testimonials__grid > :nth-child(3){grid-column:auto}
}

/* ============================================================
   SSS (FAQ accordion — pure CSS)
   ============================================================ */
.sss{
  background:var(--surface);
  padding:clamp(80px,12vh,140px) 0;
}
.faq-list{
  max-width:720px;
  margin:clamp(32px,5vh,56px) auto 0;
  display:flex;flex-direction:column;gap:0;
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.5vh,24px) 0;
  cursor:pointer;
  font-family:var(--font-heading);font-style:italic;
  font-size:clamp(1rem,1.5vw,1.125rem);
  color:var(--ink);
  list-style:none;
  transition:color 240ms;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';
  font-family:var(--font-body);font-style:normal;
  font-size:1.5rem;font-weight:300;
  color:var(--accent-2);
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
  flex-shrink:0;margin-left:16px;
}
.faq-item[open] summary::after{
  transform:rotate(45deg);
}
.faq-item summary:hover{color:var(--accent)}
.faq-item > .faq-body{
  height:0;
  padding:0 0;
  overflow:hidden;
  transition:height 360ms cubic-bezier(.4,0,.2,1),
             padding-block-end 360ms cubic-bezier(.4,0,.2,1);
}
.faq-item[open] > .faq-body{
  height:auto;
  padding-block-end:24px;
}
.faq-body p{
  color:var(--ink-soft);font-size:0.9375rem;
  line-height:1.75;max-width:620px;
}
@media(prefers-reduced-motion:reduce){
  .faq-item > .faq-body{transition:none}
}

/* ============================================================
   RANDEVU (Booking form)
   ============================================================ */
.randevu{padding:clamp(80px,12vh,140px) 0}
.form-wrap{
  max-width:640px;
  margin:clamp(32px,5vh,48px) auto 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,48px);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.form-grid .field--full{grid-column:1/-1}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-size:0.8125rem;font-weight:600;
  color:var(--ink);letter-spacing:0.02em;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  padding:12px 16px;
  border:2px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--ink);
  font-size:0.9375rem;
  transition:border-color 240ms,box-shadow 240ms;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(178,45,45,0.08);
  outline:none;
}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:auto}

.field input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:auto;
  width:18px;height:18px;
  min-width:18px;min-height:18px;
  padding:0;border:0;margin:2px 0 0;
  accent-color:var(--accent);
}
.field-check{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.8125rem;color:var(--ink-soft);
  line-height:1.5;
  cursor:pointer;
}
.field-check a{text-decoration:underline;color:var(--accent)}

.form-submit{
  margin-top:24px;
  width:100%;
  padding:16px;
  font-size:1rem;
}
@media(min-width:641px){.form-submit{width:auto;min-width:200px}}
.honeypot{position:absolute;left:-9999px;opacity:0}

/* ============================================================
   SON NOTLAR (Latest news block)
   ============================================================ */
.notlar{
  padding:clamp(48px,6vh,72px) 0;
  border-top:1px solid var(--line);
}
.notlar__list{
  margin-top:20px;
  display:flex;flex-direction:column;gap:14px;
}
.notlar__item{
  display:flex;align-items:baseline;gap:16px;
  font-size:0.9375rem;
}
.notlar__date{
  font-family:'Consolas','Courier New',monospace;
  font-size:0.8125rem;color:var(--accent-2);
  white-space:nowrap;flex-shrink:0;
}
.notlar__text{color:var(--ink-soft)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,0.65);
  padding:clamp(48px,8vh,80px) 0 clamp(56px,8vh,80px);
}
.footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:clamp(24px,4vw,48px);
  margin-bottom:clamp(32px,5vh,56px);
}
.footer__brand{
  font-family:var(--font-heading);font-style:italic;
  font-size:1.5rem;color:#fff;
  margin-bottom:14px;
}
.footer__brand span{color:var(--accent-2)}
.footer__desc{font-size:0.875rem;max-width:320px;line-height:1.7}
.footer__heading{
  font-family:var(--font-body);font-style:normal;
  font-size:0.8125rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  margin-bottom:16px;
}
.footer__links{display:flex;flex-direction:column;gap:10px}
.footer__links a{
  font-size:0.875rem;color:rgba(255,255,255,0.65);
  transition:color 240ms,padding-left 240ms;
}
.footer__links a:hover{color:var(--accent-2);padding-left:4px}
.footer__contact-item{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.875rem;margin-bottom:10px;
}
.footer__contact-item svg{
  width:16px;height:16px;flex-shrink:0;margin-top:3px;
  color:var(--accent-2);
}
.footer__contact-item a{color:rgba(255,255,255,0.65)}
.footer__contact-item a:hover{color:var(--accent-2)}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:clamp(16px,3vh,28px);
  display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:center;
  gap:12px;
  font-size:0.75rem;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 18px}
.footer__legal a{color:rgba(255,255,255,0.4);transition:color 240ms}
.footer__legal a:hover{color:var(--accent-2)}
.footer__vkn{color:rgba(255,255,255,0.3);font-size:0.6875rem}
@media(max-width:768px){
  .footer__grid{grid-template-columns:1fr}
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner{
  position:fixed;
  bottom:16px;left:16px;right:16px;
  max-width:520px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,28px);
  box-shadow:var(--shadow-lg);
  z-index:9999;
  transform:translateY(140%);
  opacity:0;
  transition:transform 280ms cubic-bezier(.2,.7,.2,1),opacity 240ms;
}
.cookie-banner.is-visible{
  transform:translateY(0);opacity:1;
}
.cookie-banner__title{
  font-family:var(--font-heading);font-style:italic;
  font-size:1.125rem;margin-bottom:8px;
}
.cookie-banner__text{
  font-size:0.8125rem;color:var(--ink-soft);
  line-height:1.6;margin-bottom:16px;
}
.cookie-banner__text a{text-decoration:underline}
.cookie-banner__buttons{
  display:flex;gap:10px;flex-wrap:wrap;
}
.cookie-banner__buttons button{
  flex:1;min-width:100px;min-height:44px;
  padding:10px 16px;
  font-size:0.8125rem;font-weight:600;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background 240ms,color 240ms,border-color 240ms;
}
.cookie-btn-accept{
  background:var(--accent);color:var(--surface);border:2px solid var(--accent);
}
.cookie-btn-accept:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.cookie-btn-reject{
  background:var(--surface);color:var(--ink);border:2px solid var(--ink);font-weight:700;
}
.cookie-btn-reject:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.cookie-btn-settings{
  background:transparent;color:var(--ink-soft);border:2px solid var(--line);
}
.cookie-btn-settings:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-strong)}
@media(max-width:639px){
  .cookie-banner{bottom:0;left:0;right:0;max-width:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding-bottom:max(env(safe-area-inset-bottom),20px)}
  .cookie-banner__buttons{flex-direction:column}
  .cookie-banner__buttons button{flex:none;width:100%;min-height:48px}
}
@media(min-width:640px){
  .cookie-banner{left:24px;right:auto;max-width:420px}
}
@media(min-width:640px){}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 480ms cubic-bezier(.2,.7,.2,1),
             transform 480ms cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 45ms);
  animation:auto-reveal 480ms cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(0.04s + var(--i,0) * 45ms);
}
@keyframes auto-reveal{
  to{opacity:1;transform:translateY(0)}
}
.reveal.is-in{opacity:1;transform:none;animation:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}
}
html.no-js .reveal{opacity:1;transform:none;animation:none}

/* ============================================================
   NICHE ANIMATIONS — Goalkeeper
   ============================================================ */

/* 1. Goal-net mesh on stats bg — already in .stats::before */

/* 2. Diving save tilt on card hover */
.metod__card:hover{
  transform:translateY(-6px) rotate(-0.5deg);
  box-shadow:0 16px 48px -16px rgba(178,45,45,0.18);
}

/* 3. Ball float for decorative elements */
@keyframes ball-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.gold-rule svg{animation:ball-float 5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.gold-rule svg{animation:none}}

/* 4. Reflex flash on counter reveal */
@keyframes reflex-flash{
  0%{opacity:0;transform:scale(0.85)}
  60%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}
.stat.is-in .stat__number{
  animation:reflex-flash 700ms cubic-bezier(.2,.7,.2,1) forwards;
}
@media(prefers-reduced-motion:reduce){
  .stat.is-in .stat__number{animation:none}
}

/* 6. Goalkeeper dive on pricing card hover */
.pricing__card{transition:transform 360ms cubic-bezier(.2,.7,.2,1),box-shadow 360ms}
.pricing__card:hover{
  transform:translateY(-8px) rotate(-0.3deg);
  box-shadow:0 18px 48px -16px rgba(178,45,45,0.2);
}

/* 7. Featured pricing card accent pulse */
@keyframes accent-pulse{
  0%,100%{border-color:var(--accent)}
  50%{border-color:var(--accent-2)}
}
.pricing__card.is-featured.is-in{
  animation:accent-pulse 4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  .pricing__card.is-featured.is-in{animation:none;border-color:var(--accent)}
}

/* 8. Testimonial hover tilt */
.testimonial:hover{
  transform:translateY(-5px) rotate(0.3deg);
  box-shadow:0 14px 36px -12px rgba(45,31,20,0.14);
}

/* 9. FAQ summary hover slide */
.faq-item summary{
  transition:color 240ms,padding-left 280ms cubic-bezier(.2,.7,.2,1);
}
.faq-item summary:hover{
  padding-left:8px;
}

/* 10. Channel card goalkeeper-dive hover */
.channel-card:hover{
  transform:translateY(-4px) rotate(-0.2deg);
  box-shadow:0 12px 36px -12px rgba(45,31,20,0.12);
}

/* 11. Hero CTA glow pulse */
@keyframes cta-glow{
  0%,100%{box-shadow:0 6px 24px -8px rgba(178,45,45,0.35)}
  50%{box-shadow:0 8px 32px -6px rgba(178,45,45,0.5)}
}
.hero__cta{animation:cta-glow 3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hero__cta{animation:none}}

/* 5. Save-reach for hero title letters */
@keyframes save-reach{
  from{transform:translateY(10px) rotate(0.8deg)}
  to{transform:none}
}
.hero__title .char{
  display:inline-block;
  animation:save-reach 420ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--ci,0) * 18ms);
}
@media(prefers-reduced-motion:reduce){
  .hero__title .char{animation:none;transform:none}
}

/* 12. Stagger-reveal with goalkeeper "dive" direction — cards enter from alternating sides */
.metod__card:nth-child(odd).reveal{
  transform:translateX(-18px) translateY(18px);
}
.metod__card:nth-child(even).reveal{
  transform:translateX(18px) translateY(18px);
}
.metod__card.reveal.is-in{transform:none}
@media(prefers-reduced-motion:reduce){
  .metod__card:nth-child(odd).reveal,
  .metod__card:nth-child(even).reveal{transform:none}
}

/* 13. Surec timeline dot pulse on reveal */
@keyframes dot-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(178,45,45,0.4)}
  50%{box-shadow:0 0 0 6px rgba(178,45,45,0)}
}
.surec__step.is-in::before{
  animation:dot-pulse 2s ease-in-out 1;
}
@media(prefers-reduced-motion:reduce){
  .surec__step.is-in::before{animation:none}
}

/* 14. Testimonial quote mark float */
@keyframes quote-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.testimonial:hover::before{
  animation:quote-float 2s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  .testimonial:hover::before{animation:none}
}

/* 15. Button press ripple (goalkeeper glove catch) */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(255,255,255,0.2) 0%,transparent 60%);
  opacity:0;
  transition:opacity 300ms;
  pointer-events:none;
}
.btn-primary:hover::after{opacity:1}

/* 16. Card hover border glow for goalkeeper net feel */
.metod__card:hover::before{
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));
  background-size:200% 100%;
  animation:stripe-slide 1.5s linear infinite;
}
@keyframes stripe-slide{
  0%{background-position:0 0}
  100%{background-position:200% 0}
}
@media(prefers-reduced-motion:reduce){
  .metod__card:hover::before{animation:none;background:var(--accent-2)}
}

/* 17. Footer link hover slide-in */
.footer__links a{position:relative}
.footer__links a::before{
  content:'';position:absolute;left:-12px;top:50%;
  width:6px;height:2px;background:var(--accent-2);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left;
  transition:transform 240ms cubic-bezier(.2,.7,.2,1);
}
.footer__links a:hover::before{transform:translateY(-50%) scaleX(1)}

/* 18. Channel card icon subtle rotation on hover */
.channel-card:hover .channel-card__icon{
  transform:scale(1.08) rotate(-4deg);
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
}
.channel-card__icon{transition:transform 320ms cubic-bezier(.2,.7,.2,1)}

@media(prefers-reduced-motion:reduce){
  .btn-primary::after{display:none}
  .footer__links a::before{display:none}
  .channel-card:hover .channel-card__icon{transform:none}
}

/* 19. Stagger-reveal for pricing cards — diagonal dive */
.pricing__card:nth-child(1).reveal{transform:translateX(-12px) translateY(22px)}
.pricing__card:nth-child(2).reveal{transform:translateY(22px)}
.pricing__card:nth-child(3).reveal{transform:translateX(12px) translateY(22px)}
.pricing__card.reveal.is-in{transform:none}
@media(prefers-reduced-motion:reduce){
  .pricing__card:nth-child(1).reveal,
  .pricing__card:nth-child(2).reveal,
  .pricing__card:nth-child(3).reveal{transform:none}
}

/* 20. Testimonials stagger — alternate entrance */
.testimonial:nth-child(odd).reveal{transform:translateX(-14px) translateY(18px)}
.testimonial:nth-child(even).reveal{transform:translateX(14px) translateY(18px)}
.testimonial.reveal.is-in{transform:none}
@media(prefers-reduced-motion:reduce){
  .testimonial:nth-child(odd).reveal,
  .testimonial:nth-child(even).reveal{transform:none}
}

/* 21. Surec step entrance — slide from left with stagger */
.surec__step.reveal{transform:translateX(-18px) translateY(16px);opacity:0}
.surec__step.reveal.is-in{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
  .surec__step.reveal{transform:none;opacity:1}
}

/* 22. Hikaye block entrance — slide from timeline */
.hikaye__block.reveal{transform:translateX(-20px) translateY(14px);opacity:0}
.hikaye__block.reveal.is-in{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
  .hikaye__block.reveal{transform:none;opacity:1}
}

/* 23. Goalkeeper glove-catch on stat counters */
@keyframes stat-catch{
  0%{transform:scale(0.8) translateY(12px);opacity:0}
  50%{transform:scale(1.06) translateY(-4px);opacity:1}
  70%{transform:scale(0.97) translateY(1px)}
  100%{transform:scale(1) translateY(0);opacity:1}
}
.stat.reveal.is-in{animation:stat-catch 600ms cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0) * 100ms)}
@media(prefers-reduced-motion:reduce){.stat.reveal.is-in{animation:none}}

/* 24. Golden glow on the gold rule divider */
@keyframes gold-shimmer{
  0%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}
  50%{filter:brightness(1.2) drop-shadow(0 0 8px rgba(201,168,76,0.3))}
}
.gold-rule svg{animation:ball-float 5s ease-in-out infinite,gold-shimmer 4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.gold-rule svg{animation:none}}

/* 25. FAQ item smooth border highlight */
.faq-item{transition:border-color 240ms}
.faq-item:hover{border-color:var(--accent-2)}
.faq-item[open]{border-color:var(--accent)}

/* 26. Musaitlik availability card pulse border */
@keyframes avail-pulse{
  0%,100%{border-color:var(--accent-2)}
  50%{border-color:var(--accent);box-shadow:0 0 24px -8px rgba(178,45,45,0.15)}
}
.musaitlik{animation:avail-pulse 4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.musaitlik{animation:none;border-color:var(--accent-2)}}

/* 27. Contact channel card icon hover glow */
.channel-card__icon{transition:transform 320ms cubic-bezier(.2,.7,.2,1),box-shadow 320ms}
.channel-card:hover .channel-card__icon{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 4px 16px -4px rgba(178,45,45,0.2);
}

/* 28. Smooth scroll for pricing featured card highlight */
.pricing__card.is-featured{transition:transform 360ms cubic-bezier(.2,.7,.2,1),box-shadow 360ms,border-color 1s ease-in-out}

/* 29. Hero trust badges stagger-in */
.hero__trust span{
  opacity:0;
  transform:translateY(8px);
  animation:trust-in 400ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__trust span:nth-child(1){animation-delay:800ms}
.hero__trust span:nth-child(2){animation-delay:900ms}
.hero__trust span:nth-child(3){animation-delay:1000ms}
.hero__trust span:nth-child(4){animation-delay:1100ms}
@keyframes trust-in{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero__trust span{opacity:1;transform:none;animation:none}
}

/* ============================================================
   TABLES — scroll wrapper
   ============================================================ */
.table-scroll{
  display:block;width:100%;max-width:100%;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:6px;
}
.table-scroll > table{margin:0 !important;min-width:480px;width:100%}
:where(*:has(> .table-scroll),*:has(> * > .table-scroll),*:has(> * > * > .table-scroll)){min-width:0}

table{border-collapse:collapse;width:100%}
th,td{padding:12px 16px;text-align:left;font-size:0.875rem}
th{
  background:var(--surface-2);
  font-weight:600;font-size:0.75rem;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-soft);
}
td{border-bottom:1px solid var(--line)}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero{
  padding:clamp(120px,16vh,180px) 0 clamp(48px,6vh,80px);
  background:var(--ink);
  color:#fff;text-align:center;
}
.contact-hero .eyebrow{color:var(--accent-2)}
.contact-hero h1{color:#fff;margin-bottom:12px}
.contact-hero p{color:rgba(255,255,255,0.65);max-width:480px;margin:0 auto}

.contact-channels{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2vw,24px);
  margin-top:clamp(32px,5vh,56px);
}
.channel-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:clamp(20px,3vw,28px);
  transition:transform 360ms cubic-bezier(.2,.7,.2,1),box-shadow 360ms;
  display:flex;flex-direction:column;gap:10px;
}
.channel-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.channel-card__icon{
  width:48px;height:48px;
  border-radius:50%;
  background:rgba(178,45,45,0.08);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
}
.channel-card__icon svg{width:22px;height:22px}
.channel-card__label{font-weight:600;font-size:0.9375rem}
.channel-card__value{color:var(--ink-soft);font-size:0.875rem}
.channel-card__value a{
  color:var(--ink);word-break:break-all;
  transition:color 240ms;
}
.channel-card__value a:hover{color:var(--accent)}
.channel-card__sub{font-size:0.75rem;color:var(--ink-soft)}

.hours-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:8px;margin-top:8px;
}
.hours-day{
  padding:10px 12px;
  background:var(--bg);border-radius:var(--radius);
  font-variant-numeric:tabular-nums;
  font-size:0.8125rem;
}
.hours-day strong{display:block;font-size:0.6875rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}

/* ============================================================
   POLICY / INNER PAGES
   ============================================================ */
.page-hero{
  padding:clamp(120px,14vh,160px) 0 clamp(32px,4vh,56px);
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.page-content{padding:clamp(40px,6vh,72px) 0}
.page-content h2{margin-top:clamp(32px,4vh,48px);margin-bottom:16px}
.page-content h3{margin-top:24px;margin-bottom:12px;font-size:1.125rem}
.page-content p{
  color:var(--ink-soft);margin-bottom:16px;
  max-width:720px;
}
.page-content ul{
  margin-bottom:16px;padding-left:20px;
}
.page-content ul li{
  position:relative;padding-left:16px;
  color:var(--ink-soft);margin-bottom:8px;
  font-size:0.9375rem;
}
.page-content ul li::before{
  content:'';position:absolute;left:0;top:10px;
  width:5px;height:5px;border-radius:50%;
  background:var(--accent-2);
}

/* ============================================================
   THANK YOU
   ============================================================ */
.thankyou{
  min-height:60vh;display:flex;align-items:center;
  text-align:center;padding:clamp(80px,12vh,140px) 0;
}
.thankyou h1{margin-bottom:16px}
.thankyou p{color:var(--ink-soft);margin-bottom:32px;max-width:480px;margin-left:auto;margin-right:auto}

/* ============================================================
   404
   ============================================================ */
.not-found{
  min-height:60vh;display:flex;align-items:center;
  text-align:center;padding:clamp(80px,12vh,140px) 0;
}
.not-found h1{font-size:clamp(5rem, 12vw, 4.5rem);color:var(--accent);margin-bottom:8px}
.not-found p{color:var(--ink-soft);margin-bottom:32px;max-width:400px;margin-left:auto;margin-right:auto}

/* ============================================================
   SITEMAP PAGE
   ============================================================ */
.sitemap-list{
  columns:2;gap:32px;margin-top:24px;
}
.sitemap-list a{
  display:block;padding:6px 0;
  font-size:0.9375rem;
}
@media(max-width:480px){.sitemap-list{columns:1}}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .site-header,.drawer,.drawer-backdrop,.cookie-banner,.nav-toggle{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero{min-height:auto;padding:40px 0}
  .hero__bg{display:none}
  .hero__title{color:#000}
  .hero__sub,.hero__eyebrow{color:#333}
  .reveal{opacity:1 !important;transform:none !important}
  a{color:#000;text-decoration:underline}
  .section-pad{padding:24px 0}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ≤1280px */
@media(max-width:1280px){
  :root{--container:960px}
}

/* ≤1024px — tablet */
@media(max-width:1024px){
  :root{--header-h:68px}
}

/* ≤768px — small tablet */
@media(max-width:768px){
  .hero__title{font-size:clamp(2.2rem, 8vw, 3.2rem)}
  .hero__trust{gap:12px}
  .hero__trust span{font-size:0.75rem}
  .pricing__grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
  .metod__grid{grid-template-columns:1fr}
  .testimonials__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:32px}
}

/* ≤640px — large phone */
@media(max-width:640px){
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .form-grid{grid-template-columns:1fr}
  .form-submit{width:100%}
  .hero__overlay{padding-top:clamp(60px,8vh,100px);padding-bottom:clamp(32px,4vh,48px)}
  .hero__trust{flex-direction:column;gap:8px}
  .hero__trust span{font-size:0.75rem}
  .sitemap-list{columns:1}
  .table-scroll{margin-left:calc(-1 * var(--container-pad));margin-right:calc(-1 * var(--container-pad));padding:0 var(--container-pad);border:none;border-radius:0}
}

/* ≤430px — standard phone */
@media(max-width:430px){
  body{font-size:0.9375rem}
  h2{font-size:1.75rem}
  .metod__card,.pricing__card,.testimonial,.form-wrap,.channel-card{
    padding:20px;
  }
  .metod__icon{width:44px;height:44px}
  .metod__icon svg{width:22px;height:22px}
  .surec__timeline{padding-left:36px}
}

/* ≤390px */
@media(max-width:390px){
  :root{--container-pad:16px}
  .hero__title{font-size:2rem}
}

/* ≤360px — small phone */
@media(max-width:360px){
  .hero__cta{padding:14px 28px;font-size:0.9375rem}
  .pricing__price{font-size:1.5rem}
}

/* ── Hakkimizda page grids ─────────────────────────────────── */
.about-founder{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:clamp(24px,4vw,48px);
  align-items:start;
  margin-bottom:clamp(48px,6vh,80px);
}
.about-founder__photo{
  aspect-ratio:3/4;
  background:var(--surface-2);
  border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:0.8125rem;
}
.about-team{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,32px);
}
.about-team__card{
  padding:clamp(24px,3vw,36px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:transform 360ms cubic-bezier(.2,.7,.2,1),box-shadow 360ms;
}
.about-team__card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.about-team__avatar{
  width:72px;height:72px;
  border-radius:50%;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-style:italic;
  font-size:1.5rem;color:var(--accent);
  margin-bottom:16px;
}
.musaitlik{
  padding:clamp(24px,3vw,36px);
  background:var(--surface);
  border:2px solid var(--accent-2);
  border-radius:var(--radius-lg);
  text-align:center;
  margin-top:clamp(48px,6vh,80px);
}
@media(max-width:768px){
  .about-founder{grid-template-columns:1fr}
}
@media(max-width:640px){
  .about-team{grid-template-columns:1fr}
}

/* Word breaks */
.break-word{word-break:break-word;overflow-wrap:anywhere}

/* Smooth scroll offset for anchors */
:target{scroll-margin-top:calc(var(--header-h) + 24px)}

/* Main padding for fixed header */
main{padding-top:var(--header-h)}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9998;transition:width 80ms linear;pointer-events:none}

/* iletisim-form-responsive-guard v2 */
main form, .form-section form, .contact-form, .iletisim-form, form#contact-form, form[id*="iletisim"], form[class*="iletisim"], form[class*="contact"] {
  display: block;
  max-width: 720px;
  margin: 24px auto;
  padding: clamp(20px, 4vw, 36px);
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(127,127,127,0.18));
  border-radius: 16px;
  box-shadow: 0 8px 32px -12px rgba(0,0,0,0.25);
  box-sizing: border-box;
}
main form .form-grid,
main form > .grid,
.contact-form .form-grid,
form[class*="contact"] .form-grid,
form[class*="iletisim"] .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  width: 100%;
}
@media (max-width: 640px) {
  main form .form-grid,
  main form > .grid,
  .contact-form .form-grid,
  form[class*="contact"] .form-grid,
  form[class*="iletisim"] .form-grid {
    grid-template-columns: 1fr;
  }
}
main form .form-grid > .field-full,
main form .form-grid > .col-full,
main form .form-grid > [class*="full"] {
  grid-column: 1 / -1;
}
main form .field, main form label,
.contact-form .field, .contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
main form input[type="text"],
main form input[type="email"],
main form input[type="tel"],
main form input[type="number"],
main form input[type="date"],
main form input[type="url"],
main form input[type="search"],
main form input:not([type]),
main form select,
main form textarea,
.contact-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
.contact-form select,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  min-height: 44px;
  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;
  border: 1px solid var(--line, rgba(127,127,127,0.22));
  border-radius: 10px;
  background: var(--input-bg, rgba(0,0,0,0.04));
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
main form textarea, .contact-form textarea {
  min-height: 120px;
  resize: vertical;
}
main form input:focus, main form select:focus, main form textarea:focus,
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 2px solid var(--accent, #5a8dee);
  outline-offset: 1px;
  border-color: transparent;
}
main form .checkbox, main form label.checkbox,
.contact-form .checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}
main form input[type="checkbox"], main form input[type="radio"],
.contact-form input[type="checkbox"], .contact-form input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent, #5a8dee);
}
main form button[type="submit"],
main form input[type="submit"],
main form .btn-submit,
.contact-form button[type="submit"],
.contact-form .btn-submit {
  width: 100%;
  min-height: 48px;
  padding: 14px 28px;
  background: var(--accent, #5a8dee);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 8px;
  transition: filter 200ms ease, transform 120ms ease;
}
@media (min-width: 640px) {
  main form button[type="submit"],
  main form input[type="submit"],
  .contact-form button[type="submit"] {
    width: auto;
    min-width: 220px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
main form button[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
  filter: brightness(1.05);
}
main form button[type="submit"]:active,
.contact-form button[type="submit"]:active {
  transform: translateY(1px);
}


/* honeypot-hide */
.form-honeypot, input[name="web_site"], input[name="honeypot"], input[name="hp_url"], input[name="trap"], input[aria-hidden="true"][tabindex="-1"] {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* form-reveal-opacity-fix */
main form.reveal, .form-section form.reveal, .contact-form.reveal, form[id*='iletisim'].reveal, form[class*='contact'].reveal { opacity: 1 !important; transform: none !important; translate: none !important; }
main form, .form-section form, .contact-form, form[id*='iletisim'], form[class*='contact'] { opacity: 1 !important; }

/* consent-checkbox-inline-fix */
main form label.checkbox, main form .form-checkbox, main form .consent, main form .kvkk, .contact-form label.checkbox, .contact-form .checkbox-group { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; font-size: 14px !important; line-height: 1.5 !important; flex-wrap: nowrap !important; }
main form label.checkbox span, main form label.checkbox a, main form .form-checkbox span, main form .form-checkbox a, .contact-form label.checkbox span, .contact-form label.checkbox a { display: inline !important; flex: 1 1 auto; }
main form label.checkbox input[type='checkbox'], main form .form-checkbox input[type='checkbox'] { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; margin-top: 3px !important; }


/* contacts-grid-v2 */
/* Contact cards in responsive grid */
.contact-grid, .contacts-grid, .iletisim-grid, .contact-cards, .contact-cards-grid,
.contact-list, main .contact-wrap, section[id*="iletisim"] > .container > div:has(> .contact-card) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .contact-grid, .contacts-grid, .iletisim-grid, .contact-cards, .contact-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 720px) {
  .contact-grid, .contacts-grid, .iletisim-grid, .contact-cards, .contact-cards-grid {
    grid-template-columns: 1fr !important;
  }
}
.contact-card { min-height: 0; box-sizing: border-box; }

/* Checkbox row alignment — override .field-checkbox column layout */
form .field.field-checkbox,
form .field-checkbox,
form .checkbox-field,
form .form-field--checkbox,
form .form-row--checkbox,
form .kvkk-field,
form .consent-field,
.contact-form .field.field-checkbox {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100%;
}
form .field.field-checkbox > input[type="checkbox"],
form .field-checkbox > input[type="checkbox"],
form .checkbox-field > input[type="checkbox"],
form .kvkk-field > input[type="checkbox"],
form .consent-field > input[type="checkbox"] {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 3px 0 0 0 !important;
  accent-color: var(--accent, currentColor);
}
form .field.field-checkbox > label,
form .field-checkbox > label,
form .checkbox-field > label,
form .kvkk-field > label,
form .consent-field > label {
  flex: 1 1 auto !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: inline !important;
  cursor: pointer;
}
form .field.field-checkbox > label a,
form .field-checkbox > label a {
  text-decoration: underline;
}

/* field-full inside form grid spans both columns */
form .form-grid > .field-full,
form .form-grid > .field.field-full,
form .form-grid > .col-full,
form .form-grid > .full,
form .form-grid > [class*="--full"] {
  grid-column: 1 / -1;
}