/* =========================================================
   KAVİS KAHVE — specialty coffee landing
   Palet: espresso #3B2A20 · karamel #B07C4F · krem #FAF4EA
   ========================================================= */
:root{
  --espresso:#3B2A20; --espresso-d:#2A1D16; --espresso-2:#503A2C;
  --caramel:var(--aksan,#B07C4F); --caramel-d:var(--aksan-d,#8f6540);
  --sand:#E5C6A0; --cream:#FAF4EA; --cream-2:#F3E8D6;
  --ink:#3B2A20; --muted:#4A3B32; --line:rgba(59,42,32,.14);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --script:'Caveat',cursive;
  --ease:cubic-bezier(.22,1,.36,1);
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
}
::-moz-selection {
  background: var(--caramel);
  color: #FFFFFF;
}
::selection {
  background: var(--caramel);
  color: #FFFFFF;
}
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
em { font-style: italic; color: var(--caramel); }
.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 30px; box-sizing: border-box; }
.sec { padding: clamp(70px, 10vw, 130px) 0; overflow-x: hidden; }

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:13px;font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--caramel)}
.eyebrow::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--caramel))}
.eyebrow.center::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--caramel),transparent)}
.eyebrow.center{justify-content:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:15px 30px;cursor:pointer;border:1px solid transparent;border-radius:60px;transition:.45s var(--ease);position:relative}
.btn svg{width:16px;height:16px}
.btn-solid{background:var(--espresso);color:var(--cream)}
.btn-solid:hover{background:var(--caramel);transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(59,42,32,.65)}
.btn-ghost{border-color:rgba(59,42,32,.28);color:var(--espresso)}
.btn-ghost:hover{border-color:var(--espresso);background:var(--espresso);color:var(--cream);transform:translateY(-2px)}

/* section heads */
.sec-head{max-width:640px;margin-bottom:56px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(2.2rem,5vw,3.7rem);margin:18px 0 0}
.sec-head .sub{margin-top:16px;color:var(--muted);font-size:1.05rem}
.sec-head.light h2,.sec-head.light .sub{color:var(--cream)}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none;transition-delay:0s}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
.rv.in.d1,.rv.in.d2,.rv.in.d3{transition-delay:0s}

/* ============ NAV ============ */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;transition:.5s var(--ease)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:88px;transition:height .5s var(--ease)}
.nav.scrolled{background:rgba(250,244,234,.95);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 4px 20px rgba(42,29,22,.08);border-bottom:1px solid rgba(176,124,79,.2)}
.nav.scrolled .nav-in{height:68px}
.brand{font-family:var(--serif);font-size:1.75rem;font-weight:500;letter-spacing:.02em;color:var(--cream);display:inline-flex;align-items:baseline}
.brand span{color:var(--caramel);margin-left:2px}
.brand img{height:38px;width:auto}
.nav.scrolled .brand{color:var(--espresso);font-weight:600}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:.9;position:relative;padding:6px 0;transition:.35s;font-weight:400}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--caramel);transition:.4s var(--ease)}
.nav-links a:hover{opacity:1;color:var(--sand)}
.nav-links a:hover::after{width:100%}
.nav.scrolled .nav-links a{color:var(--espresso);opacity:1;font-weight:500}
.nav.scrolled .nav-links a:hover{color:var(--caramel)}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-cta .btn{padding:8px 22px;font-size:.74rem;letter-spacing:.12em;border-radius:24px;box-shadow:0 4px 14px rgba(42,29,22,.15)}
.nav-tel{font-size:.82rem;letter-spacing:.08em;color:var(--cream);font-weight:400}
.nav.scrolled .nav-tel{color:var(--espresso);font-weight:500;opacity:1}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(250,244,234,.4);background:none;border-radius:50%;cursor:pointer;position:relative}
.nav.scrolled .burger{border-color:var(--line)}
.burger span{position:absolute;left:12px;width:20px;height:1.5px;background:var(--cream);transition:.4s var(--ease)}
.nav.scrolled .burger span{background:var(--espresso)}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:26px}
body.menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ============ LUXURY BOUTIQUE MOBILE MENU (SPACIOUS & AIRY ESTATE STYLE) ============ */
body.menu-open {
  overflow: hidden !important;
  height: 100vh !important;
}
.mmenu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 9999;
  background: #18110A !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  overflow: hidden;
}
body.menu-open .mmenu {
  opacity: 1;
  visibility: visible;
}
.mmenu-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 15%, #2F1E14 0%, #120B07 100%);
}
.mmenu-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 22px 32px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Header */
.mmenu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(224, 198, 160, 0.14);
}
.mmenu-brand {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mmenu-brand span {
  color: var(--caramel);
}
.mmenu-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(250, 244, 234, 0.08);
  border: 1px solid rgba(224, 198, 160, 0.2);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}
.mmenu-close svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}
@media (hover: hover) {
  .mmenu-close:hover {
    background: var(--caramel);
    border-color: var(--caramel);
    color: #FFFFFF;
  }
}
.mmenu-close:focus,
.mmenu-close:active {
  outline: none;
  background: rgba(250, 244, 234, 0.15);
  color: var(--cream);
}

