/* ============================================================
   KÖKLER PEYZAJ — Design tokens
   Display: Poppins (geometric, modern, full Turkish support)
   Body:    Poppins (clean, readable, latin-ext)
   Utility: Poppins (labels / eyebrows, letter-spaced caps)
   ============================================================ */
:root{
  --forest:   #1F3D2B;   /* deep forest — nav, footer, dark surfaces */
  --moss:     #4B7051;   /* primary accent — buttons, links, icons */
  --sage-bg:  #F4F1E4;   /* warm sage-ivory — page background */
  --cream:    #FBF9F1;   /* card surfaces, lighter than bg */
  --clay:     #C1703F;   /* warm clay — secondary accent, CTAs */
  --ink:      #23261F;   /* body text */
  --ink-soft: #5B5F52;   /* muted text */
  --line:     #DAD5C2;   /* hairline borders */

  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;
  --font-mono: "Poppins", "Segoe UI", sans-serif;
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  background: var(--sage-bg);
  color: var(--ink);
  line-height: 1.6;
}

h1,h2,h3,h4, .display{
  font-family: var(--font-display);
  color: var(--forest);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--clay);
}

a{ color: var(--moss); text-decoration:none; }
a:hover{ color: var(--forest); }

::selection{ background: var(--moss); color: var(--cream); }

