/* ---------- Hero: tam genişlik, yana kayan büyük fotoğraf banner'ı ----------
   Slaytlar yana kayar, aktif fotoğraf yavaşça yakınlaşır. JS yoksa ilk slayt görünür kalır. */
.hero{position:relative;overflow:hidden;background:var(--green-deep);color:#fff}
.slides{overflow:hidden;touch-action:pan-y}
.slides-track{display:flex;transition:transform .8s cubic-bezier(.65,0,.35,1);will-change:transform}
.slide{position:relative;flex:0 0 100%;min-height:min(calc(100svh - 70px),760px);display:flex;align-items:center;overflow:hidden}
.slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);translate:0 var(--hero-py,0px);transition:transform 7s linear}
.slide.is-active>img{transform:scale(1.1)}
/* yazı okunsun diye soldan koyulaşan örtü */
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,30,20,.82) 0%,rgba(14,30,20,.55) 45%,rgba(14,30,20,.1) 80%),linear-gradient(0deg,rgba(14,30,20,.5),transparent 35%)}
.slide-copy{position:relative;z-index:1;width:100%;padding-block:72px 120px}
/* yazı ortadaki sütunda değil, ekranın soluna yakın */
.slide-copy.wrap,.slides-nav.wrap{max-width:none;margin-inline:0;padding-inline:clamp(20px,17vw,330px)}
.slide h1,.slide h2{font-family:var(--font-hand);font-weight:400;font-size:clamp(2.9rem,1.2rem + 5vw,5.4rem);line-height:1.08;letter-spacing:.01em;max-width:15ch;color:#fff;text-wrap:balance;text-shadow:0 2px 14px rgba(10,22,14,.45)}
.slide h1 em{font-style:normal}
.slide .lede{margin-top:clamp(18px,2vw,26px);max-width:46ch;color:#E7EFE8}
.slide .btn-row{margin-top:clamp(22px,2.6vw,32px)}
.slide .btn-primary{background:var(--orange);border-color:var(--orange);color:#1A1208}
.btn-light{background:transparent;color:#fff;border-color:#fff}
.btn-light:hover{box-shadow:3px 3px 0 #fff}
/* işaretleyici: soldan sağa çizilir */
.slide .mark{background-image:linear-gradient(transparent 52%,color-mix(in srgb,var(--orange) 55%,transparent) 52%,color-mix(in srgb,var(--orange) 55%,transparent) 80%,transparent 80%);padding-inline:.08em;margin-inline:-.08em;background-size:100% 100%;background-repeat:no-repeat;animation:mark-draw .9s cubic-bezier(.65,0,.35,1) .5s backwards}
@keyframes mark-draw{from{background-size:0% 100%}}
/* aktif slaydın yazısı alttan gelir */
.slide .slide-copy>*{transition:opacity .6s ease,translate .7s cubic-bezier(.16,1,.3,1)}
.slide:not(.is-active) .slide-copy>*{opacity:0;translate:0 18px}
.slide.is-active .slide-copy>:nth-child(2){transition-delay:.12s}
.slide.is-active .slide-copy>:nth-child(3){transition-delay:.22s}

.slides-nav{position:absolute;left:0;right:0;bottom:28px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px}
.dots{display:flex;gap:10px}
.dot{width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.dot::before{content:"";width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.4);transition:background-color .2s ease}
.dot[aria-current="true"]::before{background:#fff}
.dot:hover::before{background:rgba(255,255,255,.75)}
.arrows{display:flex;gap:10px}
.arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(14,30,20,.35);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .15s ease}
.arrow:hover{background:rgba(255,255,255,.18)}
.arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hero :focus-visible{outline-color:#fff}
@media (max-width:640px){
  .slide{min-height:min(calc(100svh - 70px),620px);align-items:flex-end}
  .slide::after{background:linear-gradient(0deg,rgba(14,30,20,.88) 0%,rgba(14,30,20,.6) 50%,rgba(14,30,20,.15) 100%)}
  .slide-copy{padding-block:48px 96px}
  .arrows{display:none}
}
@media (prefers-reduced-motion:reduce){
  .slides-track,.slide>img,.slide .slide-copy>*{transition:none}
  .slide.is-active>img{transform:scale(1.02)}
}

/* ---------- Şerit: elle yazılmış, kayan not bandı ---------- */
.ribbon{overflow:hidden;background:var(--green-deep);padding-block:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.ribbon-track{display:flex;width:max-content;animation:ribbon 76s linear infinite;will-change:transform}
.ribbon:hover .ribbon-track,.ribbon.paused .ribbon-track{animation-play-state:paused}
.ribbon span{font-family:var(--font-hand);font-size:clamp(1.5rem,1.15rem + 1.1vw,2.1rem);font-weight:400;color:var(--strip-ink);white-space:nowrap;display:flex;align-items:center}
.ribbon span::after{content:"";width:.72em;height:.72em;margin-inline:.9em;border-radius:50%;flex:none;background:repeating-conic-gradient(var(--orange) 0 26deg,#FFC48A 26deg 30deg);box-shadow:0 0 0 2px #FFC48A}
@keyframes ribbon{to{transform:translate3d(-50%,0,0)}}
#rakamlar{margin-top:clamp(40px,5vw,72px)}

/* ---------- Kaydırma hareketleri (yalnızca JS ve hareket izni varsa) ---------- */
.motion .trait h3::before{scale:0;rotate:-50deg;transition:scale .5s cubic-bezier(.16,1,.3,1),rotate .5s cubic-bezier(.16,1,.3,1)}
.motion .traits.in .trait h3::before{scale:1;rotate:-8deg}
.motion .traits.in .trait:nth-child(2) h3::before{transition-delay:.07s}
.motion .traits.in .trait:nth-child(3) h3::before{transition-delay:.14s}
.motion .traits.in .trait:nth-child(4) h3::before{transition-delay:.21s}
.motion .traits.in .trait:nth-child(5) h3::before{transition-delay:.28s}
.motion .traits.in .trait:nth-child(6) h3::before{transition-delay:.35s}

@media (prefers-reduced-motion:reduce){
  .ribbon-track{animation:none}
}

/* ---------- Rakamlar: kâğıt etiket şeridi ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--radius-sm);rotate:-.4deg;box-shadow:0 6px 14px -8px rgba(20,35,25,.3)}
@media (max-width:1024px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:22px 24px;display:grid;gap:2px;align-content:start}
.stat + .stat{border-left:1.5px dashed var(--line)}
@media (max-width:1024px){.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1.5px dashed var(--line)}}
.stat-value{font-family:var(--font-display);font-size:clamp(2rem,1.6rem + 1.4vw,2.8rem);line-height:1.05;font-variant-numeric:tabular-nums;color:var(--heading)}
.stat-value small{font-size:.45em;margin-left:4px;color:var(--orange-ink)}
.stat-label{font-weight:700;margin-top:6px}
.stat-src{font-size:var(--fs-xs);color:var(--muted)}
@media (max-width:480px){.stat{padding:16px 14px}.stat-value{font-size:1.75rem}.stat-label{font-size:var(--fs-sm);line-height:1.3}.stat-src{line-height:1.35}}

/* ---------- Altı özellik: dikişli iki sütun ---------- */
.traits{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px)}
@media (max-width:760px){.traits{grid-template-columns:1fr}}
.trait{display:grid;gap:6px;align-content:start;padding-block:22px;border-top:1.5px dashed var(--line)}
.trait h3{font-size:1.45rem}
.trait h3::before{content:"✓";font-family:var(--font-hand);font-size:1.7rem;color:var(--orange-ink);margin-right:10px;display:inline-block;rotate:-8deg}

.geo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(64px,8vw,96px)}
.geo .ph{margin-top:8px}
@media (max-width:820px){.geo{grid-template-columns:1fr}}
.geo .ph{aspect-ratio:4/3}
/* tek başına duran .ph'leri baskı gibi çerçevele */
.geo .ph,.story .ph{border:10px solid var(--paper);border-bottom-width:14px;box-shadow:var(--shadow);border-radius:0}
.geo .ph{rotate:-1.5deg}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checklist li{display:grid;grid-template-columns:26px 1fr;gap:10px}
.checklist li::before{content:"✓";font-family:var(--font-hand);font-size:1.6rem;line-height:1;color:var(--orange-ink);rotate:-8deg}

/* ---------- Hikâye ---------- */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:880px){.story{grid-template-columns:1fr}}
.story .ph{aspect-ratio:4/5;rotate:-2deg;background-image:url(../images/arykanda.jpg)}
.timeline{list-style:none;margin:32px 0 0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:minmax(0,8.5rem) 1fr;gap:16px;padding-block:12px;border-top:1.5px dashed var(--line)}
.deep .timeline li{border-top-color:rgba(231,239,232,.25)}
.deep .timeline b{color:var(--footer-accent)}
.timeline b{font-family:var(--font-hand);font-weight:400;font-size:1.55rem;line-height:1.1;color:var(--orange-ink)}

/* ---------- Yorumlar ---------- */
.reviews{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:20px;overflow-x:auto;padding:12px 4px 12px;scroll-snap-type:x mandatory}
.review{scroll-snap-align:start}
/* karosel (js/index.js açarsa) */
.reviews.is-marquee{display:block;overflow:hidden;padding-inline:0;scroll-snap-type:none;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reviews-track{display:flex;width:max-content;animation:reviews var(--dur,60s) linear infinite;will-change:transform}
/* masaya dağılmış notlar gibi: her kart öncekinin kenarına biraz biner; örtülen kısım yalnızca iç boşluk */
.reviews-track{padding-block:22px}
.reviews-track .review{width:300px;flex:none;margin-right:-30px;padding-inline:40px;box-shadow:var(--shadow)}
.reviews-track .review:nth-child(4n+1){rotate:-2.2deg;translate:0 -8px}
.reviews-track .review:nth-child(4n+2){rotate:1.6deg;translate:0 10px}
.reviews-track .review:nth-child(4n+3){rotate:-1deg;translate:0 2px}
.reviews-track .review:nth-child(4n){rotate:2.4deg;translate:0 -4px}
.reviews.is-marquee:hover .reviews-track,.reviews.is-marquee:focus-within .reviews-track,.reviews.paused .reviews-track{animation-play-state:paused}
@keyframes reviews{to{transform:translate3d(-50%,0,0)}}
.review:nth-child(2n){rotate:.6deg}.review:nth-child(2n+1){rotate:-.5deg}
.stars{color:var(--orange);letter-spacing:2px}
.review footer{font-family:var(--font-hand);font-size:1.25rem;color:var(--muted)}

/* ---------- SSS ---------- */
.sss-head{margin-inline:auto;text-align:center;justify-items:center}
.faq summary::-webkit-details-marker{display:none}

#icerik{overflow-x:clip} /* eğik şerit taşmasın */

/* ---------- Canlılık: süzülen dilimler, kaydırınca belirme, üzerine gelme ---------- */
#fark{position:relative;overflow:clip}
#fark>.wrap{position:relative;z-index:1}
.floaters{position:absolute;inset:0;pointer-events:none;z-index:0}
.fl{position:absolute;border-radius:50%;translate:0 var(--fy,0px);animation:spin 60s linear infinite;
  background:repeating-conic-gradient(var(--orange) 0 32deg,#FFC48A 32deg 36deg);box-shadow:inset 0 0 0 7px #FFE1C2,0 14px 30px -14px rgba(20,35,25,.4)}
.fl::after{content:"";position:absolute;inset:44%;border-radius:50%;background:#FFE1C2}
.f1{width:96px;height:96px;top:6%;left:2.5%}
.f2{width:140px;height:140px;top:30%;right:-46px;animation-direction:reverse;animation-duration:80s}
.f3{width:64px;height:64px;top:78%;left:5%;animation-duration:45s}
.f4{width:58px;height:58px;top:56%;right:3%;animation-direction:reverse}
@keyframes spin{to{rotate:360deg}}
@media (max-width:1180px){.floaters{display:none}}

/* kaydırınca belirme (yalnızca JS + hareket izni varsa; varsayılan görünür) */
.motion .reveal{opacity:0;translate:0 26px;transition:opacity .7s ease var(--d,0s),translate .8s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.motion .reveal.in{opacity:1;translate:0 0}

/* üzerine gelince */
.stat{transition:background-color .25s ease}
.stat:hover{background:color-mix(in srgb,var(--orange) 9%,transparent)}
.stat-value{transition:color .25s ease}
.stat:hover .stat-value{color:var(--orange-ink)}
.trait{transition:background-color .25s ease;border-radius:4px}
.trait:hover h3{color:var(--leaf)}
@media (prefers-reduced-motion:reduce){.fl{animation:none}}

/* ---------- SSS: açık yaprak bandı, kart sorular, dönen rozet ---------- */
#sss{background:radial-gradient(900px 460px at 90% 0%,rgba(255,255,255,.75),transparent 60%),radial-gradient(700px 380px at 0% 100%,rgba(43,90,60,.16),transparent 60%),#E2EBD6}
.faq{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.faq details{background:var(--surface);border-radius:10px;box-shadow:0 1px 2px rgba(20,35,25,.08),0 8px 20px -14px rgba(20,35,25,.35);transition:box-shadow .25s ease,transform .25s ease}
.faq details:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,35,25,.08),0 14px 28px -16px rgba(20,35,25,.4)}
.faq details[open]{box-shadow:0 2px 4px rgba(20,35,25,.08),0 18px 36px -18px rgba(20,35,25,.45)}
.faq summary{cursor:pointer;padding:20px 22px;font:600 1.15rem/1.35 var(--font-display);color:var(--heading);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s ease}
.faq summary:hover,.faq details[open] summary{color:var(--leaf)}
.faq summary::-webkit-details-marker{display:none}
/* turuncu rozet: açılınca dolar ve dönerek × olur */
.faq summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--orange);
  background:linear-gradient(var(--orange),var(--orange)) center/12px 2px no-repeat,linear-gradient(var(--orange),var(--orange)) center/2px 12px no-repeat;
  transition:rotate .35s cubic-bezier(.16,1,.3,1),background-color .25s ease}
.faq details[open] summary::after{rotate:135deg;background-color:var(--orange);
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff)}
.faq details p{padding:0 22px 22px;color:var(--muted);max-width:68ch}
.faq details[open] p{animation:faq-in .45s cubic-bezier(.16,1,.3,1)}
@keyframes faq-in{from{opacity:0;translate:0 -6px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #sss{background:radial-gradient(700px 380px at 90% 0%,rgba(74,128,84,.22),transparent 60%),var(--surface-2)}}
:root[data-theme="dark"] #sss{background:radial-gradient(700px 380px at 90% 0%,rgba(74,128,84,.22),transparent 60%),var(--surface-2)}