/* =========================================================
   FISTIK ANA — Baklava • Börek · Nilüfer / Bursa
   Palette taken from the logo: forest green + cream + gold
   ========================================================= */

/* Self-hosted fonts (Cinzel, Jost — SIL OFL): no request to Google, no IP transfer abroad */
/* latin-ext */ @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/cinzel-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/cinzel-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/jost-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/jost-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --green:#1F3324;        /* logo background */
  --green-2:#27412E;
  --green-dk:#15241A;
  --cream:#F4E1AF;        /* logo lettering */
  --cream-lt:#FBF3DC;
  --paper:#ECE8DF;        /* product wall */
  --paper-2:#F6F2EA;
  --gold:#B08D2E;
  --gold-lt:#D4B465;
  --leaf:#4E9A1C;
  --ink:#2A2A22;
  --ink-soft:#5B584D;
  --line:rgba(176,141,46,.38);
  --line-cream:rgba(244,225,175,.22);

  --display:"Cinzel", "Times New Roman", serif;
  --sans:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw:1180px;
  --pad:clamp(16px, 5vw, 48px);
  --navh:72px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper-2);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,video,iframe{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
/* Uppercase via CSS so lang="tr" gives the dotted İ (Cinzel's small caps drop the dot) */
h1,h2,h3{ font-family:var(--display); margin:0; line-height:1.15; font-weight:600; text-transform:uppercase; }
figure{ margin:0; }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold-lt);
  outline-offset:3px;
  border-radius:3px;
}

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
:where(#urunler,#hakkimizda,#video,#tepsi,#iletisim){ scroll-margin-top:calc(var(--navh) + 8px); }

/* Subtle lattice used on every green surface (echoes the logo plate) */
.hero, .craft, .iletisim{
  background-color:var(--green);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(244,225,175,.07) 0 1.6px, transparent 2px),
    linear-gradient(45deg, transparent 48.5%, rgba(244,225,175,.035) 49%, rgba(244,225,175,.035) 51%, transparent 51.5%),
    linear-gradient(-45deg, transparent 48.5%, rgba(244,225,175,.035) 49%, rgba(244,225,175,.035) 51%, transparent 51.5%);
  background-size:34px 34px;
  color:var(--cream-lt);
}

/* ---------- Buttons ---------- */
.btn{
  --h:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--h); padding:0 24px;
  font-family:var(--sans); font-weight:500; font-size:15px; letter-spacing:.06em;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap; text-align:center;
}
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:var(--green-dk); font-weight:600; box-shadow:0 8px 22px rgba(176,141,46,.30); }
.btn--gold:hover{ box-shadow:0 12px 28px rgba(176,141,46,.45); }
.btn--green{ background:var(--green); color:var(--cream); }
.btn--green:hover{ background:var(--green-2); }
.btn--line{ background:transparent; color:var(--cream); border-color:rgba(244,225,175,.5); }
.btn--line:hover{ background:rgba(244,225,175,.08); border-color:var(--cream); }

/* ---------- Scalloped edge between sections ---------- */
.scallop{
  --from:var(--paper-2); --to:var(--paper);
  height:18px; background-color:var(--to);
  background-image:radial-gradient(circle at 18px 0, var(--from) 17px, transparent 17.6px);
  background-size:36px 18px; background-repeat:repeat-x;
}
.scallop--green{ --from:var(--paper-2); --to:var(--green); }