/* Main Navigation List Cards (Airy & Spacious) */
.mmenu-body {
  margin: auto 0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
}
.mmenu-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.mc-box {
  background: rgba(250, 244, 234, 0.04);
  border: 1px solid rgba(224, 198, 160, 0.14);
  border-radius: 20px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.25s ease;
  box-sizing: border-box;
  width: 100%;
}
.mc-box:hover {
  background: rgba(176, 124, 79, 0.15);
  border-color: var(--caramel);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.mc-box-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(176, 124, 79, 0.12);
  border: 1px solid rgba(176, 124, 79, 0.25);
  color: var(--caramel);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.mc-box-icon svg {
  width: 22px;
  height: 22px;
}
.mc-box:hover .mc-box-icon {
  transform: scale(1.08);
}
.mc-box-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.mc-box-title {
  font-family: var(--serif);
  font-size: 1.28rem;
  color: var(--cream);
  font-weight: 500;
  line-height: 1.2;
}
.mc-box-sub {
  font-size: 0.8rem;
  color: var(--sand);
  opacity: 0.8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-box-arrow {
  color: rgba(224, 198, 160, 0.4);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: color 0.25s ease, transform 0.25s ease;
}
.mc-box-arrow svg {
  width: 18px;
  height: 18px;
}
.mc-box:hover .mc-box-arrow {
  color: var(--caramel);
  transform: translateX(4px);
}

/* 2-Column Action Cards (ARA & WHATSAPP) */
.mc-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
  width: 100%;
}
.mc-act-card {
  background: rgba(250, 244, 234, 0.04);
  border: 1px solid rgba(224, 198, 160, 0.16);
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1px;
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.mc-act-card:hover {
  background: rgba(176, 124, 79, 0.16);
  border-color: var(--caramel);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.mc-act-icon {
  width: 24px;
  height: 24px;
  color: var(--caramel);
  margin-bottom: 2px;
  transition: transform 0.25s ease, color 0.25s ease;
}
.mc-act-card:hover .mc-act-icon {
  transform: scale(1.1);
  color: var(--sand);
}
.mc-act-title {
  font-family: var(--sans) !important;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream) !important;
}
.mc-act-sub {
  font-family: var(--sans) !important;
  font-size: 0.78rem;
  color: var(--sand) !important;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* Primary CTA Pill Button (Spacious, Single-Line, Never Overflows) */
.mc-main-pill-btn {
  background: var(--caramel);
  color: #FFFFFF !important;
  font-family: var(--sans) !important;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  height: 50px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  width: 100%;
  border: none;
  white-space: nowrap;
  box-shadow: 0 8px 25px rgba(176, 124, 79, 0.4);
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.mc-main-pill-btn:hover {
  background: var(--caramel-d);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(176, 124, 79, 0.55);
}

/* Bottom Phone Line (Clean Modern Sans Digits) */
.mc-footer-phone {
  margin-top: 16px;
  text-align: center;
}
.mc-footer-phone a {
  font-family: var(--sans) !important;
  font-size: 1.12rem !important;
  color: var(--cream) !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: color 0.25s ease;
}
.mc-footer-phone a:hover {
  color: var(--caramel) !important;
}

/* ============ HERO ============ */
.hero{position:relative;min-height:min(100svh,920px);display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:#1a120c center/cover no-repeat;transform:scale(1.08);filter:brightness(.82) saturate(1.05);animation:heroZoom 16s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1.01)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,29,22,.62) 0%,rgba(42,29,22,.4) 45%,rgba(42,29,22,.88) 100%)}
.hero-in{position:relative;z-index:3;max-width:840px;padding:120px 0}
.hero .eyebrow {
  color: var(--sand);
  background: rgba(28, 19, 13, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(229, 198, 160, 0.4);
  padding: 8px 22px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  font-weight: 500;
  display: inline-flex;
}
.hero .eyebrow::before {
  display: none;
}
.hero h1{font-size:clamp(3rem,8.6vw,7rem);color:var(--cream);margin:24px 0 22px;font-weight:400;letter-spacing:-.02em}
.hero h1 em{color:var(--sand)}
.hero p{font-size:clamp(1.02rem,2vw,1.28rem);max-width:560px;color:rgba(250,244,234,.86);font-weight:300;margin-bottom:40px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.hero .btn-ghost{border-color:rgba(250,244,234,.4);color:var(--cream)}
.hero .btn-ghost:hover{background:var(--cream);color:var(--espresso);border-color:var(--cream)}

/* Hero Floating Status Bar Badge */
.hero-float-badge {
  margin-top: 48px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: rgba(30, 20, 14, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(229, 198, 160, 0.35);
  border-radius: 60px;
  padding: 14px 28px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}
.hfb-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hfb-ic {
  font-size: 1.2rem;
}
.hfb-txt {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.hfb-txt strong {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--sand);
  font-weight: 600;
  line-height: 1.2;
}
.hfb-txt span {
  font-size: 0.72rem;
  color: rgba(250, 244, 234, 0.8);
  font-weight: 400;
}
.hfb-sep {
  width: 1px;
  height: 24px;
  background: rgba(229, 198, 160, 0.25);
}

@media (max-width: 768px) {
  .hero-float-badge {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 20px;
    gap: 12px;
    padding: 18px 20px;
  }
  .hfb-sep {
    display: none;
  }
}
/* steam */
.hero-steam{position:absolute;z-index:2;left:50%;top:34%;transform:translateX(-50%);display:flex;gap:14px;opacity:.4}
.hero-steam span{width:5px;height:70px;background:linear-gradient(var(--sand),transparent);border-radius:50%;filter:blur(4px);animation:steam 4s ease-in-out infinite}
.hero-steam span:nth-child(2){animation-delay:.8s;height:90px}
.hero-steam span:nth-child(3){animation-delay:1.6s}
@keyframes steam{0%,100%{opacity:0;transform:translateY(10px) scaleY(.7)}50%{opacity:.5;transform:translateY(-14px) scaleY(1.1)}}
.scrolldown{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:11px;color:rgba(250,244,234,.7);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase}
.scrolldown i{width:1px;height:48px;background:linear-gradient(var(--sand),transparent);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ============ MARQUEE ============ */
.marquee{background:var(--espresso);color:var(--cream);overflow:hidden;padding:12px 0;border-top:1px solid rgba(224,198,160,.16);border-bottom:1px solid rgba(224,198,160,.16);display:flex;gap:34px;user-select:none}
.marquee-group{display:flex;align-items:center;gap:34px;white-space:nowrap;flex-shrink:0;animation:marq 35s linear infinite}
.marquee-group span{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--cream)}
.marquee-group b{color:var(--caramel);font-size:.75rem}
.marquee:hover .marquee-group{animation-play-state:paused}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(calc(-100% - 34px))}}

/* ============ HİKAYE ============ */
.story-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,84px);align-items:center}
.story-media{position:relative}
.story-media img{width:100%;height:min(64vh,620px);object-fit:cover;border-radius:6px;position:relative;z-index:2}
.story-media .frame{position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--caramel);border-radius:6px;z-index:1}
.story-badge{position:absolute;z-index:3;right:-14px;bottom:-14px;width:118px;height:118px;border-radius:50%;background:var(--espresso);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 20px 40px -18px rgba(42,29,22,.6);border:1px solid var(--caramel)}
.story-badge .ss{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sand)}
.story-badge .yr{font-family:var(--serif);font-size:1.9rem;line-height:1;margin:2px 0}
.story-txt h2{font-size:clamp(2.1rem,4.6vw,3.5rem);margin:16px 0 0}
.story-txt .lead{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--espresso);margin:22px 0 14px;line-height:1.3}
.story-txt p{color:var(--muted)}
.sign{font-family:var(--script);font-size:1.5rem;color:var(--caramel);margin-top:18px;line-height:1}
.story-stats{display:flex;gap:34px;margin-top:34px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.story-stats .n{font-family:var(--serif);font-size:2.2rem;color:var(--caramel);font-weight:500;line-height:1}
.story-stats .l{font-size:.8rem;letter-spacing:.08em;color:#4A3B32;text-transform:uppercase;margin-top:6px;font-weight:500}

/* ============ MENÜ ============ */
.menu{background:var(--cream-2)}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,4vw,50px)}
.menu-col{background:transparent;border:none;border-radius:0;padding:0 0 0 0;box-shadow:none;transition:none}
.menu-col:hover{box-shadow:none;border-color:none}
.menu-col-h{display:flex;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:14px;border-bottom:2px solid var(--line)}
.menu-col-h svg{width:26px;height:26px;color:var(--caramel);flex:none}
.menu-col-h h3{font-size:1.7rem;color:var(--espresso)}
.mrow{display:flex;align-items:baseline;gap:10px;padding:16px 0;border-bottom:1px dashed rgba(59,42,32,.16)}
.mrow:last-child{border-bottom:none}
.mrow-t{flex:none;max-width:70%}
.mname{font-family:var(--serif);font-size:1.18rem;color:var(--espresso);display:block;font-weight:600}
.mdesc{font-size:.88rem;color:#4A3B32;font-weight:400}
.mdots{flex:1;border-bottom:1px dotted rgba(59,42,32,.35);transform:translateY(-4px)}
.mprice{flex:none;font-family:var(--serif);font-size:1.2rem;color:var(--caramel);font-weight:600}
.menu-note{text-align:center;margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:20px}
.menu-note p{max-width:600px;color:var(--muted);font-size:.95rem}

/* ============ MENŞE ============ */
.mense {
  position: relative;
  background: var(--espresso-d);
  color: var(--cream);
  padding: clamp(80px, 11vw, 130px) 0;
  overflow: hidden;
}
.mense::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?w=1600&q=60&fm=webp&fit=crop') center/cover no-repeat;
  opacity: .12;
  filter: brightness(0.6) saturate(1.2);
}
.mense::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(42, 29, 22, 0.4) 0%, rgba(22, 14, 9, 0.92) 100%);
  pointer-events: none;
}
.mense .wrap {
  position: relative;
  z-index: 2;
  max-width: 1380px;
  width: 94%;
}
.mense .eyebrow {
  color: var(--caramel);
}

