/* Mobil katman (<1024px). Renk, font ve metinler XD tasarımından alınmıştır. */
:root {
  --brown: #4B4036;
  --beige: #D9CFC6;
  --cream: #EFE0D1;
  --ivory: #FDF9F5;
  --taupe: #B2A69B;
  --sand: #E8D1BB;
  --light: #F3F3F3;
  --accent: #E38851;
  --gray: #606060;
  --red: #EF0B0B;
  --serif: 'Cormorant', serif;
  --sans: 'Lato', sans-serif;
  --pad: 20px;
}

.is-mob body { background: #fff; }
.is-mob.menu-open body { overflow: hidden; }

#mob {
  font-family: var(--sans);
  color: var(--brown);
  font-size: 15px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
/* Temel kurallar tamamen :where() içinde (öncelik 0) — bileşen sınıfları (.m-btn vb.) bunları ezebilsin */
:where(#mob) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(#mob img) { max-width: 100%; height: auto; display: block; }
:where(#mob a) { color: inherit; text-decoration: none; }
:where(#mob h1, #mob h2, #mob h3) { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.12; }
:where(#mob p) { margin: 0; }

.m-wrap { padding-inline: var(--pad); max-width: 760px; margin-inline: auto; }
.m-sec { padding-block: 56px; }
.m-eyebrow { font-size: 11px; letter-spacing: .25em; color: var(--taupe); line-height: 1.6; }
.m-h2 { font-size: clamp(34px, 9.4vw, 52px); }
.m-lead { font-size: 15px; }

/* bölüm başlığı + yaprak süsü */
.m-head { position: relative; text-align: center; margin-bottom: 30px; }
.m-head .m-leaf { position: absolute; left: 50%; top: -30px; width: 72px; transform: translateX(-4%); pointer-events: none; }
.m-head h2, .m-head .m-eyebrow { position: relative; }
.m-head .m-eyebrow { margin-top: 14px; }
.m-head.left { text-align: left; }
.m-head.left .m-leaf { left: 0; transform: translateX(40%); }

/* butonlar */
.m-btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--brown); color: var(--light);
  font: 12px/1 var(--sans); letter-spacing: .15em;
  padding: 16px 30px;
}
.m-btn.sand { background: var(--sand); color: var(--brown); }
.m-btn.white { background: #fff; color: var(--brown); }
.m-link { font-size: 14px; letter-spacing: .15em; text-decoration: underline !important; text-underline-offset: 4px; }

/* ---------- üst bar ---------- */
.m-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--pad);
  background: var(--beige);
}
.m-top.white { background: #fff; box-shadow: 0 1px 0 rgba(75, 64, 54, .08); }
.m-top .m-logo img { width: 54px; height: 54px; }
.m-top .m-icons { display: flex; align-items: center; gap: 20px; }
.m-top .m-icons a, .m-top .m-ib { display: flex; padding: 0; border: 0; background: none; cursor: pointer; }
.m-top .m-icons img { width: 18px; height: 18px; }
.m-top .m-sep { width: 1px; height: 22px; background: var(--brown); opacity: .6; }
.m-burger { position: relative; width: 26px; height: 18px; padding: 0; background: none; border: 0; cursor: pointer; }
.m-burger::before, .m-burger::after, .m-burger span {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--brown);
}
.m-burger::before { top: 0; }
.m-burger span { top: 8px; }
.m-burger::after { bottom: 0; }

/* ---------- tam ekran menü ---------- */
.m-menu {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  padding: 18px var(--pad) 28px;
  background: var(--brown); color: var(--light);
  overflow-y: auto;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.menu-open .m-menu { transform: none; visibility: visible; transition: transform .3s ease; }
.m-menu .m-menu-top { display: flex; align-items: center; justify-content: space-between; }
.m-menu .m-menu-top img { width: 54px; height: 54px; }
.m-menu .m-close { background: none; border: 0; color: var(--light); font-size: 40px; line-height: 1; cursor: pointer; padding: 0 4px; }
.m-menu nav { display: flex; flex-direction: column; margin-top: 28px; }
.m-menu nav > a, .m-menu details summary {
  display: block; padding: 12px 0;
  font-family: var(--sans); font-size: 14px; letter-spacing: .15em;
  border-bottom: 1px solid rgba(243, 243, 243, .14);
  cursor: pointer; list-style: none;
}
.m-menu details summary::-webkit-details-marker { display: none; }
.m-menu details summary::after { content: '+'; float: right; font-size: 18px; line-height: 1; }
.m-menu details[open] summary::after { content: '–'; }
.m-menu details a { display: block; padding: 10px 0 10px 16px; font-size: 15px; color: var(--taupe); }
.m-menu .on { color: var(--sand); }
.m-menu .m-menu-foot { margin-top: auto; padding-top: 32px; font-size: 14px; color: var(--taupe); }
.m-menu .m-menu-foot img { width: 113px; margin-top: 14px; }

/* ---------- sayfa başlığı bandı (iç sayfalar) ---------- */
.m-crumb { background: var(--beige); text-align: center; padding: 46px var(--pad) 42px; }
.m-crumb h1 { font-size: clamp(38px, 10vw, 56px); }
.m-crumb p { margin-top: 10px; font-size: 12px; letter-spacing: .2em; }

/* ---------- ürün şeridi (yatay kaydırma) ---------- */
.m-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--pad); scroll-padding-inline: var(--pad);
}
.m-rail::-webkit-scrollbar { display: none; }
.m-rail > * { scroll-snap-align: start; }
.m-card { display: block; text-align: center; }
.m-card .ph { position: relative; }
.m-card .ph img { width: 100%; height: auto; aspect-ratio: 345 / 428; object-fit: cover; }
.m-card .ph .m-btn { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); white-space: nowrap; padding: 12px 22px; font-size: 11px; }
.m-card h3 { font-size: 22px; margin-top: 12px; }

