:root{
  --green:#667563;
  --ivory:#F5F0E6;
  --white:#FFFDF8;
  --ink:#1E211E;
  --muted:#77786F;
  --line:rgba(30,33,30,.15);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",Arial,sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}


/* ==================================================
   TOP BAR
================================================== */

.top-note{
  height:34px;
  background:var(--green);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:7px;
  letter-spacing:.3em;
  text-transform:uppercase;
}


/* ==================================================
   HEADER
================================================== */

.header{
  min-height:102px;
  padding:0 clamp(20px,5vw,70px);
  background:rgba(245,240,230,.97);
  border-bottom:1px solid var(--line);

  position:sticky;
  top:0;
  z-index:100;

  display:flex;
  align-items:center;

  backdrop-filter:blur(12px);

  transition:.3s ease;
}

.logo{
  flex:0 0 auto;
}

.logo strong{
  display:block;
  font-family:var(--serif);
  font-size:33px;
  font-weight:500;
  letter-spacing:.29em;
  line-height:.85;
}

.logo span{
  display:block;
  margin-top:10px;
  color:var(--green);
  font-size:6px;
  letter-spacing:.42em;
}

.nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:34px;
}

.nav a{
  position:relative;
  font-size:8px;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.nav a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;

  width:0;
  height:1px;

  background:var(--green);
  transition:.25s;
}

.nav a:hover:after{
  width:100%;
}


/* scroll sonrası sadece logo */

.header.compact{
  min-height:68px;
}

.header.compact .nav,
.header.compact .logo span{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  position:absolute;
}

.header.compact .logo strong{
  font-size:27px;
}


/* ==================================================
   BUTTON
================================================== */

.btn{
  min-height:55px;
  padding:0 28px;

  border:1px solid var(--green);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:8px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;

  transition:.22s;
}

.btn.green{
  background:var(--green);
  color:white;
}

.btn:hover{
  background:var(--green);
  color:white;
}


/* ==================================================
   HERO
================================================== */

.hero{
  min-height:720px;
  display:grid;
  grid-template-columns:1.04fr .96fr;
}

.hero-copy{
  padding:100px clamp(25px,7vw,105px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--ivory);
}