.mense-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 10px;
}
.mense-card {
  position: relative;
  padding: 36px 20px 36px;
  border: 1px solid rgba(224, 198, 160, 0.25);
  border-radius: 16px;
  background: rgba(30, 20, 14, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  transition-delay: 0s !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mense-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--caramel), transparent);
  opacity: 0.3;
  transition: opacity 0.45s ease, height 0.45s ease;
}

.mense-no {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--caramel);
  letter-spacing: 0.12em;
  transition: color 0.35s ease, transform 0.35s ease;
  display: inline-block;
}
.mense-card h3 {
  font-size: 1.75rem;
  font-family: var(--serif);
  color: #ffffff;
  margin: 12px 0 6px;
  letter-spacing: -0.01em;
  transition: color 0.35s ease;
}
.mense-bolge {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--caramel);
  font-weight: 500;
  margin-bottom: 16px;
  opacity: 0.95;
  transition: color 0.35s ease;
}
.mense-card p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(250, 244, 234, 0.92);
  font-weight: 300;
  margin: 0;
  position: relative;
  z-index: 2;
  transition: color 0.35s ease;
}

.mense-bean {
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 90px;
  height: 90px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border: 1.5px solid rgba(224, 198, 160, 0.22);
  transform: rotate(-25deg);
  pointer-events: none;
  transition: all 0.5s var(--ease);
}
.mense-bean::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-left: 1.5px solid rgba(224, 198, 160, 0.22);
  border-radius: 50%;
  transition: all 0.5s var(--ease);
}

.mense-card:hover {
  background: linear-gradient(160deg, rgba(58, 39, 28, 0.94), rgba(36, 23, 16, 0.98));
  border-color: var(--caramel);
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 22px 48px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(176, 124, 79, 0.28);
}
.mense-card:hover::before {
  opacity: 1;
  height: 4px;
}
.mense-card:hover .mense-no {
  color: var(--sand);
  transform: translateX(4px);
  text-shadow: 0 0 10px rgba(224, 198, 160, 0.5);
}
.mense-card:hover h3 {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.mense-card:hover .mense-bolge {
  color: var(--sand);
}
.mense-card:hover p {
  color: #ffffff;
}
.mense-card:hover .mense-bean {
  border-color: var(--caramel);
  transform: rotate(10deg) scale(1.25);
  opacity: 0.7;
}
.mense-card:hover .mense-bean::after {
  border-left-color: var(--caramel);
}

.mense-tags {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-top: 18px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.mense-tags span {
  font-size: 0.68rem;
  color: var(--sand);
  background: rgba(250, 244, 234, 0.08);
  border: 1px solid rgba(229, 198, 160, 0.25);
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.mense-card:hover .mense-tags span {
  background: rgba(176, 124, 79, 0.25);
  border-color: var(--caramel);
  color: #FFFFFF;
}

/* ============ GALERİ & LIGHTBOX ============ */
.gal-sec {
  background: var(--cream);
  padding: clamp(70px, 9vw, 110px) 0 clamp(30px, 4vw, 50px);
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 270px;
  gap: 20px;
}
.gal-item {
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(42, 29, 22, 0.08);
  border: 1px solid var(--line);
  transition: all 0.4s var(--ease);
}
.gal-item.wide {
  grid-column: span 2;
}
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.gal-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 14, 9, 0.1) 0%, rgba(22, 14, 9, 0.88) 100%);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  transition: opacity 0.4s var(--ease);
}
.gal-zoom-ic {
  align-self: flex-end;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(250, 244, 234, 0.2);
  backdrop-filter: blur(8px);
  color: var(--cream);
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 244, 234, 0.3);
  transform: translateY(-8px);
  transition: all 0.35s var(--ease);
}
.gal-zoom-ic svg {
  width: 18px;
  height: 18px;
}
.gal-txt h4 {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--cream);
  margin-bottom: 4px;
  transform: translateY(8px);
  transition: transform 0.4s var(--ease);
}
.gal-txt p {
  font-size: 0.84rem;
  color: rgba(250, 244, 234, 0.85);
  margin: 0;
  transform: translateY(8px);
  transition: transform 0.4s var(--ease) 0.05s;
}

.gal-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(42, 29, 22, 0.18);
  border-color: var(--caramel);
}
.gal-item:hover img {
  transform: scale(1.07);
}
.gal-item:hover .gal-overlay {
  opacity: 1;
}
.gal-item:hover .gal-zoom-ic {
  transform: translateY(0);
  background: var(--caramel);
  color: var(--espresso-d);
}
.gal-item:hover .gal-txt h4,
.gal-item:hover .gal-txt p {
  transform: translateY(0);
}

/* Lightbox Modal */
.gal-lightbox {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #0E0906;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  overflow: hidden;
}
.gal-lightbox.active {
  opacity: 1;
  visibility: visible;
}
.gal-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 9, 6, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.gal-lightbox-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
}
.gal-lightbox-count {
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  color: var(--sand);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(224, 198, 160, 0.25);
  padding: 6px 14px;
  border-radius: 20px;
}
.gal-lightbox-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.gal-lightbox-close:hover {
  background: var(--caramel);
  color: var(--espresso-d);
  transform: rotate(90deg);
}

.gal-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.3rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  backdrop-filter: blur(8px);
}
.gal-lightbox-nav.prev { left: 20px; }
.gal-lightbox-nav.next { right: 20px; }

@media (hover: hover) {
  .gal-lightbox-nav:hover {
    background: var(--caramel);
    color: #ffffff;
    border-color: var(--caramel);
    transform: translateY(-50%) scale(1.08);
  }
}
.gal-lightbox-nav:active {
  background: var(--caramel);
  color: #ffffff;
  border-color: var(--caramel);
}
.gal-lightbox-nav:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.gal-lightbox-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.gal-lightbox-img-wrap {
  max-width: 100%;
  max-height: 65vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(224, 198, 160, 0.2);
  background: #000;
}
.gal-lightbox-img-wrap img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  display: block;
  transition: opacity 0.25s ease;
}