/* ---------- Instagram ızgarası ---------- */
.m-insta { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.m-insta img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.m-insta .ig { position: absolute; left: 50%; top: 50%; width: 60px; transform: translate(-50%, -50%); pointer-events: none; }

/* ---------- footer ---------- */
.m-foot { background: var(--brown); color: var(--taupe); font-size: 15px; padding: 44px var(--pad) 28px; }
/* logo görseli kare ve yazı ortada: sadece yazı şeridi görünsün */
.m-foot .brand { width: 300px; max-width: 100%; height: 72px !important; object-fit: cover; object-position: 50% 50%; margin: 0 0 18px -36px; }
.m-foot h4 { font: 400 24px/1.2 var(--serif); color: var(--light); margin: 34px 0 14px; }
.m-foot .links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.m-foot .mail { margin-top: 16px; word-break: break-word; }
.m-foot .sub { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--light); border-bottom: 1px solid var(--light); }
.m-foot .sub input { flex: 1; min-width: 0; background: none; border: 0; color: var(--light); font: 15px var(--sans); outline: none; }
.m-foot .sub input::placeholder { color: var(--taupe); }
.m-foot .sub button { background: none; border: 0; padding: 4px; cursor: pointer; }
.m-foot .sub button img { width: 20px; }
.m-foot .social { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.m-foot .social img { width: 113px; }
.m-foot .bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(243, 243, 243, .25); color: var(--light); font-size: 14px; }
.m-foot .bottom img { width: 280px; margin-top: 16px; }

/* ================= Anasayfa ================= */
.m-hero { background: var(--beige); padding: 6px var(--pad) 64px; }
.m-hero h1 { font-size: clamp(42px, 11.5vw, 64px); margin: 18px 0 26px; }
.m-hero .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.m-hero .thumbs img { width: 100%; aspect-ratio: 189 / 85; object-fit: cover; border-radius: 0 999px 999px 0; }
.m-hero .dots { display: flex; gap: 10px; margin: 18px 0 26px; }
.m-hero .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brown); }
.m-hero .dots i:first-child { width: 12px; height: 12px; margin-top: -3px; background: var(--taupe); }
.m-hero .photo { position: relative; margin-top: 40px; margin-right: 46px; }
.m-hero .photo > img { width: 100%; aspect-ratio: 591 / 885; object-fit: cover; border-radius: 34px 90px 34px 34px; }
.m-badge { position: absolute; right: -46px; bottom: -44px; width: 46%; max-width: 230px; }
.m-badge svg { display: block; width: 100%; height: auto; }
.m-badge .spark { position: absolute; left: -6%; top: 16%; width: 16%; }

