/* ============================================================
   Bereketim — Sinematik Scroll-Scrub Sitesi
   Marka renkleri ve tipografi mevcut bereketim.com'dan alındı.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-900:#0F4C2A;
  --green-800:#1B5E20;
  --green-700:#2E7D32;
  --green-600:#388E3C;
  --green-500:#4CAF50;
  --green-400:#66BB6A;
  --green-100:#E8F5E9;
  --green-50:#F4FBF5;
  --wheat:#F4B12C;
  --wheat-soft:#FCEBC5;

  /* İşlevsel aksan paleti — her renk bir konuya karşılık gelir */
  --leaf:#2E7D32;   --leaf-2:#66BB6A;   --leaf-tint:#E8F5E9;   /* tarla / parsel */
  --sky:#0277BD;    --sky-2:#4FC3F7;    --sky-tint:#E1F5FE;    /* hava durumu   */
  --water:#00796B;  --water-2:#4DB6AC;  --water-tint:#E0F2F1;  /* sulama / su   */
  --amber:#E89B0F;  --amber-2:#F4B12C;  --amber-tint:#FFF6E0;  /* gübre / hasat */
  --soil:#B4693A;   --soil-2:#DFA277;   --soil-tint:#FBEEE6;   /* toprak        */
  --cream:#FAF7F0;
  --ink:#0F1A14;
  --muted:#5C6760;
  --line:#E5E9E2;
  --white:#FFFFFF;

  --shadow-sm:0 1px 2px rgba(15,76,42,.06);
  --shadow-md:0 8px 24px rgba(15,76,42,.08);
  --shadow-lg:0 24px 48px rgba(15,76,42,.16);
  --shadow-xl:0 40px 80px rgba(0,0,0,.35);

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:24px;
  --max:1200px;
  --nav-h:72px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* İnce grain dokusu — mevcut siteden korundu */
body::after {
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.35;
}

h1,h2,h3,h4 { line-height:1.1; color: var(--ink); font-weight:700; }
h1,h2 { font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-.02em; }
h3,h4 { font-family:'Plus Jakarta Sans',sans-serif; }
h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.25rem; }
p  { color: var(--muted); }
a  { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }

/* ============================ NAV ============================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }
.nav__logo { display:flex; align-items:center; gap:10px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.3rem; letter-spacing:-.02em; color:#fff; transition: color .4s var(--ease); }
.nav__logo img { width:36px; height:36px; }
.nav__links { display:flex; align-items:center; gap:30px; }
.nav__links a { font-size:.94rem; font-weight:500; color:rgba(255,255,255,.86); transition: color .3s var(--ease); }
.nav__links a:hover { color:#fff; }

.nav--solid { background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav--solid .nav__logo { color: var(--green-900); }
.nav--solid .nav__links a { color: var(--muted); }
.nav--solid .nav__links a:hover { color: var(--green-800); }
.nav--solid .btn--ghost { border-color: var(--green-700); color: var(--green-800); }
.nav--solid .btn--ghost:hover { background: var(--green-800); border-color: var(--green-800); color:#fff; }

.nav__toggle { display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; }
.nav__toggle span { display:block; width:22px; height:2px; margin:5px auto; background:#fff; transition: background .3s var(--ease); }
.nav--solid .nav__toggle span { background: var(--green-900); }

/* ============================ BUTONLAR ============================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 28px; border-radius: 999px; font-weight:700; font-size:.98rem;
  font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; border:2px solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--green-600); color:#fff; box-shadow: 0 8px 24px rgba(56,142,60,.32); }
.btn--solid:hover { background: var(--green-700); box-shadow: 0 12px 32px rgba(56,142,60,.42); }
.btn--wheat { background: var(--wheat); color: var(--ink); box-shadow: 0 8px 24px rgba(244,177,44,.32); }
.btn--wheat:hover { background:#e6a41f; }
/* Playbook 3.4: beyaz kenarlıklı, dolgusuz buton */
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.9); color:#fff; }
.btn--ghost:hover { background:#fff; color: var(--green-900); border-color:#fff; }
.btn--sm { padding: 10px 20px; font-size:.9rem; }
.btn__ico { width:20px; height:20px; flex:0 0 auto; display:block; }

/* ============================================================
   SCROLL-SCRUB BÖLÜMLERİ  (Playbook Bölüm 3)
   ============================================================ */
.scrub {
  position: relative;
  /* Bölüm yüksekliği JS/inline değişkenle ayarlanır — Playbook 3.5 / 3.6 */
  height: var(--scrub-h, 200vh);
  background: var(--ink);
}

/* Sticky sahne = "pinned" his (Playbook 3.5) */
.scrub__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
  /* Alttaki bölümün üstüne binmesini engelle — Playbook 4.6 z-index sorunu */
  z-index: 0;
}