.gal-lightbox-caption {
  margin-top: 16px;
  width: 100%;
  max-width: 680px;
  text-align: center;
}
.gal-lightbox-text h4 {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 4px;
}
.gal-lightbox-text p {
  font-size: 0.88rem;
  color: rgba(250, 244, 234, 0.85);
  margin: 0;
  line-height: 1.45;
}

/* Gallery Lightbox Pagination Dots */
.gal-lightbox-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
}
.gal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(250, 244, 234, 0.25);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  display: inline-block;
}
.gal-dot.active {
  width: 22px;
  height: 7px;
  border-radius: 4px;
  background: var(--caramel);
  box-shadow: 0 0 12px rgba(176, 124, 79, 0.7);
}
@media (hover: hover) {
  .gal-dot:hover:not(.active) {
    background: rgba(250, 244, 234, 0.65);
    transform: scale(1.2);
  }
}
  border-radius: 20px;
  background: rgba(176, 124, 79, 0.15);
  border: 1px solid rgba(176, 124, 79, 0.3);
  white-space: nowrap;
}

/* ============ YORUM (TATLI YORUM KARTLARI) ============ */
.quote-sec,
section.sec.quote-sec {
  background: var(--cream-2);
  padding: 30px 0 !important;
}
.sec-head-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
  gap: 20px;
}
.sec-head-flex .sec-head {
  margin-bottom: 0;
}

.q-nav-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.q-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--espresso);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) {
  .q-nav-btn:hover {
    background: var(--espresso);
    color: var(--cream);
    border-color: var(--espresso);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 42, 32, 0.15);
  }
}
.q-nav-btn:active,
.q-nav-btn.active-flash {
  background: var(--caramel) !important;
  color: #FFFFFF !important;
  border-color: var(--caramel) !important;
  transform: scale(0.92) !important;
  box-shadow: 0 4px 14px rgba(176, 124, 79, 0.4) !important;
}
.q-nav-btn:focus {
  outline: none;
}

.q-cards-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0 20px;
  margin: 0;
}
.q-cards-wrapper::-webkit-scrollbar {
  display: none;
}
.q-cards-track {
  display: flex;
  gap: 20px;
}

.q-card-item {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(59, 42, 32, 0.05);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.q-card-item:hover {
  transform: translateY(-6px);
  border-color: var(--caramel);
  box-shadow: 0 16px 40px rgba(59, 42, 32, 0.12);
}

.q-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.q-stars {
  color: var(--caramel);
  font-size: 1.05rem;
  letter-spacing: 2px;
}
.q-quote-icon {
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--caramel);
  opacity: 0.35;
}

.q-card-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--espresso);
  margin-bottom: 24px;
  flex: 1;
}

.q-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.q-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--caramel), var(--espresso-2));
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.q-card-author {
  display: flex;
  flex-direction: column;
}
.q-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.q-card-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--espresso);
}
.q-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #2E7D32;
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid rgba(46, 125, 50, 0.2);
  padding: 2px 7px;
  border-radius: 12px;
}
.q-verified-badge svg {
  width: 11px;
  height: 11px;
}
.q-card-tag {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 980px) {
  .q-card-item {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}
@media (max-width: 600px) {
  .q-card-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .sec-head-flex {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============ HAKKIMIZDA (ABOUT US) ============ */
.about-sec {
  background: var(--cream);
  padding-top: clamp(70px, 7vw, 95px);
  padding-bottom: clamp(90px, 11vw, 140px);
  position: relative;
  overflow: hidden;
}
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* Layered Image Composition */
.about-imgs {
  position: relative;
  padding-bottom: 50px;
  padding-right: 40px;
}
.about-img-main {
  width: 88%;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(59, 42, 32, 0.12);
  border: 1px solid var(--line);
}
.about-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.about-imgs:hover .about-img-main img {
  transform: scale(1.05);
}

.about-img-sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 250px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(42, 29, 22, 0.2);
  border: 4px solid var(--cream);
}
.about-img-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-badge {
  position: absolute;
  left: 24px;
  top: 24px;
  background: rgba(42, 29, 22, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(224, 198, 160, 0.3);
  color: var(--cream);
  padding: 14px 20px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  z-index: 3;
}
.ab-num {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--caramel);
  line-height: 1;
}
.ab-txt {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--sand);
  margin-top: 2px;
}

/* About Content Typography */
.about-content h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  color: var(--espresso);
  margin: 14px 0 20px;
  line-height: 1.25;
}
.about-content h2 em {
  color: var(--caramel);
  font-style: italic;
}
.about-lead {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-style: italic;
  color: var(--espresso-2);
  line-height: 1.55;
  margin-bottom: 16px;
  font-weight: 400;
}
.about-desc {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Feature Cards */
.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.af-item {
  background: var(--cream-2);
  border: 1px solid rgba(59, 42, 32, 0.12);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.3s ease;
}
.af-item:hover {
  border-color: rgba(176, 124, 79, 0.4);
  transform: translateY(-2px);
  background: rgba(250, 244, 234, 0.8);
}
.af-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(176, 124, 79, 0.1);
  color: var(--caramel);
  border: 1px solid rgba(176, 124, 79, 0.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.af-icon svg {
  width: 22px;
  height: 22px;
}
.af-txt h5 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--espresso);
  margin-bottom: 3px;
  line-height: 1.25;
}
.af-txt span {
  font-size: 0.84rem;
  color: var(--muted);
  display: block;
  line-height: 1.4;
  font-weight: 400;
}

/* Quote Box */
.about-quote-box {
  background: linear-gradient(135deg, rgba(59, 42, 32, 0.04), rgba(176, 124, 79, 0.08));
  border-left: 3px solid var(--caramel);
  padding: 18px 22px;
  border-radius: 0 14px 14px 0;
  position: relative;
}
.aq-mark {
  position: absolute;
  right: 18px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  color: var(--caramel);
  opacity: 0.2;
}
.about-quote-box p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--espresso);
  line-height: 1.5;
  margin-bottom: 6px;
}
.about-quote-box span {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--caramel);
  font-weight: 600;
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-imgs {
    padding-bottom: 40px;
    padding-right: 20px;
  }
  .about-img-main {
    width: 100%;
    height: 320px;
  }
  .about-img-sub {
    width: 52%;
    height: 180px;
  }
  .about-features {
    grid-template-columns: 1fr;
  }
}

/* ============ ZİYARET / RESERVE CTA ============ */
.reserve {
  position: relative;
  padding: clamp(100px, 13vw, 160px) 0;
  text-align: center;
  overflow: hidden;
}
.reserve-bg {
  position: absolute;
  inset: 0;
  background: #1a120c center/cover no-repeat;
  transform: scale(1.05);
}
.reserve::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 20, 14, 0.72) 0%, rgba(20, 13, 8, 0.84) 100%);
}