/* ============================= NAV ============================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(21,36,26,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-cream);
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:10px var(--pad);
  min-height:var(--navh);
  display:flex; align-items:center; gap:18px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0; }
.brand__emblem{ width:46px; height:46px; flex:none; }
.brand__word{ height:36px; width:auto; }

.nav__links{ display:flex; gap:28px; }
.nav__links a{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,243,220,.82); position:relative; padding:6px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--gold-lt); transition:width .25s ease; }
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ --h:42px; }

.nav__toggle{ display:none; width:46px; height:46px; background:transparent; border:1px solid var(--line-cream); border-radius:8px; cursor:pointer; padding:11px; }
.nav__toggle span{ display:block; height:2px; background:var(--cream); margin:4px 0; transition:.3s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav__mobile{
  display:flex; flex-direction:column; gap:2px;
  padding:6px var(--pad) 18px;
  border-top:1px solid var(--line-cream);
}
.nav__mobile a{ padding:14px 4px; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-lt); border-bottom:1px solid var(--line-cream); }
.nav__mobile a.btn{ border:0; margin-top:12px; text-transform:none; letter-spacing:.04em; }
.nav__mobile[hidden]{ display:none; }
@media (min-width:921px){ .nav__mobile{ display:none; } }

/* ============================= HERO ============================= */
.hero{
  position:relative; text-align:center;
  padding:clamp(36px,6vw,72px) 0 clamp(52px,7vw,84px);
}
.hero::after{ /* scallops hanging into the next section */
  content:""; position:absolute; left:0; right:0; bottom:-17px; height:18px; z-index:2;
  background-image:radial-gradient(circle at 18px 0, var(--green) 17px, transparent 17.6px);
  background-size:36px 18px; background-repeat:repeat-x;
}
.hero__wrap{ max-width:900px; margin-inline:auto; padding-inline:var(--pad); }
.hero__logo{ width:min(520px, 86vw); margin:0 auto clamp(18px,3vw,28px); filter:drop-shadow(0 10px 30px rgba(0,0,0,.25)); }
.hero__title{
  font-size:clamp(34px, 7.4vw, 72px); font-weight:700;
  color:var(--cream); letter-spacing:.06em;
  margin-bottom:14px; text-wrap:balance;
}
.hero__title em{ font-style:normal; color:var(--gold-lt); }
.hero__sub{ max-width:560px; margin:0 auto 28px; color:rgba(251,243,220,.82); font-size:clamp(16px,2.3vw,18px); font-weight:300; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.hero__meta{ margin:22px 0 0; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt); }
.hero__meta span{ margin:0 8px; opacity:.7; }

/* ============================= SECTIONS ============================= */
.section{ padding:clamp(56px,8vw,92px) 0; }
.sec-head{ text-align:center; max-width:660px; margin:0 auto clamp(26px,4vw,40px); }
.overline{ font-size:12.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--leaf); margin:0 0 10px; font-weight:600; }
.overline--cream{ color:var(--gold-lt); }
.sec-title{ font-size:clamp(28px,4.6vw,44px); color:var(--green); margin-bottom:14px; letter-spacing:.03em; }
.sec-lead{ color:var(--ink-soft); font-size:17px; margin:0; }

/* ---------- HAKKIMIZDA ---------- */
.about{ padding-top:clamp(72px,9vw,104px); }
.about__inner{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,6vw,72px); align-items:center; }
.about__text p{ color:var(--ink-soft); margin:0 0 16px; max-width:52ch; }
.about__text .btn{ margin-top:10px; }
.about__points{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.about__points li{
  display:flex; flex-direction:column; gap:2px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:20px 18px;
  box-shadow:0 10px 30px rgba(31,51,36,.06);
}
.about__icon{ color:var(--gold); font-size:18px; }
.about__points strong{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--green); letter-spacing:.02em; }
.about__points span:last-child{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- ÜRÜNLER ---------- */
.products{ background:var(--paper); }
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 clamp(26px,4vw,40px); }
.filter{
  font:500 14px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  padding:12px 20px; min-height:44px; border-radius:999px; cursor:pointer;
  color:var(--green); background:transparent; border:1px solid rgba(31,51,36,.28);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter:hover{ border-color:var(--green); }
.filter.is-active{ background:var(--green); color:var(--cream); border-color:var(--green); }

.grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,34px);
}
.card[hidden]{ display:none; }
.card figure{ display:flex; flex-direction:column; }
.card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:6px; background:#ddd8cc;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 12px 28px rgba(31,51,36,.10);
  transition:transform .35s ease, box-shadow .35s ease;
}
.card:hover img{ transform:translateY(-4px); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 20px 40px rgba(31,51,36,.18); }
.card figcaption{
  padding:16px 6px 0; font-size:clamp(17px,1.9vw,21px); font-weight:300; color:#4d4a40; letter-spacing:.01em; line-height:1.3;
}
.products__cta{ text-align:center; margin-top:clamp(32px,5vw,48px); }

