/* ═══════════════════════════════════════════
   İnatçı Lezzet — logodan türetilmiş palet
   ═══════════════════════════════════════════ */

:root{
  /* Marka renkleri (logo örneklemesi) */
  --kirmizi:      #D81830;
  --kirmizi-koyu: #8E1B22;
  --kirmizi-derin:#5E1216;
  --altin:        #F5C518;
  --altin-sicak:  #FFC800;
  --krem:         #FBF3E4;
  --krem-koyu:    #F2E6D0;
  --bej:          #E8D9B8;
  --kahve:        #6B4F2E;
  --kahve-acik:   #8A6A3E;

  /* Roller */
  --bg:      var(--krem);
  --ink:     #2A1A12;
  --ink-soft:#6B5445;
  --line:    rgba(107,79,46,.18);

  --r-sm: 12px;
  --r:    22px;
  --r-lg: 34px;

  --wrap: 1180px;
  --pad:  clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.22,.9,.28,1);

  --f-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--kirmizi); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

::selection{ background:var(--altin); color:var(--kirmizi-derin); }

/* ─────────── Ortak parçalar ─────────── */

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 16px;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--kahve-acik);
}
.eyebrow--light{ color:var(--altin); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--kirmizi); flex:none; }
.eyebrow--light .dot{ background:var(--altin); }

.sec__title{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.1rem, 5.2vw, 4rem);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0 0 18px;
}
.sec__title em{
  font-style:normal;
  color:var(--kirmizi);
  position:relative;
}
.sec--flavors .sec__title em,
.sec--urfa .sec__title em{ color:var(--altin); }

.sec__sub{ margin:0; max-width:56ch; color:var(--ink-soft); font-size:1.05rem; }
.sec__head{ margin-bottom:clamp(36px,5vw,68px); }
.sec__head--row{
  display:flex; flex-wrap:wrap; gap:28px 48px; align-items:flex-end; justify-content:space-between;
}
.sec__head--row .sec__sub{ max-width:38ch; }

.sec{ padding:clamp(72px,10vw,140px) 0; position:relative; }

.btn{
  --btn-bg:var(--kirmizi); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:0; border-radius:999px;
  font:600 .95rem/1 var(--f-body);
  text-decoration:none; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  box-shadow:0 8px 22px -10px rgba(216,24,48,.7);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -12px rgba(216,24,48,.75); }
.btn:active{ transform:translateY(-1px); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border:1.5px solid var(--line); box-shadow:none;
}
.btn--ghost:hover{ border-color:var(--kirmizi); color:var(--kirmizi); box-shadow:none; }
.btn--light{ --btn-bg:var(--altin); --btn-fg:var(--kirmizi-derin); box-shadow:0 8px 22px -12px rgba(0,0,0,.6); }
.btn--sm{ padding:11px 18px; font-size:.85rem; }
.btn--wa{ --btn-bg:#1FA855; box-shadow:0 8px 20px -12px rgba(31,168,85,.9); }
.btn--wa:hover{ box-shadow:0 14px 26px -14px rgba(31,168,85,.9); }
.btn svg{ width:17px; height:17px; fill:currentColor; }

/* ─────────── Navigasyon ─────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s;
}
.nav.is-stuck{
  background:rgba(251,243,228,.86);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -24px rgba(42,26,18,.7);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:14px var(--pad);
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
}
.nav__brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; font-family:var(--f-display); font-weight:800;
  letter-spacing:-.02em; font-size:1.05rem;
  margin-right:auto;
}
.nav__brand img{ width:58px; height:auto; }
.nav__links{ display:flex; gap:clamp(14px,2vw,30px); }
.nav__links a{
  position:relative; text-decoration:none; font-weight:500; font-size:.94rem;
  padding:6px 0; color:var(--ink);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--kirmizi); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--kirmizi); }

.nav__burger{
  display:none; width:44px; height:40px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0;
}
.nav__burger span{
  display:block; height:2px; width:24px; margin-inline:auto;
  background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ─────────── Hero ─────────── */

.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 0 0; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.blob--1{
  width:52vw; height:52vw; right:-12vw; top:-14vw;
  background:radial-gradient(circle at 40% 40%, var(--altin), transparent 68%);
}
.blob--2{
  width:44vw; height:44vw; left:-14vw; bottom:-16vw;
  background:radial-gradient(circle at 60% 40%, rgba(216,24,48,.55), transparent 68%);
}
.grain{
  position:absolute; inset:0; opacity:.35;
  background-image:radial-gradient(rgba(107,79,46,.28) 1px, transparent 1px);
  background-size:4px 4px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000, transparent 78%);
}