.scrub__media { position:absolute; inset:0; }

/* Yükleme durumu: bulanık marka gradyanı — asla siyah kutu (Playbook 4.2) */
.scrub__placeholder {
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 55% at 30% 25%, rgba(244,177,44,.55), transparent 65%),
    radial-gradient(55% 60% at 75% 70%, rgba(76,175,80,.55), transparent 65%),
    linear-gradient(160deg, #123a22 0%, #1B5E20 45%, #2E7D32 100%);
  filter: blur(48px) saturate(1.15);
  transform: scale(1.08);
  transition: opacity .8s var(--ease);
}
.scrub.is-ready .scrub__placeholder { opacity: 0; }

/* 3 sn'den uzun sürerse nazik nabız animasyonu (Playbook 4.2) */
.scrub.is-slow .scrub__placeholder { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.72; } }

/* Kare dizisi canvas'a çizilir; "cover" hesabı JS içinde yapılır (Playbook 4.4) */
.scrub__canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  opacity: 0;
  transition: opacity .9s var(--ease);
  pointer-events: none;
}
.scrub.is-ready .scrub__canvas { opacity: 1; }

/* Okunabilirlik için koyu katman — Playbook 3.2, %35 */
.scrub__overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(9,20,13,.55) 0%, rgba(9,20,13,.28) 35%, rgba(9,20,13,.30) 65%, rgba(9,20,13,.70) 100%),
    rgba(9,20,13,.35);
}