.reserve-in {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.reserve-in h2 {
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  color: var(--cream);
  margin: 18px 0 20px;
  line-height: 1.2;
}
.reserve-in h2 em {
  color: var(--caramel);
  font-style: italic;
}
.reserve-in p {
  color: rgba(250, 244, 234, 0.92);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.6;
  max-width: 660px;
  margin: 0 auto 38px;
}

.reserve-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Solid Cream Button - Ultra High Contrast on Dark Background */
.btn-reserve-cream {
  background: var(--cream);
  color: var(--espresso) !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 14px 34px;
  border-radius: 40px;
  border: 1px solid var(--cream);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: all 0.35s var(--ease);
  display: inline-flex;
  align-items: center;
}
.btn-reserve-cream:hover {
  background: var(--caramel);
  color: var(--cream) !important;
  border-color: var(--caramel);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(176, 124, 79, 0.45);
}

.btn-reserve-outline {
  background: rgba(250, 244, 234, 0.08);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(250, 244, 234, 0.5);
  color: var(--cream) !important;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 14px 30px;
  border-radius: 40px;
  transition: all 0.35s var(--ease);
  display: inline-flex;
  align-items: center;
}
.btn-reserve-outline:hover {
  background: var(--cream);
  color: var(--espresso) !important;
  border-color: var(--cream);
  transform: translateY(-3px);
}

/* ============ İLETİŞİM / MAP SECTION ============ */
.info-sec {
  background: var(--cream);
  padding: clamp(80px, 10vw, 130px) 0;
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: stretch;
  margin-top: 42px;
}

.info-left-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}

.info-card-item {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s var(--ease);
  box-sizing: border-box;
  width: 100%;
}
.info-card-item:hover {
  background: #FFFFFF;
  border-color: var(--caramel);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59, 42, 32, 0.06);
}

.info-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(176, 124, 79, 0.14);
  border: 1px solid rgba(176, 124, 79, 0.22);
  color: var(--caramel);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.info-card-item:hover .info-card-icon {
  background: var(--caramel);
  color: #FFFFFF;
  border-color: var(--caramel);
}
.info-card-icon svg {
  width: 20px;
  height: 20px;
}

.info-card-content {
  flex: 1;
  min-width: 0;
}
.info-card-content h4 {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--espresso);
  margin-bottom: 2px;
  font-weight: 600;
  line-height: 1.2;
}
.info-card-content p,
.info-card-content p a {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: color 0.25s ease;
}
.info-card-content p a:hover {
  color: var(--caramel);
}

.info-action-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
  width: 100%;
}

.btn-info-wa {
  background: #25D366;
  color: #FFFFFF !important;
  font-weight: 500;
  font-size: 0.84rem;
  height: 48px;
  padding: 0 16px;
  border-radius: 30px;
  border: 1px solid #25D366;
  box-sizing: border-box;
  transition: all 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
  width: 100%;
}
.btn-info-wa:hover {
  background: #1eb957;
  border-color: #1eb957;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

.btn-info-map {
  background: var(--cream-2);
  color: var(--espresso) !important;
  font-weight: 500;
  font-size: 0.84rem;
  height: 48px;
  padding: 0 16px;
  border-radius: 30px;
  border: 1px solid var(--line);
  box-sizing: border-box;
  transition: all 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.btn-info-map:hover {
  border-color: var(--espresso);
  background: rgba(42, 29, 22, 0.08);
  transform: translateY(-2px);
}

.info-map-box {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(59, 42, 32, 0.06);
  display: flex;
  flex-direction: column;
}

.map-head {
  padding: 14px 20px;
  background: #faf4ea;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--espresso);
}
.map-head a {
  color: var(--caramel);
  font-weight: 500;
  transition: opacity 0.2s;
}
.map-head a:hover {
  opacity: 0.8;
}

.info-map {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: none;
}

@media (max-width: 900px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  .info-map {
    min-height: 280px;
  }
}

/* ============ FOOTER ============ */
.ftr {
  background: var(--cream-2);
  color: var(--espresso);
  padding: 20px 0 20px;
  position: relative;
  border-top: 1px solid var(--line);
}

.ftr-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 22px;
}

.ftr-brand-col .brand {
  font-size: 2.2rem;
  color: var(--espresso);
}
.ftr-text {
  font-size: 0.94rem;
  color: #3B2A20;
  line-height: 1.65;
  margin: 16px 0 24px;
  max-width: 330px;
  font-weight: 400;
}

.ftr-soc-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ftr-sq-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  color: var(--espresso);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(59, 42, 32, 0.06);
  transition: all 0.25s ease;
}
.ftr-sq-btn svg {
  width: 19px;
  height: 19px;
}
.ftr-sq-btn:hover {
  background: var(--caramel);
  color: #FFFFFF;
  border-color: var(--caramel);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(176, 124, 79, 0.35);
}

.ftr-col h4 {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso);
  margin-bottom: 22px;
}

.ftr-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ftr-col ul a {
  color: #3B2A20;
  font-size: 0.94rem;
  font-weight: 450;
  transition: color 0.25s ease;
}
.ftr-col ul a:hover {
  color: var(--caramel);
}

.ftr-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ftr-c-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3B2A20;
  font-size: 0.94rem;
  font-weight: 450;
  transition: color 0.25s ease;
}
.ftr-c-item svg {
  width: 18px;
  height: 18px;
  color: var(--caramel);
  flex-shrink: 0;
}
a.ftr-c-item:hover {
  color: var(--caramel);
}

.ftr-sub-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: #4A3B32;
  flex-wrap: wrap;
}
.ftr-copy-text {
  color: #4A3B32;
  font-weight: 400;
}
.ftr-legal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ftr-legal-nav a {
  color: #4A3B32;
  font-weight: 450;
  transition: color 0.25s ease;
}
.ftr-legal-nav a:hover {
  color: var(--caramel);
}
.ftr-legal-nav .sep {
  color: rgba(59, 42, 32, 0.3);
}

