/* ==========================================================================
   Tema: MAHALLE ESNAFI v2 — 19 Eki 2026 baştan (ilk Stitch sürümü "çok kötü" bulundu; tasarım Claude'un).
   Retro mahalle afişi: domates kırmızısı + hardal + krem + mürekkep, Bricolage Grotesque + Rubik + Caveat (el yazısı).
   İmza öğeler: kart destesi hero slider, dönen damga, akan bant, otobüs tarifesi gibi servis panosu,
   ipe mandalla asılı galeri, WhatsApp sohbeti yorumlar. Border yok; gölge ve renk bloklarıyla ayrım.
   ========================================================================== */
:root {
    --bg: #fff4df; --bg2: #fde9c4; --card: #fffaf0; --ink: #1d1a16; --muted: #5a4d3e;
    --accent: #e63b2e; --accent2: #c92e22; --on-accent: #fff; --soft: #ffd9cc; --field: #fff4df;
    --r: 26px; --r-sm: 16px;
    --sh: 0 6px 22px rgba(29,26,22,.08); --sh-lg: 0 22px 50px rgba(29,26,22,.16);
    --fh: 'Bricolage Grotesque', system-ui, sans-serif; --fb: 'Rubik', system-ui, sans-serif; --w: 1220px;
    --mh-sari: #f2b705; --mh-mavi: #1d3a8a; --mh-yesil: #1f9d55; --mh-wa: #25d366;
}
.mh h1, .mh h2, .mh h3, .mh .mh-h1 { font-family: var(--fh); font-weight: 800; letter-spacing: -.025em; }
.mh-el { font-family: 'Caveat', cursive; font-weight: 700; font-size: 28px; color: var(--accent); line-height: 1; display: inline-block; transform: rotate(-3deg); }
.mh-el--acik { color: var(--mh-sari); }

/* Hap düğmeler */
.mh-hap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 999px; font: 700 16px var(--fb); cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .2s; }
.mh-hap:hover { transform: translateY(-2px) rotate(-1deg); }
.mh-hap--buyuk { padding: 17px 30px; font-size: 17px; }
.mh-hap--kirmizi { background: var(--accent); color: #fff; box-shadow: 0 6px 0 var(--accent2); }
.mh-hap--wa { background: var(--mh-wa); color: #fff; box-shadow: 0 6px 0 #179a48; }
.mh-hap--krem { background: var(--bg); color: var(--ink); box-shadow: 0 6px 0 #d9c49c; }
.mh-hap:active { transform: translateY(4px); box-shadow: none; }
.mh-girdi { width: 100%; padding: 15px 20px; border: 0; border-radius: 999px; background: var(--field); color: var(--ink); font: 16px var(--fb); outline: none; }
.mh-girdi:focus { box-shadow: 0 0 0 3px var(--mh-sari); }

/* Üst */
.mh-ust { position: sticky; top: 0; z-index: 900; background: var(--bg); transition: box-shadow .2s; }
.mh-ust.kaydi { box-shadow: 0 4px 0 rgba(29,26,22,.06); }
.mh-ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.mh-logo { display: flex; align-items: center; gap: 12px; }
.mh-logo img { max-height: 50px; width: auto; }
.mh-logo-damga { width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: var(--bg); display: flex; align-items: center; justify-content: center; transform: rotate(-8deg); box-shadow: 3px 3px 0 var(--mh-sari); }
.mh-logo b { display: block; font-family: var(--fh); font-weight: 800; font-size: 24px; line-height: 1; white-space: nowrap; }
.mh-logo small { font-family: 'Caveat', cursive; font-size: 20px; color: var(--accent); }
.mh-logo--acik b { color: var(--bg); }
.mh-menu { display: flex; gap: 4px; }
.mh-menu a { padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: background .2s; }
.mh-menu a:hover { background: var(--bg2); }
.mh-menu a.on { background: var(--ink); color: var(--bg); }
.mh-menu-tel { display: none !important; }
.mh-ust-sag { display: flex; align-items: center; gap: 10px; }
.mh-hamburger { display: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--ink); color: var(--bg); cursor: pointer; }

/* Hero: kırmızı afiş + kart destesi slider */
.mh-hero { position: relative; background: var(--accent); color: var(--bg); padding: 64px 0 130px; overflow: hidden; }
.mh-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,244,223,.12) 2px, transparent 2px); background-size: 26px 26px; pointer-events: none; }
.mh-hero-izgara { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.mh-hero-metin { display: grid; }
.mh-hero-yazi { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(26px) rotate(-1deg); transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1), visibility 0s .5s; }
.mh-hero-yazi.aktif { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .25s, transform .7s cubic-bezier(.34,1.56,.64,1) .25s; }
.mh-cikartma { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--mh-sari); color: var(--ink); font-weight: 700; font-size: 15px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ink); }
.mh-cikartma .material-symbols-outlined { font-size: 19px; }
.mh-hero h1, .mh-hero .mh-h1 { font-size: clamp(44px, 6.4vw, 86px); line-height: .98; margin: 22px 0 18px; color: var(--bg); }
.mh-hero h1 em, .mh-hero .mh-h1 em { font-style: normal; color: var(--ink); background: linear-gradient(transparent 58%, var(--mh-sari) 58%, var(--mh-sari) 92%, transparent 92%); padding: 0 .08em; }
.mh-hero-yazi p { font-size: 19px; max-width: 520px; margin: 0; opacity: .95; }
.mh-hero-btn { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.mh-noktalar { display: flex; gap: 8px; margin-top: 28px; }
.mh-noktalar button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,244,223,.2); color: var(--bg); font: 700 15px var(--fb); cursor: pointer; transition: background .2s, transform .2s; }
.mh-noktalar button.aktif { background: var(--mh-sari); color: var(--ink); transform: scale(1.12); }