/* --- Üst yazı ve CTA (Playbook 3.4) --- */
.scrub__content {
  position: relative; z-index: 2;
  width:100%; max-width: 940px; margin-inline:auto; padding: 0 24px;
  text-align:center; color:#fff;
  /* İlk %60 tam görünür, son %40'ta kaybol — JS bunu sürer (Playbook 4.6) */
  opacity: var(--text-opacity, 1);
  transform: translateY(calc((1 - var(--text-opacity, 1)) * 26px));
  will-change: opacity, transform;
}
.scrub__eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 16px; margin-bottom: 22px;
  border:1px solid rgba(255,255,255,.36); border-radius:999px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff;
}
.scrub__title {
  color:#fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); /* Playbook 3.4 */
  margin-bottom: 20px;
}
.scrub__title em { font-style: normal; color: var(--wheat); }
.scrub__sub {
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  max-width: 620px; margin: 0 auto 32px;
  text-shadow: 0 1px 16px rgba(0,0,0,.4);
}
.scrub__cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* --- Yükleniyor göstergesi (Playbook 4.2) --- */
.scrub__loader {
  position:absolute; z-index:3; left:50%; bottom:88px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: rgba(255,255,255,.82);
  transition: opacity .6s var(--ease);
}
.scrub.is-ready .scrub__loader { opacity:0; pointer-events:none; }
.scrub__spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.28); border-top-color:#fff;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Kaydırma ipucu --- */
.scrub__hint {
  position:absolute; z-index:3; left:50%; bottom:40px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7);
  opacity: var(--text-opacity, 1);
  transition: opacity .4s var(--ease);
}
.scrub__mouse { width:22px; height:34px; border:2px solid rgba(255,255,255,.6); border-radius:12px; position:relative; }
.scrub__mouse::after {
  content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:2px;
  background:rgba(255,255,255,.9); transform:translateX(-50%);
  animation: wheel 1.8s var(--ease) infinite;
}
@keyframes wheel { 0% { opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100% { opacity:0; transform:translate(-50%,12px);} }
.scrub.is-ready .scrub__loader + .scrub__hint { opacity: var(--text-opacity, 1); }

/* --- İlerleme çubuğu (Playbook 4.5) --- */
.scrub__progress {
  position:absolute; z-index:4; left:0; right:0; bottom:0; height:3px;
  background: rgba(255,255,255,.14);
}
.scrub__progress i {
  display:block; height:100%; width:0%;
  background: rgba(255,255,255,.6);          /* beyaz, %60 opaklık */
  transform-origin: left center;
  transition: background .3s var(--ease);
}
.scrub__progress.is-complete i { animation: barPulse .7s var(--ease) 1; background: rgba(255,255,255,.95); }
@keyframes barPulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* Kareler yüklenemezse (Playbook 4.1 fallback) */
.scrub.is-static .scrub__canvas { display:none; }
.scrub.is-static .scrub__placeholder { opacity:1 !important; animation:none; }
.scrub.is-static .scrub__loader { opacity:0; }
.scrub.is-static .scrub__progress { display:none; }

/* ============================================================
   İÇERİK BÖLÜMLERİ
   ============================================================ */
.section { position: relative; z-index: 1; padding: clamp(72px, 10vw, 128px) 0; background: var(--white); overflow:hidden; }
.section--cream { background: var(--cream); }
.section--mint  { background: var(--green-50); }
.section--dark  { background: var(--green-900); color:#fff; }

/* Arka planda yumuşak renk hüzmeleri — düz zeminleri canlandırır */
.section--glow::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(46% 52% at 8% 6%,  var(--glow-1, rgba(76,175,80,.16)), transparent 70%),
    radial-gradient(44% 48% at 94% 92%, var(--glow-2, rgba(244,177,44,.16)), transparent 70%);
}
.section--glow > .wrap { position:relative; z-index:1; }

.section--dark.section--glow::before {
  background:
    radial-gradient(50% 55% at 6% 4%,  rgba(76,175,80,.34), transparent 70%),
    radial-gradient(46% 50% at 96% 94%, rgba(244,177,44,.22), transparent 70%),
    radial-gradient(40% 45% at 78% 10%, rgba(79,195,247,.16), transparent 70%);
}
.section--dark h2, .section--dark h3 { color:#fff; }
.section--dark p { color: rgba(255,255,255,.76); }

.section__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head--center { margin-inline:auto; text-align:center; }
.eyebrow {
  display:inline-block; margin-bottom:16px;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color: var(--green-600);
}
.section--dark .eyebrow { color: var(--wheat); }
.section__lead { margin-top:18px; font-size: clamp(1rem,1.5vw,1.14rem); }

/* Kaydırınca yumuşak giriş — Playbook 3.6 "smoothly in" */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }

.grid { display:grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Kartlar --- */
.card {
  position:relative; overflow:hidden;
  padding: 32px; border-radius: var(--radius-lg);
  background: var(--white); border:1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  --accent: var(--green-600); --accent-2: var(--green-400); --tint: var(--green-50);
}
/* Üstte ince renk şeridi — hover'da soldan sağa dolar */
.card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease);
}
.card:hover::before { transform: scaleX(1); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-2); }

/* Konu renkleri */
.card--leaf  { --accent:var(--leaf);  --accent-2:var(--leaf-2);  --tint:var(--leaf-tint); }
.card--sky   { --accent:var(--sky);   --accent-2:var(--sky-2);   --tint:var(--sky-tint); }
.card--water { --accent:var(--water); --accent-2:var(--water-2); --tint:var(--water-tint); }
.card--amber { --accent:var(--amber); --accent-2:var(--amber-2); --tint:var(--amber-tint); }
.card--soil  { --accent:var(--soil);  --accent-2:var(--soil-2);  --tint:var(--soil-tint); }

/* Renkli ikon kutusu */
.card__ico {
  width:52px; height:52px; border-radius:15px; margin-bottom:18px;
  display:grid; place-items:center; color:#fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 10px 22px -8px var(--accent);
}
.card__ico svg { width:24px; height:24px; }

/* Köşedeki yumuşak renk lekesi */
.card::after {
  content:""; position:absolute; right:-40px; top:-40px;
  width:150px; height:150px; border-radius:50%;
  background: var(--tint); opacity:.85; z-index:0;
  transition: transform .5s var(--ease);
}
.card:hover::after { transform: scale(1.25); }
.card > * { position:relative; z-index:1; }

.card__num { font-family:'Bricolage Grotesque',sans-serif; font-size:.9rem; font-weight:800; color: var(--accent); letter-spacing:.08em; }
.card h3 { margin: 14px 0 10px; }
.card p { font-size:.97rem; }
.card--quote { background: var(--cream); border-color: transparent; }
.card--quote p { color: var(--ink); font-size:1.06rem; font-weight:500; font-style:italic; }
.card--quote .card__who { margin-top:16px; font-size:.86rem; color: var(--muted); font-style:normal; font-weight:600; }