/* Visible keyboard focus, always */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Navbar ---------------- */
.navbar-kokler{
  background: transparent;
  padding: 1.4rem 0;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.navbar-kokler.is-scrolled{
  background: var(--forest);
  padding: 0.7rem 0;
  box-shadow: 0 6px 24px rgba(31,61,43,0.18);
}
.navbar-kokler .navbar-brand{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-display);
  font-weight:600; font-size:1.35rem;
  color: var(--cream);
}
.navbar-kokler.is-scrolled .navbar-brand{ color: var(--cream); }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand-mark path{ stroke: #BFD6C1; }
.navbar-kokler.is-scrolled .brand-mark path{ stroke: #BFD6C1; }

.navbar-kokler .nav-link{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(251,249,241,0.85);
  margin: 0 0.5rem;
  padding: .4rem 0 !important;
  border-bottom: 1px solid transparent;
}
.navbar-kokler.is-scrolled .nav-link{ color: rgba(251,249,241,0.85); }

/* Mobile toggler — visible on the dark transparent bar */
.navbar-kokler .navbar-toggler{
  border-color: rgba(251,249,241,0.4);
}
.navbar-kokler .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(251,249,241,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-kokler .nav-link:hover, .navbar-kokler .nav-link.active{
  color: var(--clay);
  border-bottom-color: var(--clay);
}

.navbar-kokler .btn-nav-cta{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  background: var(--moss);
  color: var(--cream);
  border-radius: 2px;
  padding: .55rem 1.1rem;
}
.navbar-kokler .btn-nav-cta:hover{ background: var(--forest); color:#fff; }

/* ---------------- Buttons ---------------- */
.btn-clay{
  background: var(--clay); color:#fff; border:none;
  font-family: var(--font-mono); font-size:.85rem; letter-spacing:.05em;
  padding: .75rem 1.6rem; border-radius: 2px;
  transition: transform .2s ease, background .2s ease;
}
.btn-clay:hover{ background:#A85D32; color:#fff; transform: translateY(-2px); }

.btn-outline-forest{
  border: 1px solid var(--forest); color: var(--forest);
  font-family: var(--font-mono); font-size:.85rem; letter-spacing:.05em;
  padding: .7rem 1.5rem; border-radius: 2px;
  background: transparent;
}
.btn-outline-forest:hover{ background: var(--forest); color:#fff; }

/* ---------------- Hero ---------------- */
.hero{
  position: relative;
  padding: 9rem 0 6rem;
  overflow: hidden;
  background: var(--forest);
  color: var(--cream);
}
.hero .eyebrow{ color:#BFD6C1; }
.hero h1{ color:#fff; font-size: clamp(2.4rem, 5vw, 4rem); }
.hero p.lead{ color: rgba(251,249,241,0.82); max-width: 46ch; }
.hero-blob{
  position:absolute; right:-8%; top:-15%; width: 620px; max-width: 65vw; opacity:.9;
}
.hero-root-line{ position:absolute; left:0; bottom:-2px; width:100%; height:auto; }

/* Organic clipped image — icindeki <img> arama motorlarinca indekslenebilir */
.organic-frame{
  clip-path: path("M0,60 C0,20 40,0 120,0 L 380,0 C 440,0 460,40 460,90 L 460,340 C 460,390 420,420 360,420 L 80,420 C 20,420 0,390 0,330 Z");
  overflow:hidden;
  aspect-ratio: 460/420;
  background-size: cover;
  background-position:center;
}
.organic-frame picture{ display:block; width:100%; height:100%; }
.organic-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------- Root divider (signature motif) ---------------- */
.root-divider{ width:100%; height:64px; display:block; }
.root-divider path{
  fill:none; stroke: var(--moss); stroke-width:2;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.4s ease;
}
.root-divider.in-view path{ stroke-dashoffset: 0; }
.section-sage{ background: var(--sage-bg); }
.section-cream{ background: var(--cream); }
.section-forest{ background: var(--forest); color: var(--cream); }
.section-forest h2, .section-forest h3{ color:#fff; }

/* ---------------- Section rhythm ---------------- */
section.block{ padding: 5.5rem 0; }
.section-head{ max-width: 640px; margin-bottom: 3rem; }

/* ---------------- Service / info cards ---------------- */
.card-kokler{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2.2rem 1.8rem;
  height:100%;
  transition: box-shadow .25s ease, transform .25s ease;
}
.card-kokler:hover{ box-shadow: 0 14px 32px rgba(31,61,43,0.12); transform: translateY(-4px); }
.card-kokler .icon-wrap{
  width:52px;height:52px;border-radius:50%;
  background: rgba(75,112,81,0.12);
  display:flex;align-items:center;justify-content:center;
  color: var(--moss); font-size:1.35rem;
  margin-bottom:1.2rem;
}

/* ---------------- Process (real sequence, numbering justified) ---------------- */
.process-step{ display:flex; gap:1.4rem; }
.process-num{
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--moss);
  opacity:.55;
  line-height:1;
  flex-shrink:0;
  min-width: 2.6ch;
}

/* ---------------- Stats ---------------- */
.stat-num{
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--clay);
  font-weight:600;
}
.stat-label{ font-family: var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); }

/* ---------------- Footer ---------------- */
footer.footer-kokler{
  background: var(--forest);
  color: rgba(251,249,241,0.75);
  padding: 3.5rem 0 2rem;
}
footer.footer-kokler a{ color: rgba(251,249,241,0.8); }
footer.footer-kokler a:hover{ color:#fff; }
footer.footer-kokler h6{
  font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; color:#BFD6C1;
}
footer.footer-kokler hr{ border-color: rgba(251,249,241,0.15); }

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero{
  background: var(--forest); color: var(--cream);
  padding: 7.5rem 0 4rem;
}
.page-hero h1{ color:#fff; }

/* ---------------- Forms ---------------- */
.form-kokler label{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft);
  margin-bottom:.35rem;
}
.form-kokler .form-control{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .7rem .9rem;
}
.form-kokler .form-control:focus{
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(75,112,81,0.15);
}
#formFeedback{ display:none; }

/* ---------------- Misc ---------------- */
.badge-clay{
  background: rgba(193,112,63,0.14); color: var(--clay);
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius: 2px;
}

.map-frame{ border:1px solid var(--line); border-radius:3px; overflow:hidden; }

/* Klavye kullanıcıları için içeriğe atlama bağlantısı */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background: var(--clay); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 3px 0;
}
.skip-link:focus{ left:0; color:#fff; }

/* Panelden yüklenen logo */
.brand-logo{ height:38px; width:auto; display:block; }

/* Koyu zeminde ikincil buton */
.btn-outline-forest.btn-on-dark{ border-color:#BFD6C1; color:#fff; }
.btn-outline-forest.btn-on-dark:hover{ background:#fff; color: var(--forest); }

/* ---------------- Proje kartları ---------------- */
.project-card{
  display:block; height:100%;
  background: var(--cream);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  color: inherit; text-decoration:none;
  transition: box-shadow .25s ease, transform .25s ease;
}
.project-card:hover{ box-shadow:0 14px 32px rgba(31,61,43,0.14); transform:translateY(-4px); color:inherit; }
.project-thumb{
  aspect-ratio: 4/3; overflow:hidden;
  background-color: var(--sage-bg);
}
.project-thumb picture{ display:block; width:100%; height:100%; }
.project-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s ease;
}
.project-card:hover .project-thumb img{ transform: scale(1.04); }
.project-body{ padding:1.4rem 1.4rem 1.6rem; }
.project-card h2, .project-card h3{ color: var(--forest); }

.project-hero-img{ border-radius:3px; overflow:hidden; }
.project-hero-img picture{ display:block; }
.project-hero-img img{ width:100%; height:auto; display:block; }

/* Kirinti yolu */
.crumb-list{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  padding:0; margin:0; align-items:center;
}
.crumb-list li + li::before{
  content:"/"; color:rgba(191,214,193,.55); margin-right:.5rem;
}
.crumb-current{ color:rgba(251,249,241,.7); }

.project-meta{
  background: var(--cream); border:1px solid var(--line); border-radius:3px; padding:1.8rem;
  position:sticky; top:100px;
}
.project-meta dt{
  font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; color: var(--ink-soft); font-weight:500;
}
.project-meta dd{ margin-bottom:1rem; color: var(--ink); }
.project-meta dd:last-child{ margin-bottom:0; }

.crumb{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:#BFD6C1;
}
.crumb:hover{ color:#fff; }
.page-hero-sm{ padding: 7rem 0 3rem; }

/* ---------------- Kategori filtresi ---------------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; }
.filter-chip{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.05em;
  border:1px solid var(--line); background: var(--cream); color: var(--ink-soft);
  padding:.45rem 1rem; border-radius:2px; transition: all .2s ease;
}
.filter-chip:hover{ border-color: var(--moss); color: var(--moss); }
.filter-chip.is-active{ background: var(--forest); border-color: var(--forest); color:#fff; }
.filter-count{ opacity:.6; margin-left:.25rem; }

/* ---------------- Galeri + büyütme ---------------- */
.gallery-item{ display:block; border-radius:3px; overflow:hidden; background: var(--sage-bg); }
.gallery-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition: transform .3s ease;
}
.gallery-item:hover img{ transform: scale(1.05); }

.lightbox{
  position:fixed; inset:0; z-index:1080;
  background: rgba(20,28,22,0.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:3rem 1.5rem; gap:1rem;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:min(1100px, 94vw); max-height:82vh; object-fit:contain; border-radius:3px; }
.lightbox-caption{ color:rgba(251,249,241,.85); font-size:.9rem; margin:0; text-align:center; }
.lightbox-close{
  position:absolute; top:1rem; right:1.4rem;
  background:none; border:none; color:#fff; font-size:2.6rem; line-height:1; cursor:pointer;
}

/* ---------------- Ekip fotoğrafı ---------------- */
.team-photo{
  width:96px; height:96px; border-radius:50%; object-fit:cover; display:block;
  border:3px solid rgba(75,112,81,.18);
}

/* ---------------- Boş durum ---------------- */
.empty-state{
  text-align:center; padding:4rem 1rem; color: var(--ink-soft);
  border:1px dashed var(--line); border-radius:3px; background: var(--cream);
}
.empty-state i{ font-size:2.4rem; display:block; margin-bottom:1rem; opacity:.5; }

/* ---------------- Form ---------------- */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-kokler .form-label{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color: var(--ink-soft); margin-bottom:.35rem;
}
.rich-text p{ margin-bottom:1.1rem; color: var(--ink); }
.rich-text p:last-child{ margin-bottom:0; }
.text-body-muted{ color: var(--ink-soft); }

/* ---------------- WhatsApp düğmesi ---------------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:1040;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; box-shadow:0 8px 22px rgba(0,0,0,.22);
  transition: transform .2s ease;
}
.wa-float:hover{ color:#fff; transform: scale(1.08); }

@media (max-width: 767px){
  .hero{ padding: 7.5rem 0 4rem; text-align:center; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .process-step{ text-align:left; }
  .project-meta{ position:static; }
  .wa-float{ width:48px; height:48px; font-size:1.5rem; right:16px; bottom:16px; }
}