.hero__in{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;
  flex:1;
}

.hero__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.9rem, 8.4vw, 6.6rem);
  line-height:.92; letter-spacing:-.045em;
  margin:0 0 22px;
}
.hero__title .line{ display:block; }
.line--accent{ color:var(--kirmizi); }
.line--stroke{
  color:transparent;
  -webkit-text-stroke:2px var(--kahve);
  paint-order:stroke fill;
}
.hero__lead{ max-width:46ch; color:var(--ink-soft); font-size:clamp(1rem,1.3vw,1.14rem); margin:0 0 30px; }
.hero__lead strong{ color:var(--ink); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }

.hero__stats{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,48px);
}
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats b{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1; color:var(--kirmizi);
  letter-spacing:-.03em;
}
.hero__stats span{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.02em; }

.hero__art{ position:relative; aspect-ratio:1/1.05; }
.hero__disc{
  position:absolute; inset:6% 4%;
  border-radius:50%;
  background:
    conic-gradient(from 200deg, var(--kirmizi), var(--altin), var(--kirmizi-koyu), var(--kirmizi));
  box-shadow:0 40px 80px -40px rgba(94,18,22,.75);
}
.hero__disc::after{
  content:""; position:absolute; inset:9%;
  border-radius:50%; border:2px dashed rgba(251,243,228,.45);
}
.hero__pack{
  position:absolute; width:52%; border-radius:var(--r);
  object-fit:cover; aspect-ratio:1/1.06;
  box-shadow:0 30px 60px -28px rgba(42,26,18,.8);
  border:5px solid var(--krem);
}
.hero__pack--a{ left:-2%; top:16%; transform:rotate(-7deg); z-index:2; }
.hero__pack--b{ right:-2%; bottom:10%; transform:rotate(6deg); z-index:2; }
.hero__seal{
  position:absolute; z-index:4;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(96px,13vw,132px); aspect-ratio:1;
  display:grid; place-items:center;
  background:var(--krem);
  border-radius:50%;
  box-shadow:0 18px 34px -16px rgba(42,26,18,.75);
}
.hero__seal svg{
  position:absolute; inset:0; width:100%; height:100%;
  animation:spin 22s linear infinite;
}
.hero__seal text{
  font:600 9.4px/1 var(--f-body);
  letter-spacing:.09em;
  fill:var(--kirmizi);
}
.hero__seal b{ font-size:clamp(1.7rem,2.6vw,2.2rem); line-height:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.marquee{
  position:relative; z-index:1;
  margin-top:clamp(36px,6vw,70px);
  background:var(--kirmizi); color:var(--krem);
  border-block:0; overflow:hidden;
  padding:14px 0;
  transform:rotate(-1.2deg) scale(1.04);
}
.marquee__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:slide 26s linear infinite;
  font-family:var(--f-display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1rem,2vw,1.5rem); text-transform:uppercase;
  white-space:nowrap;
}
.marquee__track i{ color:var(--altin); font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ─────────── Hikâye ─────────── */

.sec--story{ background:linear-gradient(180deg, var(--krem) 0%, var(--krem-koyu) 100%); }

.values{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:clamp(14px,2vw,22px);
}
.value{
  position:relative;
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(24px,3vw,34px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s;
  overflow:hidden;
}
.value::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px;
  background:linear-gradient(90deg, var(--kirmizi), var(--altin));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.value:hover{
  transform:translateY(-8px);
  background:#fff;
  box-shadow:0 26px 50px -30px rgba(42,26,18,.6);
}
.value:hover::before{ transform:scaleX(1); }
.value__no{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:2.4rem; line-height:1; color:var(--bej); margin-bottom:14px;
  letter-spacing:-.04em;
}
.value h3{ font-family:var(--f-display); font-weight:600; font-size:1.16rem; margin:0 0 8px; letter-spacing:-.01em; }
.value p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

.story__punch{
  margin:clamp(44px,6vw,76px) 0 0;
  text-align:center;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.5rem,4.2vw,3rem); letter-spacing:-.03em; line-height:1.1;
}
.story__punch span{
  color:var(--kirmizi);
  background:linear-gradient(transparent 62%, var(--altin) 62%, var(--altin) 92%, transparent 92%);
  padding-inline:.12em;
}

/* ─────────── Lezzetler ─────────── */

.sec--flavors{
  background:var(--kirmizi-derin);
  color:var(--krem);
  overflow:hidden;
}
.sec--flavors .sec__sub{ color:rgba(251,243,228,.68); }

.flavs{
  margin-top:clamp(30px,4vw,50px);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:clamp(18px,2.6vw,32px);
}

.flav{ min-width:0; }
.flav__img{
  position:relative; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/5; background:rgba(255,255,255,.06);
}
.flav__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .5s;
}
.flav:hover .flav__img img{ transform:scale(1.07); }
.flav__tag{
  position:absolute; left:12px; top:12px;
  background:var(--altin); color:var(--kirmizi-derin);
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px;
}
.flav h3{
  font-family:var(--f-display); font-weight:600; font-size:1.24rem;
  margin:16px 0 5px; letter-spacing:-.015em;
}
.flav p{ margin:0; color:rgba(251,243,228,.66); font-size:.92rem; }