.section--dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow:none; }
.section--dark .card:hover { background: rgba(255,255,255,.09); border-color: var(--accent-2); }
.section--dark .card p { color: rgba(255,255,255,.74); }
.section--dark .card__num { color: var(--accent-2); }
/* Koyu zeminde açık renk lekesi yerine renkli hafif parıltı */
.section--dark .card::after { background: var(--accent); opacity:.16; }

/* --- İstatistikler --- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; }
.stat { --accent-2: var(--wheat); }
.stat:nth-child(1) { --accent-2: var(--leaf-2); }
.stat:nth-child(2) { --accent-2: var(--sky-2); }
.stat:nth-child(3) { --accent-2: var(--water-2); }
.stat:nth-child(4) { --accent-2: var(--amber-2); }
.stat__val {
  font-family:'Bricolage Grotesque',sans-serif; font-size: clamp(2.4rem,4.6vw,3.6rem);
  font-weight:800; line-height:1; letter-spacing:-.03em; color: var(--accent-2);
}
.stat__lbl { margin-top:10px; font-size:.9rem; color: rgba(255,255,255,.7); }

/* --- Adımlar --- */
.step { display:flex; gap:20px; align-items:flex-start; --accent:var(--green-600); --accent-2:var(--green-400); }
.step:nth-child(1) { --accent:var(--leaf);  --accent-2:var(--leaf-2); }
.step:nth-child(2) { --accent:var(--sky);   --accent-2:var(--sky-2); }
.step:nth-child(3) { --accent:var(--amber); --accent-2:var(--amber-2); }
.step__n {
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 10px 20px -8px var(--accent);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.05rem;
}
.step h3 { margin-bottom:8px; }

/* --- Liste --- */
.ticks { list-style:none; margin-top:18px; display:grid; gap:11px; }
.ticks li { position:relative; padding-left:28px; font-size:.96rem; color: var(--muted); }
.ticks li::before {
  content:""; position:absolute; left:0; top:.42em; width:16px; height:16px; border-radius:50%;
  background: var(--tint, var(--green-100));
  box-shadow: inset 0 0 0 2px var(--accent-2, var(--green-500));
}
.section--dark .ticks li { color: rgba(255,255,255,.76); }
.section--dark .ticks li::before { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px var(--wheat); }

/* --- SSS --- */
.faq { border-top:1px solid var(--line); }
.faq__item { border-bottom:1px solid var(--line); }
.faq__q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 24px 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1.06rem; font-weight:700; color: var(--ink);
}
.faq__q:hover { color: var(--green-700); }
.faq__ico { flex:0 0 auto; width:26px; height:26px; position:relative; }
.faq__ico::before, .faq__ico::after {
  content:""; position:absolute; left:50%; top:50%; background: var(--green-600); border-radius:2px;
  transform: translate(-50%,-50%); transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq__ico::before { width:14px; height:2px; }
.faq__ico::after  { width:2px; height:14px; }
.faq__item.is-open .faq__ico::after { transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq__a { overflow:hidden; max-height:0; transition: max-height .45s var(--ease); }
.faq__a p { padding-bottom: 24px; font-size:.99rem; }
.faq__a a { color: var(--green-700); font-weight:600; text-decoration: underline; text-underline-offset:3px; }

/* --- Kapanış CTA --- */
.cta-final { text-align:center; }
.cta-final h2 { margin-bottom:16px; }
.cta-final .btn-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* ============================================================
   UYGULAMA MOCKUP'I — gerçek Bereketim arayüzü
   ============================================================ */
/* Bölüm bir "sahne": düz derin gradyan + parsel ızgarası + telefon arkası spot.
   Önceki rastgele radyal lekeler çamurlu bir olive tonu üretiyordu. */
#uygulama {
  background: linear-gradient(165deg, #175A33 0%, #0F4C2A 48%, #072D19 100%);
}
/* Kadastro parsellerini çağrıştıran ince ızgara, kenarlara doğru eriyor */
#uygulama::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(72% 70% at 50% 42%, #000 22%, transparent 78%);
          mask-image: radial-gradient(72% 70% at 50% 42%, #000 22%, transparent 78%);
}
#uygulama > .wrap { position:relative; z-index:1; }

.showcase {
  display:grid; grid-template-columns: 1fr auto;
  gap: clamp(40px, 6vw, 88px); align-items:center;
}
.showcase__text { max-width: 520px; }

.mockup { position:relative; justify-self:center; width:100%; max-width:340px; }

/* Telefonun arkasından gelen yumuşak ışık — cihazı zeminden ayırır */
.mockup::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:170%; height:78%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(134,226,164,.34), rgba(134,226,164,0) 70%);
  filter: blur(34px);
}