.ftr-ltw-credit {
  color: #4A3B32;
  font-weight: 400;
}
.ftr-ltw-credit a {
  color: var(--caramel);
  font-weight: 600;
  margin-left: 3px;
  transition: color 0.25s ease;
}
.ftr-ltw-credit a:hover {
  color: var(--espresso);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .ftr-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .ftr-sub-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
@media (max-width: 600px) {
  .ftr-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ WHATSAPP FLOAT ============ */
.wa{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:.4s var(--ease)}
.wa svg{width:28px;height:28px;color:#fff}
.wa:hover{transform:scale(1.08) translateY(-2px)}

/* Scrolled Cream Navigation for Legal Pages */
.nav.nav-legal {
  background: rgba(250, 244, 234, 0.98) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(176, 124, 79, 0.2) !important;
  box-shadow: 0 4px 20px rgba(42, 29, 22, 0.08) !important;
}
.nav.nav-legal .brand {
  color: var(--espresso) !important;
  font-weight: 600 !important;
}
.nav.nav-legal .nav-links a {
  color: var(--espresso) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
.nav.nav-legal .nav-links a:hover {
  color: var(--caramel) !important;
}
.nav.nav-legal .nav-tel {
  color: var(--espresso) !important;
  font-weight: 500 !important;
}
.nav.nav-legal .burger {
  border-color: var(--line) !important;
}
.nav.nav-legal .burger span {
  background: var(--espresso) !important;
}

/* ============ LEGAL PAGES STYLING ============ */
.legal-sec {
  background: var(--cream);
  padding: clamp(120px, 14vw, 150px) 0 clamp(60px, 8vw, 90px);
  min-height: 70vh;
}
.legal-container {
  max-width: 860px;
  margin: 0 auto;
}
.legal-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.legal-header .eyebrow {
  margin-bottom: 12px;
}
.legal-header h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  color: var(--espresso);
  line-height: 1.25;
  margin-bottom: 12px;
}
.legal-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--muted);
}
.legal-breadcrumb a {
  color: var(--caramel);
  font-weight: 500;
  transition: color 0.2s ease;
}
.legal-breadcrumb a:hover {
  color: var(--espresso);
}
.legal-breadcrumb .sep {
  opacity: 0.4;
}

.legal-content {
  color: #3D2D24;
  font-size: 1.05rem;
  line-height: 1.85;
}
.legal-content p {
  color: #4A3B32;
  font-size: 1.02rem;
  line-height: 1.85;
  margin: 0 0 24px;
  font-weight: 400;
}
.legal-content p.legal-lead {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-style: italic;
  color: var(--espresso);
  line-height: 1.65;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.legal-content h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--espresso);
  margin: 40px 0 16px;
  font-weight: 500;
}
.legal-content h2:first-of-type {
  margin-top: 10px;
}
.legal-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-content li {
  position: relative;
  padding-left: 24px;
  color: #4A3B32;
  line-height: 1.75;
}
.legal-content li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--caramel);
}
.legal-contact-box {
  margin-top: 40px;
  padding: 24px 28px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.legal-contact-txt h5 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--espresso);
  margin-bottom: 4px;
}
.legal-contact-txt p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .story-grid,.info-grid{grid-template-columns:1fr;gap:48px}
  .story-media{max-width:520px}
  .mense-grid{grid-template-columns:1fr 1fr}
  .info-map{height:320px}
}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-tel{display:none}
  .nav-cta>.btn{display:none}
  .burger{display:block}
  .menu-cols{grid-template-columns:1fr;gap:44px}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .mense-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .gal .wide{grid-column:span 2}
  .story-stats{gap:22px}
  .mrow-t{max-width:62%}
  .story-badge{width:96px;height:96px}
}

/* ============ MENU ACTIONS & MODAL ============ */
.menu-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.btn-menu-modal {
  background: var(--espresso);
  color: var(--cream);
  border: 1px solid var(--caramel);
  cursor: pointer;
}
.btn-menu-modal:hover {
  background: var(--caramel);
  color: var(--espresso-d);
}

body.modal-open {
  overflow: hidden;
}
.menu-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.menu-modal.active {
  opacity: 1;
  visibility: visible;
}
.menu-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 14, 9, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.menu-modal-dialog {
  position: relative;
  z-index: 2;
  width: min(94vw, 920px);
  max-height: min(90vh, 850px);
  background: #FAF5EE;
  border: 1px solid #E4D5C3;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(44, 31, 23, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(0.97);
  transition: transform .35s var(--ease);
}
.menu-modal.active .menu-modal-dialog {
  transform: translateY(0) scale(1);
}

.menu-modal-header {
  padding: 22px 32px 16px;
  background: #FAF5EE;
  color: #281C15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #EAE0D2;
}
.menu-modal-brand .eyebrow {
  color: #B07C4F;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  margin-bottom: 3px;
  font-weight: 600;
}
.menu-modal-brand h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-family: var(--serif);
  color: #281C15;
  margin: 0;
  font-weight: 600;
}
.menu-modal-brand h2 em {
  color: #B07C4F;
  font-style: italic;
}
.menu-modal-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #EFE4D6;
  border: 1px solid #E0C6A0;
  color: #281C15;
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .25s ease;
}
.menu-modal-close:hover {
  background: #B07C4F;
  color: #FFFFFF;
  border-color: #B07C4F;
  transform: rotate(90deg);
}

.menu-modal-toolbar {
  padding: 16px 32px;
  background: #F3EADF;
  border-bottom: 1px solid #E4D5C3;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.menu-search-box {
  position: relative;
  width: 100%;
}
.menu-search-box .search-ic {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #B07C4F;
  pointer-events: none;
}
.menu-search-box input {
  width: 100%;
  padding: 12px 42px 12px 46px;
  background: #FFFFFF;
  border: 1.5px solid #E0C6A0;
  border-radius: 30px;
  color: #281C15;
  font-family: var(--sans);
  font-size: 0.94rem;
  outline: none;
  transition: all .25s ease;
  box-shadow: 0 2px 8px rgba(59, 42, 32, 0.05);
}
.menu-search-box input::placeholder {
  color: #8C7867;
}
.menu-search-box input:focus {
  border-color: #B07C4F;
  box-shadow: 0 0 0 3px rgba(176, 124, 79, 0.2);
}
.menu-search-box .clear-search {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
}
.menu-tabs-wrapper {
  margin: 0;
  padding: 0;
}
.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.menu-tab {
  padding: 8px 18px;
  border-radius: 30px;
  border: 1.5px solid #E2D5C5;
  background: #FFFFFF;
  color: #3D2D24;
  font-size: 0.84rem;
  font-family: var(--sans);
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(59, 42, 32, 0.04);
  transition: all 0.25s ease;
}
.menu-tab:hover {
  background: #FAF4EA;
  color: #B07C4F;
  border-color: #B07C4F;
  transform: translateY(-1px);
}
.menu-tab.active {
  background: #B07C4F;
  color: #FFFFFF;
  border-color: #B07C4F;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(176, 124, 79, 0.35);
}

.menu-modal-body {
  padding: 26px 32px 32px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
  background: #FAF5EE;
  scrollbar-width: thin;
  scrollbar-color: rgba(176, 124, 79, 0.4) #FAF5EE;
}
.menu-modal-body::-webkit-scrollbar {
  width: 8px;
}
.menu-modal-body::-webkit-scrollbar-track {
  background: #FAF5EE;
}
.menu-modal-body::-webkit-scrollbar-thumb {
  background: rgba(176, 124, 79, 0.4);
  border-radius: 4px;
}
.menu-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--caramel);
}
.modal-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--caramel);
}
.modal-cat-header h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--espresso);
  margin: 0;
  font-weight: 600;
}
.modal-cat-count {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caramel);
  font-weight: 600;
  background: rgba(176, 124, 79, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
}
.modal-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.modal-item-card {
  background: #FFFFFF;
  border: 1px solid #EAE0D2;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 4px 14px rgba(44, 31, 23, 0.03);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.modal-item-card:hover {
  border-color: var(--caramel);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(44, 31, 23, 0.08);
}
.item-main {
  flex: 1;
  min-width: 0;
}
.item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.item-name {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--espresso);
}
.item-badge {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(176, 124, 79, 0.12);
  color: var(--caramel);
  border: 1px solid rgba(176, 124, 79, 0.3);
  font-family: var(--sans);
  font-weight: 600;
}
.item-desc {
  font-size: 0.86rem;
  color: #4A3B32;
  margin: 0;
  line-height: 1.45;
  font-weight: 400;
}
.item-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.item-price {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--caramel);
  white-space: nowrap;
}