.m-discover { background: var(--cream); text-align: center; }
.m-discover .txt { font-family: var(--serif); font-size: clamp(22px, 6vw, 30px); line-height: 1.35; }
.m-discover .emblem { width: 150px; margin: 36px auto 30px; }
.m-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; align-items: center; }
.m-logos > * { flex: 0 0 28%; min-width: 0; max-width: 28%; object-fit: contain; }
.m-logos img { width: 100%; max-width: 110px; }
.m-logos img.sq { max-width: 96px; }

.m-services .ph img { width: 100%; aspect-ratio: 875 / 1021; object-fit: cover; }
.m-services .body { padding-top: 44px; }
.m-list { list-style: none; margin: 26px 0 32px; padding: 0; columns: 2; column-gap: 16px; font-size: 14px; }
.m-list li { break-inside: avoid; padding: 5px 0 5px 20px; position: relative; }
.m-list li::before { content: '✤'; position: absolute; left: 0; top: 5px; color: var(--sand); }

.m-hours .rows { border-top: 1px solid var(--sand); }
.m-hours .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sand); }
.m-hours .row b { font: 400 22px/1.2 var(--serif); }
.m-hours .row > span { font-size: 12px; letter-spacing: .25em; color: var(--taupe); white-space: nowrap; }
.m-hours .row > span.off { color: var(--red); }

.m-nature { background: var(--brown); color: var(--light); }
.m-nature .body { position: relative; padding: 56px var(--pad) 48px; }
.m-nature h2 { font-style: italic; font-size: clamp(38px, 10.5vw, 56px); padding-right: 96px; }
.m-nature .emblem { position: absolute; right: var(--pad); top: 44px; width: 88px; }
.m-nature .m-eyebrow { color: var(--sand); margin: 20px 0 16px; }
.m-nature .price { display: flex; align-items: baseline; gap: 22px; margin: 24px 0 30px; letter-spacing: .25em; }
.m-nature .price b { font-size: 18px; font-weight: 400; }
.m-nature .price s { font-size: 13px; }
.m-nature .pics { position: relative; }
.m-nature .pics > img { width: 100%; aspect-ratio: 797 / 1000; object-fit: cover; }
.m-nature .card { position: absolute; left: var(--pad); bottom: -40px; width: 54%; }
.m-nature .card img { width: 100%; aspect-ratio: 438 / 555; object-fit: cover; border-radius: 22px; }
.m-nature .off {
  position: absolute; right: -8%; top: 7%; width: 44%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--brown); color: var(--light); font-size: 13px; letter-spacing: .2em; line-height: 1.5;
}
.m-nature + .m-sec { padding-top: 96px; }

.m-style .big { margin: 36px 0 0 var(--pad); }
.m-style .big img { width: 100%; aspect-ratio: 739 / 917; object-fit: cover; border-radius: 90px 0 0 0; }
.m-style .m-rail { margin-top: 34px; }
.m-style .m-card h3 { color: #000; }

.m-reviews { background: var(--light); text-align: center; }
.m-reviews .quote-txt { font-size: 16px; }
.m-reviews .quote-ic { width: 40px; margin: 28px auto 14px; }
.m-reviews .who { font-size: 12px; letter-spacing: .25em; }
.m-reviews .arrows { display: flex; justify-content: center; gap: 36px; margin-top: 26px; }
.m-reviews .arrows button { padding: 8px; border: 0; background: none; cursor: pointer; }
.m-reviews .arrows img { width: 26px; }

.m-blog .cards { display: grid; gap: 40px; }
.m-post img { width: 100%; aspect-ratio: 439 / 372; object-fit: cover; }
.m-post .date { margin-top: 18px; font-size: 12px; letter-spacing: .25em; color: var(--taupe); }
.m-post h3 { font-weight: 700 !important; font-size: 26px; margin-top: 8px !important; }
.m-post p { color: var(--gray); font-size: 15px; margin-top: 12px; }
.m-post .m-link { display: inline-block; margin-top: 12px; }

/* ================= İç sayfa bileşenleri ================= */
.m-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 26px 0 30px; }
.m-lists .m-list { columns: 1; margin: 0; }