/* ---------- VIDEO / CRAFT ---------- */
.craft__inner{ display:grid; grid-template-columns:auto 1fr; gap:clamp(32px,6vw,72px); align-items:center; }
.craft__media video{
  width:min(320px, 78vw); aspect-ratio:9/16; object-fit:cover;
  border-radius:18px; border:1px solid var(--gold);
  box-shadow:0 0 0 6px rgba(176,141,46,.12), 0 24px 60px rgba(0,0,0,.35);
}
.craft .sec-title{ color:var(--cream); }
.craft__text p{ color:rgba(251,243,220,.8); margin:0 0 26px; max-width:48ch; font-weight:300; font-size:17px; }
.craft__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- TEPSİ ---------- */
.tepsi__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:center; }
.tepsi__col{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 20px; }
.tepsi__col h3{ color:var(--green); font-size:19px; margin-bottom:6px; }
.tepsi__col p{ margin:0; color:var(--ink-soft); font-size:15px; }
.tepsi__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:clamp(28px,4vw,40px); }

/* ---------- İLETİŞİM ---------- */
.iletisim__inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,60px); align-items:center; }
.iletisim .sec-title{ color:var(--cream); }
.nap{ font-style:normal; margin:18px 0 26px; }
.nap__line{ margin:0 0 16px; color:rgba(251,243,220,.85); }
.nap__line strong{ display:inline-block; font-weight:600; color:var(--gold-lt); letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; margin-bottom:2px; }
.nap a{ color:var(--cream); font-weight:500; font-size:18px; display:inline-block; padding:4px 0; }
.nap a:hover{ text-decoration:underline; }
.nap__tag{
  display:inline-block; margin-left:6px; padding:1px 9px;
  font-size:11px; font-weight:600; letter-spacing:.06em; vertical-align:middle;
  color:#c8f5d8; background:rgba(37,211,102,.16);
  border:1px solid rgba(37,211,102,.5); border-radius:999px;
}
.iletisim__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.iletisim__map iframe, .mapgate{
  width:100%; height:380px; border:0; border-radius:16px;
  box-shadow:0 0 0 1px var(--gold), 0 0 0 7px rgba(176,141,46,.12), 0 24px 60px rgba(0,0,0,.3);
}
/* Click-to-load map placeholder */
.mapgate{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:24px; text-align:center;
  background:
    radial-gradient(circle at 50% 38%, rgba(244,225,175,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(244,225,175,.05) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(244,225,175,.05) 0 1px, transparent 1px 38px),
    var(--green-2);
}
.mapgate__pin{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:var(--green-dk); background:var(--gold-lt); box-shadow:0 0 0 8px rgba(212,180,101,.18); }
.mapgate__title{ margin:0; color:var(--cream); font-size:16px; }
.mapgate__note{ margin:0; max-width:40ch; font-size:12.5px; line-height:1.5; color:rgba(251,243,220,.62); }
.mapgate__note a{ color:var(--gold-lt); text-decoration:underline; }

/* ============================= FOOTER ============================= */
.footer{ background:var(--green-dk); color:rgba(251,243,220,.72); padding:clamp(40px,6vw,60px) 0; border-top:1px solid var(--line-cream); }
.footer__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.footer__logo{ width:220px; margin-bottom:14px; }
.footer__loc{ font-size:14px; margin:0; }
.footer__loc a{ color:var(--cream); }
.footer__loc a:hover{ text-decoration:underline; }
.footer__credit{ font-size:13px; margin:14px 0 0; opacity:.8; }
.footer__credit a{ color:var(--gold-lt); }
.footer__credit a:hover{ text-decoration:underline; }
.footer__legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:14px 0 0; padding:0; list-style:none; font-size:13px; }
.footer__legal a{ color:rgba(251,243,220,.78); text-decoration:underline; text-underline-offset:3px; }
.footer__legal a:hover{ color:var(--cream); }