.mockup__floats { position:absolute; inset:-30px; pointer-events:none; z-index:2; }

.float-card {
  position:absolute; background:#fff; border-radius:14px;
  padding:.7rem .95rem; display:flex; align-items:center; gap:.65rem;
  box-shadow: var(--shadow-lg); font-size:.85rem; font-weight:600;
  border:1px solid var(--line); color: var(--ink);
  animation: bob 5s ease-in-out infinite; z-index:3;
}
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
.float-card__icon {
  width:32px; height:32px; border-radius:8px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.float-card__sub { color: var(--muted); font-weight:500; font-size:.78rem; }
.float-card--rain { top:6%; left:-16%; animation-delay:-1s; }
.float-card--rain .float-card__icon { background:linear-gradient(135deg,var(--sky-2),var(--sky)); }
/* Sağ kenar bölümün overflow'una takılmasın diye telefon sınırında tutuluyor */
.float-card--gubre { bottom:16%; right:0; animation-delay:-3s; }
.float-card--gubre .float-card__icon { background:linear-gradient(135deg,var(--wheat),#E89B0F); }

.phone {
  position:relative; z-index:1; width:100%; max-width:340px;
  aspect-ratio:9/19.5; background:#0F1A14; border-radius:42px;
  padding:10px; box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.08);
  animation: phoneFloat 6s ease-in-out infinite;
}
@keyframes phoneFloat {
  0%,100% { transform: rotate(-2deg) translateY(0); }
  50%     { transform: rotate(-2deg) translateY(-12px); }
}
.phone::before {
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:90px; height:24px; background:#000; border-radius:14px; z-index:5;
}
.phone__screen {
  width:100%; height:100%; border-radius:34px; overflow:hidden;
  background:#F4F6F2; display:flex; flex-direction:column; position:relative;
}

.app-status {
  height:32px; display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 22px 4px; font-size:11px; font-weight:600;
  background: var(--green-800); color:#fff;
}
.app-header { background: var(--green-800); color:#fff; padding:6px 18px 22px; border-radius:0 0 18px 18px; }
.app-header__row { display:flex; justify-content:space-between; align-items:flex-start; }
.app-header small { font-size:11px; opacity:.85; font-weight:400; display:block; margin-bottom:2px; color:#fff; }
.app-header h3 { color:#fff; font-size:18px; font-weight:700; margin:0; }
.app-header__icon { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; }
.app-tip {
  margin-top:14px; background:rgba(255,255,255,.95); color:#1B3A24;
  border-radius:10px; padding:8px 12px; font-size:11px; font-weight:500;
  display:flex; align-items:center; gap:8px;
}
.app-tip__icon { width:18px; height:18px; border-radius:50%; background:var(--wheat); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:10px; }

.weather-card { margin:-14px 12px 10px; background:#fff; border-radius:14px; padding:14px; box-shadow:0 4px 12px rgba(0,0,0,.06); position:relative; z-index:2; }
.weather-card__top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.weather-card h4 { font-size:14px; font-weight:700; color:var(--ink); margin:0; }
.weather-card__cond { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.weather-card__chips { display:flex; flex-direction:column; gap:3px; align-items:flex-end; font-size:9px; }
.weather-card__chips span { background:var(--green-50); padding:2px 6px; border-radius:6px; color:var(--green-800); font-weight:600; }
.weather-card__temp { display:flex; align-items:center; gap:8px; margin:6px 0 10px; }
.weather-card__temp .icon { font-size:24px; }
.weather-card__temp .deg { font-size:28px; font-weight:700; color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; }
.weather-tabs { display:flex; background:#F4F6F2; border-radius:8px; padding:3px; font-size:10px; font-weight:600; margin-bottom:10px; }
.weather-tabs span { flex:1; text-align:center; padding:5px; border-radius:6px; color:var(--muted); }
.weather-tabs span.active { background:#fff; color:var(--green-800); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.weather-hours { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; text-align:center; }
.weather-hours div { padding:6px 2px; border-radius:8px; font-size:9px; color:var(--muted); }
.weather-hours div.active { background:var(--green-800); color:#fff; }
.weather-hours div .h-icon { font-size:14px; margin:2px 0; }
.weather-hours div strong { display:block; font-size:10px; font-weight:700; color:inherit; }

.app-section { padding:8px 14px; }
.app-section__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.app-section__head h5 { font-size:11px; font-weight:700; color:var(--ink); margin:0; }
.app-section__head small { font-size:9px; color:var(--green-700); font-weight:600; }
.engineer { background:#fff; border-radius:10px; padding:8px; display:flex; align-items:center; gap:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.engineer__avatar { width:30px; height:30px; border-radius:50%; background:var(--green-100); color:var(--green-800); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; }
.engineer__info { flex:1; line-height:1.3; }
.engineer__info strong { display:block; font-size:10px; color:var(--ink); }
.engineer__info small { font-size:8px; color:var(--muted); }
.engineer__call { width:24px; height:24px; border-radius:50%; background:var(--green-100); display:flex; align-items:center; justify-content:center; color:var(--green-700); }

.news-item { display:flex; gap:8px; padding:6px 0; border-top:1px solid var(--line); }
.news-item__thumb { width:36px; height:36px; border-radius:6px; background:linear-gradient(135deg,#C8E6C9,#66BB6A); flex-shrink:0; }
.news-item__text { font-size:9px; line-height:1.3; color:var(--ink); }
.news-item__text small { color:var(--muted); font-size:8px; }

.bottom-nav { margin-top:auto; background:#fff; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); padding:8px 4px 12px; font-size:8px; color:var(--muted); }
.bottom-nav div { display:flex; flex-direction:column; align-items:center; gap:3px; font-weight:500; }
.bottom-nav div.active { color:var(--green-700); font-weight:700; }
.bottom-nav .b-icon { width:18px; height:18px; display:flex; align-items:center; justify-content:center; }

/* ============================================================
   YARININ YORUMLARI
   ============================================================ */
.tst-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }

.tst {
  position:relative; background:#fff; border-radius: var(--radius-lg);
  padding:32px; border:1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tst:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.tst__when {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:16px;
  padding:6px 13px; border-radius:999px;
  background: linear-gradient(135deg, var(--green-100), var(--wheat-soft));
  color: var(--green-800); border:1px dashed var(--green-500);
  font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.tst__when::before {
  content:""; width:5px; height:5px; border-radius:50%; background: var(--green-600);
  animation: tstPulse 2s ease-in-out infinite;
}
@keyframes tstPulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }

.tst__mark {
  position:absolute; top:26px; right:24px;
  font-family: Georgia, serif; font-size:3rem; line-height:0;
  color: var(--green-700); opacity:.22;
}
.tst__stars { display:flex; gap:2px; margin-bottom:16px; color: var(--wheat); }
.tst__stars svg { width:14px; height:14px; }
.tst__text { color: var(--ink); font-size:1rem; line-height:1.6; font-weight:500; margin-bottom:24px; }

.tst__person { display:flex; align-items:center; gap:14px; }
.tst__avatar {
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; font-weight:700;
  background: linear-gradient(135deg, var(--green-500), var(--green-800));
}
.tst__avatar--wheat { background: linear-gradient(135deg, var(--wheat), #B36900); }
.tst__avatar--dark  { background: linear-gradient(135deg, #4A4A4A, #1A1A1A); }
.tst__info strong { display:block; color: var(--ink); font-size:.95rem; }
.tst__info small  { color: var(--muted); font-size:.85rem; }

.tst-cta {
  text-align:center; margin-top:56px; padding:44px 32px;
  background:#fff; border-radius: var(--radius-lg);
  border:2px dashed #A5D6A7;
}
.tst-cta h3 { color: var(--ink); font-size:1.4rem; margin-bottom:10px; }
.tst-cta h3 strong { color: var(--green-700); }
.tst-cta p { font-size:1.02rem; max-width:520px; margin:0 auto 26px; }

/* ============================================================
   HUKUKİ METİN SAYFALARI (gizlilik politikası vb.)
   ============================================================ */
.legal-hero {
  background: linear-gradient(165deg, #175A33 0%, #0F4C2A 55%, #0A3A20 100%);
  color:#fff; padding: calc(var(--nav-h) + 56px) 0 56px;
}
.legal-hero h1 { color:#fff; font-size: clamp(2rem, 4vw, 3rem); margin-bottom:14px; }
.legal-hero p { color: rgba(255,255,255,.78); }

.legal { padding: clamp(56px, 7vw, 88px) 0; background: var(--white); }
.legal__body { max-width: 760px; }
.legal__body h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 44px 0 14px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.legal__body h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.legal__body h3 { font-size:1.05rem; margin: 22px 0 8px; }
.legal__body p { margin-bottom: 14px; }
.legal__body ul { margin: 0 0 16px 0; padding-left: 22px; }
.legal__body li { color: var(--muted); margin-bottom: 9px; }
.legal__body a { color: var(--green-700); font-weight:600; text-decoration: underline; text-underline-offset:3px; }
.legal__body strong { color: var(--ink); }

.legal__note {
  margin: 28px 0; padding: 20px 22px; border-radius: var(--radius);
  background: var(--wheat-soft); border-left: 4px solid var(--wheat);
}
.legal__note p { color: #6B4A05; margin:0; font-size:.96rem; }

.legal__updated {
  display:inline-block; margin-top:18px; padding:7px 15px; border-radius:999px;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  font-size:.82rem; font-weight:600; color:#fff;
}

/* --- Footer --- */
.footer { background: var(--ink); color: rgba(255,255,255,.62); padding: 64px 0 32px; position:relative; z-index:1; }
.footer__grid { display:grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap:40px; }
.footer__logo { display:flex; align-items:center; gap:10px; color:#fff; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.25rem; margin-bottom:14px; }
.footer__logo img { width:34px; height:34px; }
.footer h4 { color:#fff; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.footer ul { list-style:none; display:grid; gap:10px; }
.footer a { font-size:.94rem; color: rgba(255,255,255,.62); transition: color .3s var(--ease); }
.footer a:hover { color: var(--wheat); }
.footer__bottom {
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.87rem;
}

/* ============================================================
   MOBİL / RESPONSIVE  (Playbook 4.1 ve 4.4)
   ============================================================ */
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .tst-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* Mockup tek sütuna insin, metin üstte kalsın */
  .showcase { grid-template-columns: 1fr; gap: 48px; }
  .showcase__text { max-width: none; }
  .phone { transform: rotate(0); animation: none; margin-inline: auto; }
  .float-card--rain { left:-4%; }
  .float-card--gubre { right:-4%; }
}

@media (max-width: 768px) {
  .nav__links { display:none; }
  .nav__toggle { display:block; }
  .nav__links.is-open {
    display:flex; flex-direction:column; align-items:flex-start; gap:18px;
    position:absolute; top: var(--nav-h); left:0; right:0;
    padding: 24px; background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
    box-shadow: var(--shadow-md);
  }
  .nav__links.is-open a { color: var(--ink); font-size:1.05rem; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .tst-grid { grid-template-columns: 1fr; }
  .tst-cta { padding: 32px 22px; margin-top: 36px; }
  .tst-cta h3 { font-size: 1.2rem; }
  .stats { grid-template-columns: repeat(2,1fr); gap:32px 16px; }
  .footer__grid { grid-template-columns: 1fr; gap:32px; }
  /* Dar ekranda yüzen kartlar telefonun üstüne biner — gizle */
  .float-card { display:none; }
  .phone { max-width: 280px; }

  /* Mobilde bölümler biraz kısalır — Playbook 4.6 "momentum kaybı" */
  .scrub { height: var(--scrub-h-mobile, 170vh); }
  /* Dikey ekranda kadrajın merkezi JS'te 0.45'e kayar — Playbook 4.4 */
  .scrub__overlay { background: linear-gradient(to bottom, rgba(9,20,13,.6) 0%, rgba(9,20,13,.34) 40%, rgba(9,20,13,.72) 100%), rgba(9,20,13,.35); }
  .scrub__loader { bottom: 74px; }
  .scrub__hint { display:none; }
  .card { padding: 26px; }
}

/* Hareket azaltma tercihi — scrub yerine tek sabit kare.
   JS ortadaki kareyi çizer; bölüm de 100vh'ye iner ki boşuna kaydırma olmasın. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .scrub__mouse::after { animation:none; }
  .scrub { height: 100vh !important; }
  .scrub__progress, .scrub__hint { display:none; }
  .phone, .float-card { animation: none !important; }
}