/* ─────────── Üretim ─────────── */

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:clamp(18px,2.4vw,30px);
  counter-reset:s;
}
.step{ position:relative; padding-top:26px; border-top:2px solid var(--line); }
.step__n{
  position:absolute; top:-20px; left:0;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--krem); border:2px solid var(--kirmizi); color:var(--kirmizi);
  font-family:var(--f-display); font-weight:800; font-size:1rem;
}
.step h3{ font-family:var(--f-display); font-weight:600; font-size:1.12rem; margin:12px 0 8px; }
.step p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(40px,5vw,64px); }
.badge{
  border:1.5px dashed var(--kahve-acik); color:var(--kahve);
  border-radius:999px; padding:9px 18px;
  font-size:.85rem; font-weight:500;
  background:rgba(255,255,255,.5);
}

/* ─────────── Şanlıurfa ─────────── */

.sec--urfa{
  background:linear-gradient(140deg, var(--kirmizi-koyu), var(--kirmizi-derin) 70%);
  color:var(--krem);
}
.urfa{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,5vw,70px); align-items:center;
}
.urfa__copy p{ color:rgba(251,243,228,.72); max-width:52ch; }
.urfa__addr{
  font-style:normal; margin:26px 0;
  padding-left:16px; border-left:3px solid var(--altin);
  color:var(--krem); line-height:1.7;
}
.urfa__art{ display:grid; place-items:center; }
.urfa__art img{
  width:min(340px,84%);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.5));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{ 50%{ transform:translateY(-16px); } }

/* ─────────── İletişim ─────────── */

.sec--contact{ background:var(--krem-koyu); }
.cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:clamp(14px,2vw,20px);
}
.card{
  display:flex; flex-direction:column; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,32px);
  text-decoration:none;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 28px 50px -32px rgba(42,26,18,.65); border-color:var(--kirmizi); }