/* form */
.m-form { display: grid; gap: 18px; }
.m-field { display: grid; gap: 6px; }
.m-field span { font-size: 11px; letter-spacing: .22em; color: var(--taupe); }
.m-field input, .m-field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--brown); border-radius: 0; background: transparent;
  padding: 8px 0; font: 16px var(--sans); color: var(--brown); outline: none; resize: vertical;
}
.m-field input:focus, .m-field textarea:focus { border-bottom-color: var(--accent); }
.m-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--gray); }
.m-check input { margin-top: 3px; accent-color: var(--brown); }
.m-form .m-btn { justify-self: start; margin-top: 6px; }
.m-formsec { background: var(--ivory); }
.m-wa { display: inline-flex; margin: 0 auto 22px; }
.m-wa img { width: 52px; height: 52px; }

/* iletişim butonları */
.m-actions { display: grid; gap: 10px; margin: 24px 0; }
.m-actions a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid var(--sand); background: #fff; }
.m-actions b { font-weight: 400; letter-spacing: .12em; font-size: 13px; }
.m-actions span { font-size: 14px; color: var(--taupe); }

/* hero (iç anasayfalar) */
.m-hero2 { background: var(--beige); padding: 30px var(--pad) 56px; }
.m-hero2 .m-eyebrow { color: var(--brown); }
.m-hero2 h1 { font-size: clamp(40px, 11vw, 64px); margin: 12px 0 18px; }
.m-hero2 .sub { font: italic 400 clamp(24px, 6.4vw, 36px)/1.2 var(--serif); margin-bottom: 18px; }
.m-hero2 p.lead { margin-bottom: 26px; }
.m-hero2 .ph img { width: 100%; object-fit: cover; margin-top: 34px; border-radius: 0 90px 0 0; }

/* istatistik */
.m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; text-align: center; }
.m-stats b { display: block; font: 400 clamp(34px, 9vw, 48px)/1 var(--serif); }
.m-stats > div > span { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .18em; color: var(--taupe); }

/* ürün ızgarası */
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; }
.m-grid .m-card .ph img { aspect-ratio: 1; }
.m-grid .m-card h3 { font-size: 18px; }
.m-chipsrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: -8px 0 26px; }
.m-chipsrow span { padding: 7px 12px; border: 1px solid var(--taupe); font-size: 11px; letter-spacing: .18em; }

/* koleksiyon */
.m-collection { display: grid; gap: 38px; }
.m-collection .item { text-align: center; }
.m-collection img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.m-collection h3 { font-size: 24px !important; margin: 18px 0 10px !important; }
.m-collection p { color: var(--gray); margin-bottom: 18px; }

/* kayan bant */
.m-marquee { background: var(--brown); color: var(--light); overflow-x: auto; scrollbar-width: none; }
.m-marquee::-webkit-scrollbar { display: none; }
.m-marquee div { display: flex; gap: 22px; align-items: center; white-space: nowrap; padding: 22px var(--pad); font: 400 30px/1 var(--serif); }
.m-marquee i { font-style: normal; font-size: 18px; color: var(--sand); }
.m-marquee div > span:nth-child(4n+3) { font-style: italic; color: var(--sand); }

/* SSS */
.m-faq details { border-bottom: 1px solid var(--sand); }
.m-faq summary { position: relative; list-style: none; cursor: pointer; padding: 18px 34px 18px 0; font: 400 21px/1.3 var(--serif); }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font: 300 26px/1 var(--sans); color: var(--taupe); }
.m-faq details[open] summary::after { content: '–'; }
.m-faq .a { padding: 0 0 18px; color: var(--gray); font-size: 15px; }
.m-faq .a a { text-decoration: underline; }
.m-faqimg img { width: 100%; object-fit: cover; margin: 26px 0; }
.m-textblock p + p { margin-top: 14px; }
.m-textblock { color: var(--gray); }

