:root{
  --cream:#f6f1ea; --cream2:#efe7dc; --green:#173e32; --green2:#e6ece3; --burgundy:#79363d;
  --text:#2f3531; --muted:#5b615c; --line:#ddd4c7; --radius:10px;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:Inter,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
a{color:var(--burgundy)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--serif);color:var(--green);font-weight:600;line-height:1.08;margin:0 0 14px}
h1{font-size:clamp(42px,6vw,68px)}
h2{font-size:clamp(32px,4.2vw,46px)}
h3{font-size:28px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--burgundy);margin:0 0 10px}
.lead{font-size:18px;max-width:34em}
.sub{color:var(--muted);max-width:44em;margin:0 0 28px}
.small{font-size:13px;color:var(--muted)}
.note{font-size:13px;color:var(--muted);margin-top:18px}
.center{text-align:center}

.btn{display:inline-block;background:var(--burgundy);color:#fff;text-decoration:none;font-weight:600;padding:13px 22px;border-radius:8px;transition:transform .15s,background .15s}
.btn:hover{background:#652c32;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn-ghost:hover{background:var(--green);color:#fff}
.btn-small{padding:8px 16px;font-size:14px}

.top{position:sticky;top:0;z-index:10;background:rgba(246,241,234,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:24px;height:64px}
.brand{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--green);text-decoration:none;margin:0}
.top nav{margin-left:auto;display:flex;gap:22px}
.top nav a{color:var(--text);text-decoration:none;font-size:14px;font-weight:500}
.top nav a:hover{color:var(--burgundy)}

.hero{padding:56px 0 64px}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 22px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:6px;color:var(--green);font-weight:500;font-size:15px}
.ticks li::before{content:"✓";margin-right:10px;color:var(--burgundy)}
.hero-img{box-shadow:0 20px 50px -24px rgba(23,62,50,.45)}

.block{padding:72px 0}
.alt{background:var(--cream2)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid figure{margin:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 0 var(--line)}
.grid img{border-radius:0;aspect-ratio:1/1;object-fit:cover;width:100%}
.grid figcaption{padding:12px 14px 16px;font-weight:600;color:var(--green);font-size:15px}
.grid figcaption b{color:var(--burgundy);margin-right:6px}
.grid figcaption span{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:2px}
.grid .own{display:flex;flex-direction:column;background:var(--green2)}
.grid .own>div{padding:22px 18px 0;flex:1}
.grid .own p{font-size:14px;margin:0 0 10px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.specs{margin:22px 0 0;display:grid;gap:0}
.specs div{display:grid;grid-template-columns:110px 1fr;padding:10px 0;border-bottom:1px solid var(--line)}
.specs dt{font-weight:600;color:var(--green)}
.specs dd{margin:0}

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tier{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px;display:flex;flex-direction:column;position:relative}
.tier.pop{border:2px solid var(--green)}
.badge{position:absolute;top:-12px;left:22px;background:var(--green);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;margin:0}
.qty{font-weight:600;color:var(--green);margin:0 0 6px}
.price{font-family:var(--serif);font-size:54px;color:var(--burgundy);line-height:1;margin:0 0 10px}
.price span{font-family:var(--sans);font-size:15px;color:var(--muted);margin-left:4px}
.extra{color:var(--muted);font-size:14px;margin:0 0 20px;flex:1}
.tier .btn{text-align:center}

.steps{list-style:none;counter-reset:s;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.steps li{counter-increment:s;background:#fff;border-radius:var(--radius);padding:22px 18px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-weight:600;margin-bottom:12px}
.steps b{display:block;color:var(--green);margin-bottom:6px}
.steps span{font-size:14px;color:var(--muted)}
.hurry{margin:28px 0 0;font-weight:600;color:var(--burgundy);font-size:17px}

details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:600;color:var(--green);font-size:17px}
details p{margin:10px 0 0}

.foot{background:var(--green);color:#e8efe9;padding:44px 0}
.foot a{color:#fff}
.foot .brand{color:#fff}
.foot p{margin:4px 0}
.foot .small{color:#b9c9be}
.foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}

.page{padding:56px 0 80px}
.page h2{font-size:30px;margin-top:34px}

@media (max-width:960px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .top nav{display:none}
  .top-in .btn-small{margin-left:auto}
  .hero{padding:32px 0 44px}
  .hero-in,.two{grid-template-columns:1fr;gap:28px}
  .hero-img{order:-1}
  .block{padding:52px 0}
  .tiers,.steps{grid-template-columns:1fr}
}

/* tasarim kartlari: kaydirmali gorseller + buton */
.card{display:flex;flex-direction:column}
.card figcaption{display:flex;flex-direction:column;flex:1}
.btn-card{margin-top:auto;font-size:14px;padding:10px 14px;text-align:center}
.card figcaption span{margin-bottom:14px}
.car{position:relative}
.car .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.car .slides::-webkit-scrollbar{display:none}
.car .slides img{flex:0 0 100%;scroll-snap-align:start}
.car .prev,.car .next{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--green);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.car .prev{left:10px}.car .next{right:10px}
.car .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.car .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.car .dots i.on{background:#fff}
.own-box{aspect-ratio:1/1;padding:26px 20px;background:var(--green2)}
.own-box p{font-size:14px;margin:0 0 10px}
.grid .own{background:#fff}