.no-match-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
}
.no-match-msg svg {
  width: 44px;
  height: 44px;
  color: var(--caramel);
  margin-bottom: 12px;
}

.menu-modal-footer {
  padding: 16px 32px;
  background: #F3EADF;
  border-top: 1px solid #E4D5C3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.modal-footer-note {
  font-size: 0.86rem;
  color: #2C1F17;
  font-weight: 500;
  margin: 0;
  flex: 1;
  background: #EFE4D6;
  border: 1px solid #D8C2A8;
  padding: 10px 16px;
  border-radius: 12px;
  line-height: 1.5;
}
.modal-wa-cta {
  width: 100%;
  max-width: 380px;
  height: 42px;
  padding: 0 16px;
  background: #25D366;
  color: #FFFFFF !important;
  border-radius: 40px;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
  transition: all 0.3s ease;
  border: none;
  text-transform: none;
  letter-spacing: 0;
}
.modal-wa-cta:hover {
  background: #1eb957;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .menu-modal-dialog {
    width: 100vw;
    height: 94vh;
    max-height: 94vh;
    border-radius: 20px 20px 0 0;
    margin-top: auto;
  }
  .menu-modal-header {
    padding: 18px 20px 14px;
  }
  .menu-modal-toolbar {
    padding: 14px 20px 10px;
  }
  .menu-tabs-wrapper {
    margin: 0 -20px;
    padding: 0 20px;
  }
  .menu-modal-body {
    padding: 18px 20px 24px;
  }
  .modal-items-grid {
    grid-template-columns: 1fr;
  }
  .menu-modal-footer {
    padding: 14px 20px;
    flex-direction: column;
    text-align: center;
  }
}

/* ============ KAVİS NİTELİKLİ KAHVE STANDARTLARI (SPLIT SHOWCASE) ============ */
.pillars-sec {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: clamp(80px, 10vw, 130px) 0;
}
.pillars-split-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.pillars-img-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(59, 42, 32, 0.12);
  height: 100%;
  min-height: 520px;
}
.pillars-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.pillars-img-wrap:hover img {
  transform: scale(1.04);
}
.pillars-img-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(42, 29, 22, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(224, 198, 160, 0.3);
  border-radius: 18px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cream);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.pib-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--sand);
  letter-spacing: -0.01em;
}
.pib-txt {
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 244, 234, 0.85);
  font-weight: 450;
  line-height: 1.3;
}

.pillars-content h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--espresso);
  margin: 14px 0 16px;
}
.pillars-sub {
  font-size: 1.02rem;
  color: #4A3B32;
  line-height: 1.6;
  margin-bottom: 32px;
}
.pillars-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pillar-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(59, 42, 32, 0.03);
  transition: all 0.35s var(--ease);
}
.pillar-row:hover {
  transform: translateX(6px);
  border-color: var(--caramel);
  box-shadow: 0 12px 30px rgba(59, 42, 32, 0.08);
}
.pr-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--caramel);
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  margin-top: 2px;
}
.pr-info h4 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: 6px;
  line-height: 1.3;
}
.pr-info p {
  font-size: 0.91rem;
  color: #4A3B32;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 992px) {
  .pillars-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pillars-img-wrap {
    min-height: 380px;
  }
}

/* ============ ZİYARETÇİ REHBERİ & KONFOR ALANLARI ============ */
.guide-sec {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}
.guide-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(59, 42, 32, 0.04);
  transition: all 0.35s var(--ease);
}
.guide-card:hover {
  transform: translateY(-4px);
  border-color: var(--caramel);
  box-shadow: 0 16px 36px rgba(59, 42, 32, 0.08);
}
.guide-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.guide-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cream);
  color: var(--caramel);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(176, 124, 79, 0.2);
}
.guide-icon svg {
  width: 22px;
  height: 22px;
}
.guide-head h4 {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.3;
}
.guide-card p {
  font-size: 0.94rem;
  color: #4A3B32;
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

@media (max-width: 768px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ BARİSTA İMZA EŞLEŞMELERİ ============ */
.pairings-box {
  margin-top: 60px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 42px 36px;
}
.pairings-head {
  text-align: center;
  margin-bottom: 32px;
}
.pairings-head h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--espresso);
  margin-top: 8px;
}
.pairings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pairing-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(59, 42, 32, 0.04);
  transition: all 0.35s var(--ease);
}
.pairing-card:hover {
  transform: translateY(-4px);
  border-color: var(--caramel);
  box-shadow: 0 14px 34px rgba(59, 42, 32, 0.09);
}
.pair-badge {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--caramel);
  margin-bottom: 12px;
}
.pair-items {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: 12px;
  line-height: 1.35;
}
.pi-plus {
  color: var(--caramel);
  font-weight: 400;
}
.pairing-card p {
  font-size: 0.88rem;
  color: #4A3B32;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .pairings-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ KAVİS RAKAMLARLA BANNER ============ */
.atelier-strip {
  background: var(--espresso-d);
  color: var(--cream);
  padding: 54px 0;
  border-top: 1px solid rgba(176, 124, 79, 0.2);
  border-bottom: 1px solid rgba(176, 124, 79, 0.2);
  position: relative;
}
.atelier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.at-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.at-num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 400;
  color: var(--sand);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.at-lbl {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 244, 234, 0.85);
  font-weight: 450;
  max-width: 180px;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .atelier-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
}

/* Menu Buttons Equal Sizing */
.menu-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.menu-actions .btn {
  min-width: 235px;
  height: 52px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  box-sizing: border-box;
}

/* ============ SIKÇA SORULAN SORULAR (SSS) ============ */
.faq-sec {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding-bottom: clamp(45px, 5vw, 60px);
}
.faq-accordion {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq-item:hover {
  border-color: rgba(176, 124, 79, 0.5);
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 24px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--espresso);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: color 0.25s ease;
}
.faq-question:hover {
  color: var(--caramel);
}
.faq-icon {
  width: 18px;
  height: 18px;
  color: var(--caramel);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), padding 0.4s var(--ease);
  padding: 0 24px;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 24px 20px;
}
.faq-answer p {
  font-size: 0.94rem;
  color: #2A1D16;
  line-height: 1.72;
  margin: 0;
  border-top: 1px solid rgba(59, 42, 32, 0.1);
  padding-top: 14px;
  font-weight: 400;
}

/* =========================================================
   MASTER RESPONSIVE & MOBILE / TABLET OPTIMIZATIONS
   ========================================================= */