.card__k{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--kahve-acik); }
.card__v{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.1rem,1.9vw,1.4rem); letter-spacing:-.02em;
  word-break:break-word;
}
.card__d{ font-size:.9rem; color:var(--ink-soft); }
.card__go{ margin-top:16px; font-weight:600; font-size:.9rem; color:var(--kirmizi); }
.card--wa{ background:linear-gradient(150deg,#1FA855,#137F3D); border-color:transparent; color:#fff; }
.card--wa .card__k,.card--wa .card__d{ color:rgba(255,255,255,.78); }
.card--wa .card__go{ color:#fff; }

/* ─────────── Footer ─────────── */

.foot{ background:var(--ink); color:var(--krem); padding:clamp(52px,7vw,84px) 0 26px; }
.foot__in{
  display:grid; grid-template-columns:1.2fr .8fr 1fr;
  gap:clamp(26px,4vw,50px);
}
.foot__brand{ display:flex; gap:16px; align-items:flex-start; }
.foot__brand img{ width:70px; height:auto; }
.foot__brand p{ margin:0; font-weight:600; line-height:1.6; }
.foot__brand span{ font-weight:400; color:rgba(251,243,228,.55); }
.foot__links{ display:flex; flex-direction:column; gap:9px; }
.foot__links a{ text-decoration:none; color:rgba(251,243,228,.72); font-size:.94rem; transition:color .25s; }
.foot__links a:hover{ color:var(--altin); }
.foot__meta{ display:flex; flex-direction:column; gap:8px; font-size:.94rem; color:rgba(251,243,228,.72); }
.foot__meta a{ text-decoration:none; }
.foot__meta a:hover{ color:var(--altin); }
.foot__bar{
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  margin-top:clamp(34px,5vw,56px); padding-top:22px;
  border-top:1px solid rgba(251,243,228,.14);
  font-size:.84rem; color:rgba(251,243,228,.5);
}
.foot__bar a{ color:var(--altin); text-decoration:none; }

/* ─────────── Yüzen WhatsApp ─────────── */

.fab{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#1FA855; color:#fff;
  box-shadow:0 14px 30px -12px rgba(31,168,85,.9);
  transition:transform .35s var(--ease);
  opacity:0; pointer-events:none;
}
.fab.is-on{ opacity:1; pointer-events:auto; }
.fab:hover{ transform:scale(1.09); }
.fab svg{ width:28px; height:28px; fill:currentColor; }

/* ─────────── Scroll reveal ─────────── */

.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__track,.urfa__art img,.hero__seal svg{ animation:none; }
}

/* ─────────── Duyarlı ─────────── */

@media (max-width:980px){
  .hero__in{ grid-template-columns:1fr; padding-top:20px; }
  .hero__art{ order:-1; max-width:420px; margin-inline:auto; width:100%; }
  .hero{ padding-top:104px; }
  .urfa{ grid-template-columns:1fr; }
  .urfa__art{ order:-1; }
  .foot__in{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}

@media (max-width:760px){
  .nav__burger{ display:flex; }
  .nav__cta{ display:none; }
  .nav__links{
    position:fixed; inset:70px 12px auto 12px;
    flex-direction:column; gap:2px;
    background:var(--krem); border:1px solid var(--line);
    border-radius:var(--r); padding:14px;
    box-shadow:0 30px 60px -30px rgba(42,26,18,.7);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{ padding:12px 8px; border-radius:var(--r-sm); }
  .nav__links a::after{ display:none; }
  .nav{ background:rgba(251,243,228,.9); backdrop-filter:blur(12px); }

  .hero__stats{ gap:22px; }
  .foot__in{ grid-template-columns:1fr; }
  .foot__brand{ grid-column:auto; }
  .fab{ right:14px; bottom:14px; }
}