/* ============================= FLOATING CTAs ============================= */
.fab{ position:fixed; right:16px; bottom:16px; z-index:60; display:flex; flex-direction:column; gap:12px; }
.fab__btn{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.3); transition:transform .2s ease, box-shadow .2s ease;
}
.fab__btn:hover{ box-shadow:0 12px 28px rgba(0,0,0,.38); }
.fab__btn:active{ transform:scale(.94); }
.fab__btn--wa{ background:#25D366; }
.fab__btn--call{ background:var(--green); border:1px solid var(--gold); color:var(--cream); }
.footer{ padding-bottom:calc(clamp(40px,6vw,60px) + 88px); }
@media (min-width:601px){ .footer{ padding-bottom:clamp(40px,6vw,60px); } }

/* ============================= INTRO VIDEO POP-UP ============================= */
.intro{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; }
.intro[hidden]{ display:none; }
.intro__backdrop{ position:absolute; inset:0; background:rgba(12,22,15,.84); backdrop-filter:blur(6px); animation:introFade .35s ease both; }
.intro__box{
  position:relative; z-index:1;
  height:min(86vh, 760px); height:min(86dvh, 760px); aspect-ratio:9/16; max-width:100%;
  border-radius:20px; overflow:hidden; background:#000;
  border:1px solid var(--gold);
  box-shadow:0 0 0 6px rgba(176,141,46,.16), 0 30px 80px rgba(0,0,0,.55);
  animation:introPop .45s cubic-bezier(.2,.8,.2,1) both;
}
.intro__video{ width:100%; height:100%; object-fit:cover; }
.intro__close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  color:var(--cream); background:rgba(21,36,26,.72); border:1px solid rgba(244,225,175,.5);
  backdrop-filter:blur(4px);
}
.intro__close:hover{ background:rgba(21,36,26,.92); }
.intro__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:56px 18px 20px;
  background:linear-gradient(180deg, transparent, rgba(15,26,18,.88) 45%);
}
.intro__bar img{ width:min(220px, 70%); }
.intro__go{ width:100%; max-width:280px; }
@keyframes introFade{ from{ opacity:0; } }
@keyframes introPop{ from{ opacity:0; transform:scale(.94) translateY(12px); } }

/* ============================= REVEAL ============================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================= RESPONSIVE ============================= */
@media (max-width:920px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:block; }

  .grid{ grid-template-columns:repeat(2,1fr); }
  .about__inner, .craft__inner, .iletisim__inner{ grid-template-columns:1fr; }
  .craft__media{ justify-self:center; }
  .craft__text{ text-align:center; }
  .craft__text p{ margin-inline:auto; }
  .craft__actions{ justify-content:center; }
  .tepsi__cols{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  :root{ --navh:64px; }
  .brand{ gap:10px; }
  .brand__emblem{ width:40px; height:40px; }
  .brand__word{ height:30px; }

  .grid{ gap:22px 14px; }
  .card figcaption{ padding-top:10px; font-size:15.5px; font-weight:400; }

  .about__points{ gap:10px; }
  .about__points li{ padding:16px 14px; }
  .about__points strong{ font-size:15px; }

  .hero__actions, .tepsi__cta, .iletisim__actions, .craft__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn, .tepsi__cta .btn, .iletisim__actions .btn, .craft__actions .btn, .about__text .btn, .products__cta .btn{ width:100%; }
  .btn{ padding:0 18px; }
  .filter{ padding:11px 15px; font-size:13px; }

  .iletisim__map iframe, .mapgate{ height:320px; }
  .hero__meta{ letter-spacing:.12em; font-size:12px; }
}

@media (max-width:360px){
  .brand__word{ height:26px; }
  .grid{ grid-template-columns:1fr; }
}

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

/* ============================= LEGAL PAGES (KVKK / Çerez) ============================= */
.legal{ padding:clamp(40px,7vw,80px) 0; }
.legal__wrap{ max-width:780px; margin-inline:auto; padding-inline:var(--pad); }
.legal h1{ font-size:clamp(28px,5vw,42px); color:var(--green); margin-bottom:6px; }
.legal h2{ font-size:clamp(18px,2.6vw,22px); color:var(--green); margin:34px 0 10px; letter-spacing:.03em; }
.legal p, .legal li{ color:var(--ink-soft); }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 14px; padding-left:22px; }
.legal li{ margin-bottom:8px; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.legal__date{ font-size:14px; color:#8a877d !important; margin-bottom:28px !important; }
.legal__links{ margin-top:40px !important; padding-top:20px; border-top:1px solid var(--line); }
.legal__back{ --h:40px; padding:0 18px; font-size:14px; }
.footer--legal{ padding:28px 0 !important; }