/* --- TABLET & MEDIUM SCREENS (<= 992px) --- */
@media (max-width: 992px) {
  .sec {
    padding: clamp(60px, 8vw, 90px) 0;
  }
  .story-grid,
  .info-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .story-media {
    max-width: 100%;
  }
  .pillars-split-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .pillars-img-wrap {
    min-height: 380px;
  }
  .mense-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* --- SMALL TABLET & PHONES (<= 768px) --- */
@media (max-width: 768px) {
  .wrap {
    padding: 0 20px;
  }
  .nav-links,
  .nav-tel,
  .nav-cta > .btn {
    display: none;
  }
  .burger {
    display: block;
  }
  .hero-in {
    padding: 105px 0 70px;
  }
  .story-media img {
    height: 360px;
  }
  .menu-cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pairings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pairings-box {
    padding: 28px 20px;
    margin-top: 36px;
    border-radius: 20px;
  }
  .atelier-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .menu-tabs-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .menu-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
  }
  .menu-tab {
    padding: 7px 8px;
    font-size: 0.76rem;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 34px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }
  .menu-modal-dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .menu-modal-header {
    padding: 16px 18px 12px;
  }
  .menu-modal-toolbar {
    padding: 12px 18px 10px;
  }
  .menu-modal-body {
    padding: 16px 18px 24px;
  }
  .modal-items-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ftr-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* --- MOBILE DEVICES (<= 640px) --- */
@media (max-width: 640px) {
  .info-left-cards {
    gap: 10px;
  }
  .info-card-item {
    min-height: 72px;
    padding: 14px 16px;
    border-radius: 16px;
    box-sizing: border-box;
  }
  .ftr-sub-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 24px;
  }
  .info-action-btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 14px;
  }
  .btn-info-wa, .btn-info-map {
    width: 100%;
    padding: 0 10px;
    height: 44px;
    font-size: 0.78rem;
    white-space: nowrap;
    justify-content: center;
    box-sizing: border-box;
  }
  .gal-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .gal-lightbox-nav.prev { left: 10px; }
  .gal-lightbox-nav.next { right: 10px; }
  .gal-lightbox-img-wrap {
    max-height: 55vh;
  }
  .gal-lightbox-img-wrap img {
    max-height: 55vh;
  }
  .hero .eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    word-break: break-word;
    line-height: 1.35;
  }
  .story-media .frame {
    inset: 10px 0 -10px 10px;
  }
  .legal {
    padding: 40px 18px 60px;
  }
  .sec-head h2 {
    font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  }
  .mense-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mense-tags {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .mense-tags::-webkit-scrollbar {
    display: none;
  }
  .gal-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
    gap: 12px;
  }
  .gal-item.wide {
    grid-column: span 1;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .about-img-main {
    height: 280px;
    width: 100%;
  }
  .about-img-sub {
    height: 160px;
    width: 58%;
  }
  .about-imgs {
    padding-bottom: 35px;
    padding-right: 25px;
  }
  .faq-question {
    padding: 16px 18px;
    font-size: 0.96rem;
  }
  .faq-answer {
    padding: 0 18px;
  }
  .faq-item.active .faq-answer {
    padding: 0 18px 18px;
  }
  .ftr-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ftr-sub-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-top: 22px;
    padding-bottom: 0px;
  }
  .ftr-copy-text {
    font-size: 0.8rem;
    color: #4A3B32;
    text-align: center;
  }
  .ftr-legal-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    width: 100%;
  }
  .ftr-legal-nav a {
    font-size: 0.82rem;
    color: var(--espresso);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(59, 42, 32, 0.25);
  }
  .ftr-legal-nav .sep {
    display: none;
  }
  .ftr-ltw-credit {
    font-size: 0.78rem;
    color: #4A3B32;
    text-align: center;
  }
  .menu-actions {
    flex-direction: column;
    width: 100%;
  }
  .menu-actions .btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* --- SMALL MOBILE & PHONES (<= 480px) --- */
@media (max-width: 480px) {
  .wrap {
    padding: 0 16px;
  }
  .hero-btns {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }
  .story-media img {
    height: 280px;
  }
  .story-badge {
    width: 80px;
    height: 80px;
    right: 10px;
    bottom: 10px;
  }
  .story-badge .yr {
    font-size: 1.4rem;
  }
  .story-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
  }
  .story-stats .n {
    font-size: 1.7rem;
  }
  .story-stats .l {
    font-size: 0.7rem;
  }
  .mrow-t {
    max-width: 60%;
  }
  .mname {
    font-size: 1.05rem;
  }
  .mprice {
    font-size: 1.08rem;
  }
  .pillars-img-wrap {
    min-height: 250px;
  }
  .pillars-img-badge {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px 14px;
    gap: 10px;
  }
  .pib-num {
    font-size: 1.3rem;
  }
  .pib-txt {
    font-size: 0.75rem;
  }
  .pillar-row {
    padding: 16px;
    gap: 14px;
  }
  .atelier-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }
  .at-num {
    font-size: 2rem;
  }
  .at-lbl {
    font-size: 0.75rem;
  }
  .wa {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
  .wa svg {
    width: 24px;
    height: 24px;
  }
  .gal-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 210px;
  }
  .modal-tab-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
}

/* Final Explicit Overrides for Galeri & Yorumlar Section Padding (30px top / 30px bottom) */
.gal-sec,
section.gal-sec,
section.sec.gal-sec,
#galeri,
.quote-sec,
section.quote-sec,
section.sec.quote-sec,
#yorumlar {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* ============ 404 PAGE STYLING ============ */
.error-sec {
  background: var(--cream);
  padding: clamp(110px, 12vw, 140px) 0 30px;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-container {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error-top-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(176, 124, 79, 0.12);
  border: 1px solid rgba(176, 124, 79, 0.25);
  color: var(--caramel);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.error-top-icon svg {
  width: 26px;
  height: 26px;
}
.error-num {
  font-family: var(--serif);
  font-size: clamp(6rem, 16vw, 11rem);
  font-weight: 400;
  color: var(--caramel);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  user-select: none;
  text-shadow: 0 10px 30px rgba(176, 124, 79, 0.12);
}
.error-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--espresso);
  line-height: 1.25;
  margin: 16px 0 14px;
}
.error-title em {
  color: var(--caramel);
  font-style: italic;
}
.error-desc {
  font-size: 1.05rem;
  color: #4A3B32;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto 32px;
}
.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}
.error-actions .btn {
  min-width: 200px;
  height: 50px;
  padding: 0 28px;
}
.error-quick-links {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.eql-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.eql-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.eql-items a {
  font-size: 0.82rem;
  color: var(--espresso);
  font-weight: 500;
  padding: 8px 12px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.eql-items a:hover {
  background: var(--caramel);
  color: #FFFFFF;
  border-color: var(--caramel);
  transform: translateY(-1px);
}

/* ============ ULTIMATE MOBILE MENU OVERRIDES ============ */
body.menu-open {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}
.nav {
  z-index: 1000 !important;
}
.burger {
  position: relative !important;
  z-index: 1001 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
.burger span {
  pointer-events: none !important;
}
.mmenu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  background: #18110A !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.mmenu.active,
#mmenu.active,
body.menu-open .mmenu,
body.menu-open #mmenu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
}