/* yorum kartları */
.m-rcards { grid-auto-columns: 84%; padding-bottom: 6px; }
.m-rcard { position: relative; padding: 26px 22px; background: #fff; box-shadow: 0 2px 14px rgba(75, 64, 54, .08); }
.m-rcard .q { position: absolute; right: 20px; top: 22px; width: 32px; }
.m-rcard .txt { margin: 14px 0 18px; font-size: 15px; }
.m-rcard .name { font-size: 11px; letter-spacing: .25em; color: var(--sand); }
.m-stars i { font-style: normal; font-size: 13px; color: #d9d2cb; margin-right: 3px; }
.m-stars i.on { color: var(--brown); }
.m-graybg { background: var(--light); }

/* fiyat listesi */
.m-prices .row { padding: 16px 0; border-bottom: 1px solid var(--sand); }
.m-prices .top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.m-prices b { font: 400 22px/1.2 var(--serif); }
.m-prices .top span { font: 400 20px/1 var(--serif); white-space: nowrap; }
.m-prices p { margin-top: 6px !important; font-size: 14px; color: var(--gray); }
.m-wideimg img { width: 100%; object-fit: cover; }

/* paketler */
.m-plans { display: grid; gap: 18px; }
.m-plan { padding: 26px 22px; border: 1px solid var(--sand); background: #fff; }
.m-plan .price { margin: 10px 0 14px !important; font: 400 26px/1.2 var(--serif); }
.m-plan .price a { text-decoration: underline; text-underline-offset: 4px; }
.m-plan .m-list { columns: 1; margin: 0 0 22px; }

/* hizmet kartları */
.m-svc { display: grid; gap: 30px; }
.m-svc .item img { width: 100%; aspect-ratio: 458 / 560; object-fit: cover; border-radius: 200px 200px 0 0; }
.m-svc h3 { font-size: 26px !important; margin-top: 16px !important; }
.m-svc p { color: var(--gray); }

/* uzman kadro */
.m-team { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: center; }
.m-team img { width: 100%; aspect-ratio: 343 / 437; object-fit: cover; }
.m-team h3 { font-size: 22px !important; margin-top: 12px !important; }
.m-team p { font-size: 10px; letter-spacing: .18em; color: var(--taupe); margin-top: 6px !important; }

/* logolar (sade) */
.m-logos3 { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
.m-logos3 img { width: 90px; }

/* blog listesi */
.m-postbig { margin-bottom: 44px; }
.m-postbig img { width: 100%; aspect-ratio: 1203 / 700; object-fit: cover; }
.m-postbig .meta { margin-top: 16px !important; font-size: 11px; letter-spacing: .22em; color: var(--taupe); }
.m-postbig h3 { font-size: 30px !important; margin: 8px 0 18px !important; }
.m-pager { display: flex; align-items: center; gap: 8px; margin: 10px 0 46px; }
.m-pager a { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--sand); font-size: 13px; letter-spacing: .12em; }
.m-pager a.on { background: var(--brown); color: var(--light); border-color: var(--brown); }
.m-pager a.next { padding: 0 14px; margin-left: auto; }

/* yan menü */
.m-side { display: grid; gap: 0; padding-top: 10px; border-top: 1px solid var(--sand); }
.m-side h3 { font-size: 30px !important; margin: 30px 0 14px !important; }
.m-searchbox { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 24px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--sand); background: none; font: 12px var(--sans); letter-spacing: .2em; color: var(--brown); cursor: pointer; }
.m-searchbox img { width: 18px; }
.m-cats { list-style: none; margin: 0; padding: 0; }
.m-cats li { padding: 8px 0; font-size: 14px; letter-spacing: .12em; }
.m-side .banner { width: 100%; margin-top: 30px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-chips a { padding: 7px 12px; border: 1px solid var(--taupe); font-size: 12px; letter-spacing: .14em; }
.m-insta-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.m-insta-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* blog detay */
.m-article img.cover { width: 100%; aspect-ratio: 1203 / 700; object-fit: cover; }
.m-article .meta { margin: 18px 0 8px !important; font-size: 11px; letter-spacing: .2em; color: var(--taupe); }
.m-article h1 { font-size: clamp(34px, 9vw, 48px); margin-bottom: 18px; }
.m-article h2 { font-size: clamp(28px, 7.5vw, 40px); margin: 34px 0 14px !important; }
.m-article .body p { color: var(--gray); margin-bottom: 14px !important; }
.m-quote { margin: 26px 0; padding: 26px 22px; background: var(--brown); color: var(--light); font: 400 22px/1.4 var(--serif); }
.m-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.m-imgs.three { grid-template-columns: repeat(3, 1fr); }
.m-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.m-article .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 18px 0; border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); font-size: 12px; letter-spacing: .16em; }
.m-comments { display: grid; gap: 22px; }
.m-comment { display: grid; grid-template-columns: 64px 1fr; gap: 14px; }
.m-comment.reply { margin-left: 30px; }
.m-comment img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }
.m-comment b { font: 400 22px/1.1 var(--serif); }
.m-comment .date { font-size: 11px; letter-spacing: .18em; color: var(--taupe); margin: 4px 0 6px !important; }
.m-comment p { font-size: 15px; color: var(--gray); }
.m-comment a { font-size: 11px; letter-spacing: .18em; text-decoration: underline !important; }