.mh-deste { position: relative; height: 500px; }
.mh-kart { position: absolute; top: 40px; left: 50%; width: min(400px, 78%); aspect-ratio: 4/5; margin: 0 0 0 calc(min(400px, 78%) / -2); padding: 14px 14px 56px; background: var(--card); box-shadow: var(--sh-lg); border-radius: 6px; transition: transform .8s cubic-bezier(.34,1.3,.64,1), opacity .5s; }
.mh-kart img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.mh-kart[data-sira="0"] { z-index: 3; transform: rotate(-4deg); }
.mh-kart[data-sira="1"] { z-index: 2; transform: rotate(6deg) translate(34px, 10px) scale(.95); }
.mh-kart[data-sira="2"] { z-index: 1; transform: rotate(13deg) translate(64px, 22px) scale(.9); }
.mh-kart.cikiyor { z-index: 4; animation: mh-firlat .8s cubic-bezier(.5,0,.3,1); }
@keyframes mh-firlat { 0% { transform: rotate(-4deg); } 45% { transform: rotate(-24deg) translate(-115%, -6%); } 100% { transform: rotate(13deg) translate(64px, 22px) scale(.9); z-index: 0; } }
.mh-damga { position: absolute; z-index: 5; left: 2%; bottom: 10px; width: 150px; height: 150px; border-radius: 50%; background: var(--mh-sari); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 5px 5px 0 var(--ink); }
.mh-damga svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: mh-don 16s linear infinite; }
.mh-damga text { font: 700 15px var(--fb); letter-spacing: .14em; fill: var(--ink); }
.mh-damga .material-symbols-outlined { font-size: 44px; }
@keyframes mh-don { to { transform: rotate(360deg); } }
.mh-not { position: absolute; z-index: 5; right: -14px; top: -34px; font-family: 'Caveat', cursive; font-weight: 700; font-size: 28px; line-height: 1; color: var(--bg); transform: rotate(8deg); text-align: center; }
.mh-not::after { content: "↙"; display: block; font-size: 40px; }
.mh-dalga { position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; background: var(--bg);
    -webkit-mask: radial-gradient(40px 34px at 50% 0, transparent 98%, #000) 50% 100% / 80px 70px repeat-x;
            mask: radial-gradient(40px 34px at 50% 0, transparent 98%, #000) 50% 100% / 80px 70px repeat-x; }

/* Akan bant */
.mh main { overflow-x: clip; }
.mh-akan { background: var(--mh-sari); color: var(--ink); overflow: hidden; transform: rotate(-1.5deg); margin: -26px -10px 0; position: relative; z-index: 3; box-shadow: 0 6px 0 var(--ink); }
.mh-akan-ic { display: flex; gap: 22px; width: max-content; padding: 14px 0; animation: mh-ak 38s linear infinite; font-family: var(--fh); font-weight: 800; font-size: 26px; text-transform: uppercase; }
.mh-akan-ic i { font-style: normal; color: var(--accent); }
@keyframes mh-ak { to { transform: translateX(-50%); } }

/* Randevu */
.mh-randevu-bolum { padding: 70px 0 20px; }
.mh-randevu { position: relative; padding: 30px 34px; border-radius: 32px; background: var(--card); box-shadow: var(--sh-lg); }
.mh-randevu-bas { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.mh-rozet-yuvarlak { width: 64px; height: 64px; border-radius: 50%; background: var(--mh-mavi); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 800; transform: rotate(-10deg); flex-shrink: 0; }
.mh-randevu h2 { font-size: 30px; margin: 0; }
.mh-randevu-bas p { margin: 2px 0 0; color: var(--muted); }
.mh-randevu-alan { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 14px; align-items: end; }
.mh-randevu-alan label { display: flex; flex-direction: column; gap: 6px; }
.mh-randevu-alan label > span { font-size: 15px; font-weight: 700; padding-left: 12px; }

/* Bölümler */
.mh-bolum { padding: 96px 0; }
.mh-bolum--krem { background: var(--bg2); }
.mh-baslik { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.mh-baslik h2 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1; margin: 10px 0 0; }
.mh-baslik p { color: var(--muted); font-size: 17px; }
.mh-baslik--sol { text-align: left; margin: 0; }
.mh-baslik--acik h2 { color: var(--bg); }

/* Ne yıkıyoruz */
.mh-urunler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mh-urun { display: flex; flex-direction: column; gap: 6px; padding: 26px 22px; border-radius: var(--r); box-shadow: var(--sh); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.mh-urun:hover { transform: translateY(-6px) rotate(-2deg); }
.mh-urun:nth-child(even):hover { transform: translateY(-6px) rotate(2deg); }
.mh-urun--kirmizi { background: var(--soft); } .mh-urun--sari { background: #ffe9a8; } .mh-urun--mavi { background: #dde5ff; } .mh-urun--yesil { background: #d4f2df; }
.mh-urun-ikon { width: 58px; height: 58px; margin-bottom: 10px; border-radius: 18px 50% 50% 50%; background: var(--card); display: flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--ink); }
.mh-urun-ikon .material-symbols-outlined { font-size: 30px; }
.mh-urun--kirmizi .mh-urun-ikon { color: var(--accent); } .mh-urun--sari .mh-urun-ikon { color: #9a6b00; } .mh-urun--mavi .mh-urun-ikon { color: var(--mh-mavi); } .mh-urun--yesil .mh-urun-ikon { color: var(--mh-yesil); }
.mh-urun b { font-family: var(--fh); font-size: 24px; }
.mh-urun small { font-size: 15px; color: var(--muted); }

/* Servis tarifesi */
.mh-bolum--pano { background: var(--mh-mavi); color: var(--bg); }
.mh-tarife { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 18px; border-radius: 28px; background: #142a66; box-shadow: inset 0 0 0 6px #10214f; }
.mh-tarife-gun { padding: 18px 16px; border-radius: 18px; background: rgba(255,244,223,.06); display: flex; flex-direction: column; gap: 10px; transition: transform .25s; }
.mh-tarife-gun:hover { transform: translateY(-4px); }
.mh-tarife-bas { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.mh-tarife-bas b { font-family: var(--fh); font-size: 22px; color: var(--mh-sari); }
.mh-tarife-bas span { padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; animation: mh-yanip 1.2s ease-in-out infinite; }
@keyframes mh-yanip { 50% { opacity: .55; } }
.mh-tarife-gun small { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; opacity: .8; }
.mh-tarife-gun small .material-symbols-outlined { font-size: 18px; }
.mh-tarife-gun ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mh-tarife-gun li { padding: 8px 12px; border-radius: 12px; background: rgba(255,244,223,.1); font-weight: 600; font-size: 15px; }
.mh-tarife-gun.bugun { background: var(--bg); color: var(--ink); transform: translateY(-8px) rotate(-1deg); box-shadow: 0 10px 0 var(--mh-sari); }
.mh-tarife-gun.bugun .mh-tarife-bas b { color: var(--accent); }
.mh-tarife-gun.bugun li { background: var(--bg2); }
.mh-tarife-gun.ozel { background: rgba(242,183,5,.18); }
.mh-tarife-not { text-align: center; margin: 28px 0 0; font-family: 'Caveat', cursive; font-size: 26px; color: var(--mh-sari); }

/* Neden biz */
.mh-nedenler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mh-neden { position: relative; padding: 46px 30px 32px; border-radius: 30px; background: var(--card); box-shadow: var(--sh); }
.mh-neden:nth-child(2) { background: var(--ink); color: var(--bg); transform: rotate(1.5deg); }
.mh-neden:nth-child(2) p { color: #d8ccb8; }
.mh-neden-no { position: absolute; top: -28px; left: 26px; width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 800; font-size: 30px; box-shadow: 4px 4px 0 var(--mh-sari); }
.mh-neden h3 { font-size: 28px; margin: 0 0 10px; }
.mh-neden p { margin: 0; color: var(--muted); }

/* İpe asılı galeri */
.mh-ip { position: relative; display: flex; justify-content: space-between; gap: 18px; padding-top: 40px; }
.mh-ip::before { content: ""; position: absolute; left: -2%; right: -2%; top: 22px; height: 60px; border-top: 3px solid #8a6d4a; border-radius: 50% 50% 0 0 / 30px 30px 0 0; transform: scaleY(-1); transform-origin: top; }
.mh-asili { position: relative; flex: 1; margin: 0; padding: 10px 10px 14px; background: var(--card); box-shadow: var(--sh-lg); transform-origin: 50% -16px; animation: mh-sallan 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.mh-asili:nth-child(odd) { margin-top: 24px; }
@keyframes mh-sallan { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.mh-asili img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mh-asili figcaption { font-family: 'Caveat', cursive; font-size: 22px; text-align: center; margin-top: 8px; line-height: 1.1; }
.mh-mandal { position: absolute; top: -22px; left: 50%; width: 14px; height: 36px; margin-left: -7px; border-radius: 4px; background: #c98a3a; box-shadow: inset -3px 0 0 rgba(0,0,0,.15); }

/* WhatsApp sohbeti */
.mh-sohbet-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.mh-baslik--sol .mh-hap { margin-top: 20px; }
.mh-telefon { max-width: 440px; margin-left: auto; border-radius: 36px; overflow: hidden; background: #efe7dc; box-shadow: 0 0 0 10px var(--ink), var(--sh-lg); transform: rotate(2deg); }
.mh-telefon-ust { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #075e54; color: #fff; }
.mh-telefon-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.mh-telefon-ust b { display: block; font-size: 16px; }
.mh-telefon-ust small { font-size: 14px; opacity: .8; }
.mh-telefon-govde { padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow: auto; background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px); background-size: 14px 14px; }
.mh-mesaj { max-width: 86%; padding: 9px 12px 6px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.mh-mesaj b { display: block; font-size: 14px; color: var(--accent); }
.mh-mesaj b span { color: var(--muted); font-weight: 500; }
.mh-mesaj p { margin: 2px 0; font-size: 15px; }
.mh-mesaj small { display: block; text-align: right; font-size: 14px; color: #8a8a8a; }
.mh-mesaj--biz { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: #d9fdd3; }
.mh-mesaj--biz small { color: #53bdeb; }

/* CTA */
.mh-cta { background: var(--ink); color: var(--bg); padding: 100px 0; text-align: center; position: relative; overflow: hidden; }
.mh-cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(242,183,5,.12) 2px, transparent 2px); background-size: 26px 26px; }
.mh-cta-ic { position: relative; }
.mh-cta h2 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1; margin: 12px 0 0; }
.mh-cta .mh-hero-btn { justify-content: center; }

/* Alt */
.mh-alt { position: relative; background: var(--accent); color: var(--bg); padding: 96px 0 0; }
.mh-dalga--alt { top: -1px; bottom: auto; transform: scaleY(-1); background: var(--ink); }
.mh-alt-izgara { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 48px; }
.mh-alt p { opacity: .92; }
.mh-alt h4 { font-family: 'Caveat', cursive; font-size: 28px; margin: 0 0 12px; color: var(--mh-sari); }
.mh-alt-izgara > div > a:not(.mh-logo):not(.mh-hap) { display: block; padding: 4px 0; font-weight: 500; }
.mh-alt-izgara a:not(.mh-hap):hover { text-decoration: underline; }
.mh-alt-izgara .mh-alt-tel { font-family: var(--fh); font-weight: 800; font-size: 30px; }
.mh-alt .mh-logo-damga { background: var(--bg); color: var(--accent); }
.mh-alt .mh-logo small { color: var(--mh-sari); }
.mh-alt-son { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 20px; padding-bottom: 26px; font-size: 14px; opacity: .9; }
.mh-wa { position: fixed; right: 22px; bottom: 22px; z-index: 950; width: 60px; height: 60px; border-radius: 50%; background: var(--mh-wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 #179a48; }

@media (max-width: 1100px) {
    .mh-menu { position: fixed; inset: 78px 0 auto 0; flex-direction: column; gap: 0; padding: 12px 24px 24px; background: var(--bg); box-shadow: var(--sh-lg); transform: translateY(-130%); visibility: hidden; transition: transform .3s; z-index: 899; }
    .mh-menu.acik { transform: none; visibility: visible; }
    .mh-menu a { padding: 13px 14px; }
    .mh-menu-tel { display: flex !important; align-items: center; gap: 8px; color: var(--accent); }
    .mh-hamburger { display: inline-flex; align-items: center; justify-content: center; }
    .mh-hero-izgara, .mh-sohbet-izgara { grid-template-columns: 1fr; }
    .mh-deste { height: 460px; max-width: 520px; width: 100%; margin: 0 auto; }
    .mh-urunler { grid-template-columns: repeat(2, 1fr); }
    .mh-tarife { grid-template-columns: repeat(3, 1fr); }
    .mh-randevu-alan { grid-template-columns: 1fr 1fr; }
    .mh-nedenler { grid-template-columns: 1fr; gap: 44px; }
    .mh-ip { flex-wrap: wrap; justify-content: center; }
    .mh-asili { flex: 0 0 calc(33% - 18px); }
    .mh-telefon { margin: 0 auto; }
    .mh-alt-izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .mh-yazi { display: none; }
    .mh-logo b { font-size: 20px; }
    .mh-hero { padding: 40px 0 110px; }
    .mh-deste { height: 400px; }
    .mh-damga { width: 116px; height: 116px; }
    .mh-damga text { font-size: 14px; }
    .mh-not { font-size: 22px; }
    .mh-bolum { padding: 72px 0; }
    .mh-tarife, .mh-randevu-alan, .mh-alt-izgara { grid-template-columns: 1fr; }
    .mh-urunler { grid-template-columns: 1fr 1fr; gap: 12px; }
    .mh-urun { padding: 20px 16px; }
    .mh-urun b { font-size: 20px; }
    .mh-randevu { padding: 24px 20px; }
    .mh-asili { flex: 0 0 calc(50% - 12px); }
    .mh-ip::before { display: none; }
    .mh-hap--buyuk { width: 100%; }
}