/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --navy:        #122c4f;
  --navy-deep:   #081a30;
  --navy-soft:   #1c3a63;
  --gold:        #c6a15a;
  --gold-light:  #e6d3a3;
  --gold-dim:    #9c8047;
  --cream:       #f7f1e4;
  --paper:       #fffdf9;
  --ink:         #221d15;
  --ink-soft:    #4d463a;
  --wine:        #7c2b2e;

  --serif: 'EB Garamond', 'Georgia', serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

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

::selection{ background:var(--gold); color:var(--navy-deep); }

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

.container-narrow{
  max-width:1180px;
  margin:0 auto;
  padding-left:1.5rem;
  padding-right:1.5rem;
}

@media (min-width: 992px){
  .container-narrow{ padding-left:3rem; padding-right:3rem; }
}

/* Eyebrow label */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold-dim);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--gold-dim);
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--gold-light); }
.eyebrow.on-dark::before{ background:var(--gold-light); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }
.eyebrow.center::after{
  content:"";
  width:28px; height:1px;
  background:var(--gold-dim);
  display:inline-block;
}
.eyebrow.center.on-dark::after{ background:var(--gold-light); }

/* Gold diamond divider, echoes the "PESTİL ◆ KÖME" mark in the logo */
.diamond{
  display:inline-block;
  width:6px; height:6px;
  background:var(--gold);
  transform:rotate(45deg);
  margin:0 .55rem;
  vertical-align:middle;
}

/* ============================================================
   SCALLOP DIVIDERS  — signature motif borrowed from the logo's
   crimped bottom edge (a pestil sheet's natural cut line)
   ============================================================ */
.scallop{
  display:block;
  width:100%;
  height:34px;
  line-height:0;
}
.scallop svg{ display:block; width:100%; height:100%; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:url('images/hero-2.jpg') left/cover no-repeat;
  position:relative radial-gradient(ellipse 900px 500px at 18% -10%, rgba(198,161,90,.16), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 78%);
  color:#fff;
  overflow:hidden;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(10,38,69,.98) 0%,rgba(10,38,69,.9) 38%,rgba(10,38,69,.22) 70%,rgba(10,38,69,.05) 100%)
}

.hero-crown{
  width:74px;
  height:auto;
  opacity:.95;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

.hero h1{
  font-size:clamp(2rem, 6vw, 4.6rem);
  line-height:1;
  color:#fdf9f0;
  margin: .25rem 0 1rem;
}
.hero h1 em{
  font-style:italic;
  color:var(--gold-light);
  font-weight:500;
}

.hero p.lede{
  font-size:1.14rem;
  line-height:1.75;
  color:#d9dfe9;
  max-width:520px;
}

.hero-est{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(230,211,163,.35);
  border-radius:999px;
  padding:.45rem 1.1rem;
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--gold-light);
  text-transform:uppercase;
  margin-bottom:1.6rem;
}

.hero-frame{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  border:1px solid rgba(230,211,163,.25);
}
.hero-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  min-height:340px;
}
.hero-frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,26,48,.55), transparent 45%);
}

.hero-bottom-pad{ padding-bottom:3.2rem; }

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-section{
  padding:3rem 0;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(34,29,21,.12);
}
.stat-cell{
  padding:1.5rem 1.2rem;
  text-align:center;
  border-bottom:1px solid rgba(34,29,21,.12);
  border-right:1px solid rgba(34,29,21,.12);
}
.stat-cell:nth-child(3n){ border-right:none; }
.stat-num{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.7rem, 3vw, 2.5rem);
  color:var(--navy);
  line-height:1;
}
.stat-label{
  margin-top:.55rem;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}
@media (max-width: 640px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-cell:nth-child(3n){ border-right:1px solid rgba(34,29,21,.12); }
  .stat-cell:nth-child(2n){ border-right:none; }
}

/* ============================================================
   ABOUT / QUALITY (paired editorial sections)
   ============================================================ */
.split-section{ padding:3rem 0; }
.split-section.alt{ background:var(--cream); }

.split-media{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 24px 55px -22px rgba(18,44,79,.35);
}
.split-media img{ width:100%; display:block; }

.section-title{
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  color:var(--navy);
  margin:.5rem 0 1rem;
}
.body-copy{
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.5;
}
.body-copy + .body-copy{ margin-top:1rem; }

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.8rem;
}
.cert-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(18,44,79,.18);
  background:var(--paper);
  color:var(--navy);
  padding:.5rem 1rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
}
.cert-chip .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
}

/* ============================================================
   DISTRIBUTION
   ============================================================ */