.kicker{
  color:var(--green);
  font-size:8px;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.hero h1{
  max-width:760px;
  margin:28px 0 0;

  font-family:var(--serif);
  font-size:clamp(65px,8vw,110px);
  line-height:.79;
  letter-spacing:-.04em;
  font-weight:400;
}

.hero h1 em{
  display:block;
  margin-top:16px;
  color:var(--green);
  font-weight:400;
}

.hero-copy p{
  max-width:520px;
  margin:40px 0 0;

  color:var(--muted);
  font-family:var(--serif);
  font-size:22px;
  line-height:1.55;
}

.hero-actions{
  display:flex;
  gap:10px;
  margin-top:42px;
}


/* HERO RIGHT */

.hero-panel{
  background:var(--green);
  color:white;
  padding:70px clamp(28px,5vw,70px);

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-panel-label{
  font-size:7px;
  letter-spacing:.36em;
  opacity:.8;
}

.hero-panel h2{
  max-width:500px;
  margin:25px 0 50px;

  font-family:var(--serif);
  font-size:clamp(48px,5vw,70px);
  line-height:.9;
  font-weight:400;
}

.hero-feature{
  min-height:69px;

  display:grid;
  grid-template-columns:35px 1fr auto;
  align-items:center;

  border-top:1px solid rgba(255,255,255,.28);
}

.hero-feature:last-child{
  border-bottom:1px solid rgba(255,255,255,.28);
}

.hero-feature b{
  font-family:var(--serif);
  font-size:19px;
  font-weight:400;
  opacity:.65;
}

.hero-feature strong{
  font-family:var(--serif);
  font-size:22px;
  font-weight:400;
}

.hero-feature span{
  font-size:7px;
  letter-spacing:.15em;
  opacity:.75;
}


/* ==================================================
   MINI STRIP
================================================== */

.strip{
  background:var(--white);
  min-height:100px;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.strip-item{
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:8px;
  letter-spacing:.23em;
  text-transform:uppercase;
}

.strip-item + .strip-item{
  border-left:1px solid var(--line);
}


/* ==================================================
   SECTION
================================================== */

.section{
  padding:105px clamp(22px,7vw,108px);
}

.section-head{
  max-width:830px;
  margin-bottom:60px;
}

.section-head small{
  color:var(--green);
  font-size:8px;
  letter-spacing:.33em;
}

.section-head h2{
  margin:17px 0 0;

  font-family:var(--serif);
  font-size:clamp(50px,6vw,80px);
  line-height:.89;
  font-weight:400;
}

.section-head p{
  max-width:570px;
  margin:25px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.8;
}


/* ==================================================
   THREE PRODUCTS
================================================== */

.experiences{
  background:var(--white);
}

.experience-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}

.experience{
  min-height:430px;
  padding:35px;

  display:flex;
  flex-direction:column;
  border-bottom:1px solid var(--line);
}

.experience + .experience{
  border-left:1px solid var(--line);
}

.experience-number{
  color:var(--green);
  font-family:var(--serif);
  font-size:27px;
}

.experience h3{
  margin:70px 0 18px;

  font-family:var(--serif);
  font-size:37px;
  line-height:.95;
  font-weight:400;
}

.experience p{
  color:var(--muted);
  font-size:10px;
  line-height:1.8;
  margin:0;
}

.experience a{
  margin-top:auto;
  padding-top:28px;

  color:var(--green);
  font-size:8px;
  letter-spacing:.17em;
}


/* ==================================================
   COLLECTION
================================================== */

.collection{
  background:var(--ivory);
  padding-left:0;
  padding-right:0;
}

.collection .section-head{
  padding-left:clamp(22px,7vw,108px);
  padding-right:clamp(22px,7vw,108px);
}

.collection-top-link{
  margin-top:20px;
  display:inline-block;
  border-bottom:1px solid var(--green);
  padding-bottom:7px;
  font-size:8px;
  letter-spacing:.17em;
}

.product-scroll{
  padding:0 clamp(18px,7vw,108px) 20px;

  display:flex;
  gap:18px;

  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}

.product-scroll::-webkit-scrollbar{
  display:none;
}

.product-card{
  flex:0 0 min(340px,78vw);
  scroll-snap-align:start;
}

.product-cover{
  aspect-ratio:.76;
  overflow:hidden;
  background:rgba(102,117,99,.14);
}

.product-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  transition:transform .4s;
}

.product-card:hover img{
  transform:scale(1.02);
}

.product-meta{
  padding:20px 0;
  border-bottom:1px solid var(--line);
}

.product-meta small{
  color:var(--green);
  font-size:6px;
  letter-spacing:.23em;
}

.product-title{
  margin-top:8px;

  display:flex;
  justify-content:space-between;
  gap:14px;
}

.product-title h3{
  margin:0;
  font-family:var(--serif);
  font-size:29px;
  font-weight:400;
}

.product-price{
  font-family:var(--serif);
  font-size:19px;
}

.coming{
  flex:0 0 calc(100% - clamp(36px,14vw,210px));
  min-height:350px;

  padding:55px clamp(24px,6vw,70px);

  border:1px solid var(--line);

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:var(--white);
}

.coming small{
  color:var(--green);
  font-size:7px;
  letter-spacing:.32em;
}

.coming h3{
  margin:20px 0;

  font-family:var(--serif);
  font-size:clamp(44px,6vw,68px);
  line-height:.9;
  font-weight:400;
}

.coming p{
  max-width:440px;
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.8;
}


/* ==================================================
   HOW
================================================== */

.how{
  background:var(--green);
  color:white;
}

.how .section-head small,
.how .section-head p{
  color:white;
}

.how .section-head p{
  opacity:.77;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  border-top:1px solid rgba(255,255,255,.28);
}

.step{
  min-height:290px;
  padding:32px 28px 30px 0;
}

.step + .step{
  padding-left:28px;
  border-left:1px solid rgba(255,255,255,.28);
}

.step span{
  font-family:var(--serif);
  font-size:26px;
  opacity:.65;
}

.step h3{
  margin:70px 0 15px;
  font-family:var(--serif);
  font-size:26px;
  font-weight:400;
}

.step p{
  margin:0;
  font-size:10px;
  line-height:1.75;
  opacity:.76;
}


/* ==================================================
   COMPARISON
================================================== */

.compare{
  background:var(--white);
}

.compare-table{
  border-top:1px solid var(--line);
}

.compare-row{
  min-height:67px;
  display:grid;
  grid-template-columns:1fr 130px 130px;
  align-items:center;

  border-bottom:1px solid var(--line);
}

.compare-row > div{
  padding:14px 18px;
}

.compare-row > div:not(:first-child){
  text-align:center;
  border-left:1px solid var(--line);
}

.compare-row.head{
  min-height:95px;
  font-family:var(--serif);
  font-size:22px;
}

.check{
  color:var(--green);
  font-size:20px;
}

.dash{
  color:#aaa;
}


/* ==================================================
   PREMIUM FEATURES
================================================== */

.premium-block{
  display:grid;
  grid-template-columns:.9fr 1.1fr;

  background:var(--ivory);
}

.premium-left{
  padding:100px clamp(24px,7vw,100px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.premium-left small{
  color:var(--green);
  font-size:8px;
  letter-spacing:.33em;
}

.premium-left h2{
  margin:23px 0;
  font-family:var(--serif);
  font-size:clamp(53px,6vw,80px);
  font-weight:400;
  line-height:.88;
}

.premium-left p{
  color:var(--muted);
  font-size:11px;
  line-height:1.8;
  max-width:470px;
}

.premium-right{
  background:var(--green);
  color:white;
  padding:70px clamp(25px,5vw,70px);
}

.premium-feature{
  min-height:82px;

  display:grid;
  grid-template-columns:40px 1fr;
  align-items:center;

  border-top:1px solid rgba(255,255,255,.28);
}

.premium-feature:last-child{
  border-bottom:1px solid rgba(255,255,255,.28);
}

.premium-feature span{
  font-family:var(--serif);
  opacity:.6;
}

.premium-feature strong{
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
}


/* ==================================================
   PLANS
================================================== */

.plans{
  background:var(--white);
}

.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.plan{
  min-height:500px;
  padding:38px;
  border:1px solid var(--line);

  display:flex;
  flex-direction:column;
}

.plan.featured{
  background:var(--green);
  color:white;
}

.plan small{
  color:var(--green);
  font-size:7px;
  letter-spacing:.3em;
}

.plan.featured small{
  color:white;
}

.plan h3{
  margin:30px 0 10px;
  font-family:var(--serif);
  font-size:37px;
  font-weight:400;
}

.plan-price{
  margin-bottom:30px;
  font-family:var(--serif);
  font-size:35px;
}

.plan ul{
  margin:0;
  padding:0;
  list-style:none;
}

.plan li{
  padding:13px 0;
  border-top:1px solid var(--line);

  color:var(--muted);
  font-size:9px;
}

.plan.featured li{
  color:white;
  border-color:rgba(255,255,255,.25);
}

.plan .btn{
  margin-top:auto;
}

.plan.featured .btn{
  border-color:white;
  color:white;
}


/* ==================================================
   FAQ
================================================== */

.faq{
  background:var(--ivory);
}

.faq-wrap{
  border-top:1px solid var(--line);
}

.faq-item{
  border-bottom:1px solid var(--line);
}

.faq-item button{
  width:100%;
  min-height:82px;

  border:0;
  background:transparent;
  color:var(--ink);

  display:flex;
  justify-content:space-between;
  align-items:center;

  text-align:left;
  cursor:pointer;
}

.faq-item button strong{
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
}

.faq-item button span{
  color:var(--green);
  font-size:20px;
}

.faq-answer{
  display:none;
  max-width:680px;
  padding:0 0 30px;

  color:var(--muted);
  font-size:10px;
  line-height:1.8;
}

.faq-item.open .faq-answer{
  display:block;
}


/* ==================================================
   CONTACT
================================================== */

.contact{
  min-height:430px;
  padding:80px 25px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  background:var(--green);
  color:white;
  text-align:center;
}

.contact small{
  font-size:8px;
  letter-spacing:.32em;
}

.contact h2{
  max-width:760px;
  margin:25px 0 35px;

  font-family:var(--serif);
  font-size:clamp(50px,7vw,82px);
  line-height:.88;
  font-weight:400;
}

.contact .btn{
  border-color:white;
  color:white;
}


/* ==================================================
   FOOTER
================================================== */

.footer{
  padding:65px clamp(22px,7vw,108px) 32px;

  background:var(--ivory);
}

.footer-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;

  padding-bottom:45px;
  border-bottom:1px solid var(--line);
}

.footer-logo strong{
  display:block;

  font-family:var(--serif);
  font-size:43px;
  letter-spacing:.28em;
  font-weight:400;
}

.footer-logo span{
  display:block;
  margin-top:10px;

  color:var(--green);
  font-size:6px;
  letter-spacing:.39em;
}

.footer-links{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}

.footer-links a{
  font-size:8px;
  letter-spacing:.14em;
}

.copyright{
  display:block;
  margin-top:27px;
  color:#888;
  font-size:7px;
}


/* ==================================================
   WHATSAPP
================================================== */

.whatsapp-float{
  position:fixed;
  right:15px;
  bottom:15px;
  z-index:150;

  min-height:50px;
  padding:0 17px;

  display:flex;
  align-items:center;

  background:var(--green);
  color:white;

  border:1px solid white;

  font-size:8px;
  letter-spacing:.15em;
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:760px){

  .top-note{
    font-size:6px;
  }

  .header{
    min-height:118px;
    padding:20px 20px 13px;

    display:block;
  }

  .logo strong{
    font-size:29px;
  }

  .nav{
    margin-top:22px;
    overflow-x:auto;
    gap:25px;
    scrollbar-width:none;
  }

  .nav::-webkit-scrollbar{
    display:none;
  }

  .nav a{
    white-space:nowrap;
    font-size:7px;
  }

  .header.compact{
    display:flex;
    height:65px;
    min-height:65px;
  }

  .hero{
    display:block;
  }

  .hero-copy{
    min-height:610px;
    padding:75px 20px;
  }

  .hero h1{
    font-size:62px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .hero-panel{
    padding:65px 20px;
  }

  .hero-panel h2{
    font-size:50px;
  }

  .strip{
    grid-template-columns:1fr;
  }

  .strip-item{
    min-height:65px;
  }

  .strip-item + .strip-item{
    border-left:0;
    border-top:1px solid var(--line);
  }

  .section{
    padding:75px 20px;
  }

  .section-head h2{
    font-size:50px;
  }

  .experience-grid{
    grid-template-columns:1fr;
  }

  .experience{
    min-height:300px;
    padding:30px 0;
  }

  .experience + .experience{
    border-left:0;
  }

  .experience h3{
    margin-top:45px;
  }

  .collection{
    padding-left:0;
    padding-right:0;
  }

  .collection .section-head{
    padding-left:20px;
    padding-right:20px;
  }

  .product-scroll{
    padding-left:18px;
    padding-right:18px;
  }

  .coming{
    flex-basis:calc(100vw - 36px);
  }

  .steps{
    grid-template-columns:1fr;
  }

  .step,
  .step + .step{
    min-height:190px;
    padding:28px 0;
    border-left:0;
    border-bottom:1px solid rgba(255,255,255,.28);
  }

  .step h3{
    margin-top:40px;
  }

  .compare-row{
    grid-template-columns:1fr 80px 80px;
  }

  .compare-row > div{
    padding:13px 8px;
  }

  .premium-block{
    display:block;
  }

  .premium-left{
    padding:75px 20px;
  }

  .premium-right{
    padding:55px 20px;
  }

  .plan-grid{
    grid-template-columns:1fr;
  }

  .plan{
    min-height:440px;
  }

  .footer-main{
    display:block;
  }

  .footer-links{
    margin-top:35px;
  }

}

/* ==================================================
   HERO 3 BUTTON FINAL
================================================== */

.hero-actions{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:9px !important;
  width:100%;
  max-width:650px;
}

.hero-actions .btn{
  width:100%;
  padding-left:14px;
  padding-right:14px;
  text-align:center;
  white-space:nowrap;
}

/* Premium butonu ivory zemin üstünde sade */
.hero-actions .btn:nth-child(2){
  background:transparent;
  color:var(--green);
  border-color:var(--green);
}

.hero-actions .btn:nth-child(2):hover{
  background:var(--green);
  color:white;
}

/* Özel tasarım biraz daha geri planda */
.hero-actions .btn:nth-child(3){
  background:transparent;
  color:var(--ink);
  border-color:rgba(30,33,30,.45);
}

.hero-actions .btn:nth-child(3):hover{
  background:var(--green);
  border-color:var(--green);
  color:white;
}

@media(max-width:760px){

  .hero-actions{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .hero-actions .btn{
    min-height:58px;
  }

}

/* =========================================================
   EVORI — ROUND WHATSAPP BUTTON
========================================================= */

.whatsapp-float{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;

  padding:0 !important;

  border-radius:50% !important;

  display:grid !important;
  place-items:center !important;

  right:16px !important;
  bottom:18px !important;

  background:#667563 !important;
  color:#FFFFFF !important;

  border:1px solid rgba(255,255,255,.75) !important;

  box-shadow:
    0 10px 28px rgba(30,33,30,.15) !important;

  font-size:0 !important;
  letter-spacing:0 !important;

  overflow:hidden;
}

.whatsapp-float::before{
  content:"";

  width:23px;
  height:23px;

  display:block;

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  filter:brightness(0) invert(1);

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.04 2C6.52 2 2.05 6.42 2.05 11.87c0 1.93.57 3.81 1.64 5.42L2 22l4.88-1.6a10.1 10.1 0 0 0 5.16 1.4c5.52 0 9.99-4.42 9.99-9.87C22.03 6.42 17.56 2 12.04 2Zm0 17.99a8.3 8.3 0 0 1-4.23-1.16l-.3-.18-2.9.95.95-2.81-.2-.29a8.05 8.05 0 0 1-1.29-4.63c0-4.45 3.58-8.06 7.97-8.06 4.4 0 7.98 3.61 7.98 8.06 0 4.45-3.58 8.12-7.98 8.12Zm4.37-6.06c-.24-.12-1.41-.69-1.63-.77-.22-.08-.38-.12-.54.12-.16.24-.62.77-.76.93-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.92-1.17-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.01-.37.1-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.29-.74-1.77-.2-.47-.4-.41-.54-.42h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.16 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.51.58.18 1.11.16 1.53.1.47-.07 1.41-.58 1.61-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
}

.whatsapp-float:hover{
  transform:translateY(-2px);
}

.whatsapp-float:active{
  transform:scale(.94);
}


/* MOBİL */

@media(max-width:760px){

  .whatsapp-float{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;

    right:15px !important;
    bottom:16px !important;
  }

  .whatsapp-float::before{
    width:22px;
    height:22px;
  }

}

/* WhatsApp iç ikonunu büyüt */
.whatsapp-float::before{
  width:30px !important;
  height:30px !important;
}

@media(max-width:760px){
  .whatsapp-float::before{
    width:29px !important;
    height:29px !important;
  }
}