/* ürün detay */
.m-product .ph img { width: 100%; aspect-ratio: 745 / 888; object-fit: cover; }
.m-product .crumbs { padding: 16px var(--pad) 0; font-size: 11px; letter-spacing: .18em; color: var(--taupe); }
.m-product .stock { margin-top: 20px !important; font-size: 12px; letter-spacing: .18em; }
.m-product .stock span { color: #2e7d32; }
.m-product h1 { font-size: clamp(34px, 9vw, 48px); margin: 8px 0 10px; }
.m-product .rate { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .18em; color: var(--taupe); }
.m-product .desc { margin: 16px 0 22px !important; color: var(--gray); }
.m-buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.m-qty { display: flex; align-items: center; border: 1px solid var(--brown); }
.m-qty button { width: 42px; height: 46px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--brown); }
.m-qty output { min-width: 34px; text-align: center; font-size: 17px; }
.m-buy .m-btn { flex: 1; text-align: center; }
.m-wish { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; border: 0; background: none; font: 12px var(--sans); letter-spacing: .18em; color: var(--brown); cursor: pointer; padding: 0; }
.m-wish img { width: 22px; filter: grayscale(1); }
.m-wish.on img { filter: none; }
.m-product .social { margin-top: 22px !important; font-size: 12px; letter-spacing: .18em; }
.m-product .social a { display: inline-block; margin-top: 10px; }
.m-product .social img { width: 104px; filter: brightness(.35); }
.m-tabs { margin-top: 44px; }
.m-tabs .bar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.m-tabs .bar button { flex: none; padding: 11px 14px; border: 1px solid var(--sand); background: none; font: 11px var(--sans); letter-spacing: .16em; color: var(--brown); cursor: pointer; }
.m-tabs .bar button.on { border-color: var(--brown); }
.m-tabs [data-panel] { padding: 18px 0; color: var(--gray); }

/* 404 */
.m-404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 40px var(--pad); text-align: center; background: #6b5d51; color: #fff; }
.m-404 .logo img { width: 80px; }
.m-404 .big { font: 400 clamp(110px, 38vw, 200px)/.9 var(--serif); color: #a88c72; }
.m-404 h1 { font-weight: 700 !important; font-size: clamp(34px, 9vw, 48px); }
.m-404 .m-btn { margin-top: 12px; }

/* ---------- tablet ---------- */
@media (min-width: 600px) {
  :root { --pad: 32px; }
  .m-rail { grid-auto-columns: 40%; }
  .m-blog .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .m-post h3 { font-size: 22px; }
  .m-hero .photo { max-width: 460px; }
  .m-services .ph img { aspect-ratio: 16 / 10; }
  .m-style .big { max-width: 560px; margin-left: auto; }
  .m-nature .pics > img { aspect-ratio: 4 / 3; }
  .m-nature .card { width: 38%; }
  .m-insta { grid-template-columns: repeat(6, 1fr); }
  .m-logos { grid-template-columns: repeat(6, 1fr); }
  .m-foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .m-grid { grid-template-columns: repeat(3, 1fr); }
  .m-collection, .m-svc, .m-plans { grid-template-columns: repeat(2, 1fr); }
  .m-svc { grid-template-columns: repeat(3, 1fr); }
  .m-plans { grid-template-columns: repeat(3, 1fr); }
  .m-rcards { grid-auto-columns: 44%; }
  .m-stats { max-width: 560px; }
  .m-hero2 .ph img, .m-faqimg img { max-width: 560px; }
}