.distribution{
  background:var(--navy);
  color:#eef1f6;
  padding:3.5rem 0;
  position:relative;
}
.distribution .section-title{ color:#fdf9f0; }
.distribution .body-copy{ color:#c7cedb; }

.store-list{
  list-style:none;
  padding:0; margin:1.8rem 0 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem 1.6rem;
}
.store-list li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px dashed rgba(230,211,163,.3);
  padding-bottom:.7rem;
  font-size:.98rem;
}
.store-list .city{ color:#f0ece0; font-weight:500; }
.store-list .count{
  color:var(--gold-light);
  font-weight:600;
  font-size:1.1rem;
}
.store-total{
  margin-top:1.6rem;
  color:var(--gold-light);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.dist-media{
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
  border:1px solid rgba(230,211,163,.2);
}
.dist-media img{ width:100%; display:block; }

/* ============================================================
   PRODUCTS
   ============================================================ */
.products-section{
  background:var(--paper);
  padding:3rem 0;
}
.products-intro{
  max-width:640px;
  margin:0 auto 2rem;
  text-align:center;
}

.product-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.2rem;
  align-items:center;
  padding:2rem 0;
  border-bottom:1px solid rgba(34,29,21,.1);
}
.product-row:last-child{ border-bottom:none; }
.product-row.reverse .product-media{ order:2; }
.product-row.reverse .product-text{ order:1; }

.product-media{
  position:relative;
  border-radius:15px;
  overflow:hidden;
}
.product-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.product-row:hover .product-media img{ transform:scale(1.045); }

.product-tag{
  position:absolute;
  top:14px; left:14px;
  background:var(--navy);
  color:var(--gold-light);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.4rem .8rem;
  border-radius:999px;
  font-weight:600;
}

.product-name{
  font-size:clamp(1.7rem, 2.6vw, 2.2rem);
  color:var(--navy);
  margin-bottom:1rem;
}
.product-desc{
  color:var(--ink-soft);
  line-height:1.8;
  font-size:1rem;
}

@media (max-width: 767px){
  .product-row, .product-row.reverse{
    grid-template-columns:1fr;
    gap:1.4rem;
  }
  .product-row.reverse .product-media,
  .product-row.reverse .product-text{ order:initial; }
}

/* ============================================================
   CLOSING / CONTACT
   ============================================================ */
.closing{
  background:linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color:#fff;
  padding:3rem 0;
  text-align:center;
}
.closing .crown-mini{ width:46px; opacity:.9; margin-bottom:1.4rem; }
.closing h2{
  font-size:clamp(2rem, 4vw, 2.9rem);
  color:#fdf9f0;
}
.closing p.note{
  color:#c7cedb;
  max-width:480px;
  margin:1rem auto 2.6rem;
  font-size:1.02rem;
  line-height:1.8;
}

.contact-card{
  max-width:560px;
  margin:0 auto;
  border:1px solid rgba(230,211,163,.28);
  border-radius:14px;
  padding:2.4rem 2rem;
  background:rgba(255,255,255,.03);
}
.contact-card .co-name{
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--gold-light);
  margin-bottom:.3rem;
}
.contact-card .co-addr{
  color:#c7cedb;
  font-size:.92rem;
  margin-bottom:1.3rem;
}
.contact-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem 2rem;
  padding-top:1.3rem;
}
.contact-links a{
  color:#fdf9f0;
  text-decoration:none;
  font-weight:500;
  font-size:.98rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.contact-links a:hover{ color:var(--gold-light); }
.contact-links svg{ width:16px; height:16px; flex:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--cream);
  padding:2rem 0;
  text-align:center;
  color:var(--ink-soft);
  font-size:.82rem;
}
.site-footer img{ width:34px; margin-bottom:.6rem; opacity:.85; }

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .product-media img{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ============================================================
   CATALOGUE DOWNLOAD
   ============================================================ */
.catalogue{
  background:var(--cream);
  padding:5.5rem 0;
}
.catalogue-inner{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:3.5rem;
  border:1px solid rgba(18,44,79,.12);
  background:var(--paper);
  border-radius:16px;
  padding:3rem;
  box-shadow:0 30px 60px -30px rgba(18,44,79,.25);
}

.catalogue-text .section-title{ margin-top:.6rem; }

.catalogue-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.4rem;
  margin:1.4rem 0 1.9rem;
}
.catalogue-meta span{
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.catalogue-meta span::before{
  content:"";
  width:5px;height:5px;
  background:var(--gold);
  border-radius:50%;
  display:inline-block;
}

.btn-catalogue{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  background:var(--navy);
  color:#fdf9f0;
  text-decoration:none;
  padding:.95rem 1.7rem;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  transition:background .25s ease, transform .25s ease;
}
.btn-catalogue:hover{
  background:var(--navy-soft);
  color:#fff;
  transform:translateY(-2px);
}
.btn-catalogue svg{ width:18px; height:18px; }

/* ---- thumbnail mockup (stacked pages + cover) ---- */
.catalogue-thumb{
  position:relative;
  width:220px;
  height:288px;
  flex:none;
}
.catalogue-thumb .page{
  position:absolute;
  inset:0;
  border-radius:6px;
  background:var(--paper);
  border:1px solid rgba(18,44,79,.12);
}
.catalogue-thumb .page:nth-child(1){ transform:rotate(4deg) translate(6px,4px); z-index:1; }
.catalogue-thumb .page:nth-child(2){ transform:rotate(-3deg) translate(-4px,2px); z-index:2; }
.catalogue-thumb .cover{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:6px;
  background:
    radial-gradient(ellipse 220px 160px at 20% -10%, rgba(198,161,90,.25), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow:0 22px 40px -18px rgba(18,44,79,.5);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.2rem;
  border:1px solid rgba(230,211,163,.25);
}
.catalogue-thumb .cover img{
  width:46px;
  height:46px;
  object-fit:contain;
  margin-bottom:.9rem;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.catalogue-thumb .cover .c-title{
  font-family:var(--serif);
  color:#fdf9f0;
  font-size:1.05rem;
  line-height:1.25;
}
.catalogue-thumb .cover .c-sub{
  margin-top:.5rem;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-light);
}
.catalogue-thumb .corner{
  position:absolute;
  bottom:0; right:0;
  width:26px; height:26px;
  background:linear-gradient(135deg, transparent 50%, rgba(0,0,0,.18) 50%);
  border-bottom-right-radius:6px;
  z-index:4;
}

@media (max-width: 767px){
  .catalogue-inner{
    grid-template-columns:1fr;
    text-align:center;
    padding:1rem;
  }
  .catalogue-thumb{ margin:0 auto; }
  .catalogue-meta{ justify-content:center; }
  .store-list .city {width:100%;display: block;}
  .store-list .count {width:100%;display: block;}
  .store-list li {
    display: block;
    }

}