/*
Theme Name: HTC Menü PRO
Theme URI: https://htc-menu.com
Author: WP Geliştirici
Description: HTC Menü Mobil QR Menü Sistemi için bağımsız modern SaaS Admin Panelli WordPress Teması.
Version: 2.0.0
Text Domain: htcmenu
*/

:root {
  --primary: #ff5c35;
  --primary-dark: #df3f1e;
  --primary-soft: #fff1ec;
  --secondary: #17241e;
  --green: #1e9e60;
  --green-dark: #117a47;
  --green-soft: #eaf8f0;
  --dark: #111827;
  --muted: #667085;
  --light: #f7f8f6;
  --border: #e5e7eb;
  --white: #ffffff;
  --shadow-sm: 0 10px 30px rgba(17, 24, 39, .07);
  --shadow-lg: 0 30px 80px rgba(17, 24, 39, .16);
  --radius: 22px;
  --container: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: "DM Sans", sans-serif; color: var(--dark); background: var(--white); line-height: 1.6; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
h1, h2, h3, h4, .logo { font-family: "Manrope", sans-serif; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.section { padding: 105px 0; }
.section-soft { background: var(--light); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-dark); background: var(--primary-soft); border: 1px solid #ffd8cc; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 92, 53, .12); }
.section-heading { max-width: 700px; margin-bottom: 50px; }
.section-heading.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-heading h2 { margin-top: 18px; font-size: clamp(32px, 4vw, 52px); letter-spacing: -.045em; }
.section-heading p { color: var(--muted); font-size: 18px; margin-top: 18px; }
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 13px; padding: 0 21px; border: 1px solid transparent; font-weight: 700; transition: transform .25s, box-shadow .25s, background .25s, border-color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--white); background: linear-gradient(135deg, #ff6c44, var(--primary-dark)); box-shadow: 0 13px 28px rgba(223, 63, 30, .25); }
.btn-primary:hover { box-shadow: 0 16px 34px rgba(223, 63, 30, .34); }
.btn-dark { color: var(--white); background: var(--dark); box-shadow: 0 13px 28px rgba(17, 24, 39, .18); }
.btn-outline { color: var(--dark); border-color: #d6d9de; background: rgba(255, 255, 255, .8); }
.btn-outline:hover { border-color: var(--dark); }
.icon { width: 20px; height: 20px; flex: none; }
header { position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, box-shadow .25s; }
header.scrolled { background: rgba(255, 255, 255, .92); backdrop-filter: blur(18px); border-color: rgba(17, 24, 39, .08); box-shadow: 0 8px 30px rgba(17, 24, 39, .04); }
.nav { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.logo img { max-height: 72px; width: auto; object-fit: contain; }
.logo-mark { position: relative; width: 39px; height: 39px; border-radius: 12px; background: var(--secondary); display: grid; place-items: center; box-shadow: 0 8px 18px rgba(23, 36, 30, .17); }
.logo-mark::before, .logo-mark::after { content: ""; position: absolute; background: var(--primary); border-radius: 4px; }
.logo-mark::before { width: 18px; height: 4px; }
.logo-mark::after { width: 4px; height: 18px; }
.logo-mark span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; top: 8px; right: 8px; }
.logo b { color: var(--primary); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links > a { color: #3f4754; font-size: 15px; font-weight: 600; transition: color .2s; }
.nav-links > a:hover { color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { min-height: 44px; padding: 0 17px; border-radius: 11px; font-size: 14px; }
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: 11px; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { width: 20px; height: 2px; background: var(--dark); border-radius: 5px; transition: .25s; }
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle.active span { background: transparent; }
.menu-toggle.active span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.active span::after { top: 0; transform: rotate(-45deg); }
.hero { position: relative; min-height: 820px; padding: 150px 0 95px; background: radial-gradient(circle at 80% 22%, rgba(255, 92, 53, .17), transparent 29%), radial-gradient(circle at 10% 65%, rgba(30, 158, 96, .1), transparent 28%), linear-gradient(180deg, #fff 0%, #fbfcfa 100%); overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 500px; height: 500px; top: -250px; left: -150px; border: 1px solid rgba(255, 92, 53, .12); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255, 92, 53, .025), 0 0 0 160px rgba(255, 92, 53, .018); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; }
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(45px, 6vw, 52px); max-width: 700px; margin: 22px 0; letter-spacing: -.055em; }
.hero h1 span { color: var(--primary); position: relative; }
.hero h1 span::after { content: ""; position: absolute; height: 7px; border-radius: 99px; background: rgba(255, 92, 53, .19); left: 1%; right: 1%; bottom: 3px; z-index: -1; transform: rotate(-1deg); }
.hero-lead { max-width: 620px; font-size: 19px; color: #596270; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.micro-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; color: #4b5563; font-size: 14px; font-weight: 600; }
.micro-proof span { display: inline-flex; align-items: center; gap: 7px; }
.check { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--green-dark); background: var(--green-soft); font-size: 12px; font-weight: 800; }
.hero-visual { position: relative; height: 600px; display: flex; justify-content: center; align-items: center; }
.visual-blob { position: absolute; width: 480px; height: 480px; border-radius: 42% 58% 65% 35% / 40% 35% 65% 60%; background: linear-gradient(145deg, var(--secondary), #294537); transform: rotate(8deg); box-shadow: var(--shadow-lg); }
.phone { position: relative; z-index: 3; width: 286px; height: 584px; padding: 10px; border-radius: 39px; background: #111; box-shadow: 0 36px 70px rgba(15, 23, 42, .35); transform: rotate(-4deg); animation: phoneFloat 5s ease-in-out infinite; }
@keyframes phoneFloat { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-10px); } }
.phone-screen { height: 100%; overflow: hidden; background: #f7f4ef; border-radius: 31px; position: relative; }
.phone-notch { position: absolute; z-index: 8; width: 93px; height: 24px; border-radius: 0 0 15px 15px; top: 0; left: 50%; transform: translateX(-50%); background: #111; }
.menu-cover { position: relative; height: 145px; padding: 48px 20px 16px; color: white; background-position: center; background-size: cover; }
.menu-cover h3 { font-size: 22px; }
.menu-cover p { margin-top: 2px; opacity: .8; font-size: 11px; }
.open-pill { position: absolute; right: 14px; bottom: 15px; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; background: #32c678; }
.category-scroll { padding: 13px 12px; display: flex; gap: 7px; overflow: hidden; background: #fff; border-bottom: 1px solid #eee8e1; }
.category-scroll button { border: 0; flex: none; padding: 7px 11px; border-radius: 999px; color: #6d665f; background: #f1ede7; font-size: 9px; font-weight: 700; }
.category-scroll button.active { color: white; background: var(--primary); }
.menu-products { padding: 13px; }
.menu-products h4 { font-size: 13px; margin: 0 0 9px; }
.mini-product { display: grid; grid-template-columns: 69px 1fr; gap: 10px; min-height: 78px; padding: 8px; margin-bottom: 8px; border-radius: 13px; background: #fff; box-shadow: 0 5px 13px rgba(47, 40, 32, .06); }
.mini-product img { width: 69px; height: 63px; object-fit: cover; border-radius: 9px; }
.mini-product h5 { font-family: "Manrope", sans-serif; font-size: 10px; margin-top: 3px; }
.mini-product p { font-size: 7.5px; color: #8a8178; line-height: 1.35; margin: 3px 0; }
.mini-product strong { font-size: 10px; color: var(--primary-dark); }
.mini-cart { position: absolute; z-index: 5; left: 13px; right: 13px; bottom: 12px; color: white; display: flex; justify-content: space-between; padding: 10px 13px; border-radius: 11px; background: #1a9d5e; font-size: 9px; font-weight: 800; box-shadow: 0 8px 20px rgba(26, 157, 94, .3); }
.qr-float { position: absolute; z-index: 5; right: -8px; top: 65px; width: 172px; padding: 13px; border-radius: 18px; background: white; box-shadow: 0 25px 45px rgba(17, 24, 39, .2); transform: rotate(5deg); animation: smallFloat 4s ease-in-out infinite .5s; }
@keyframes smallFloat { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-8px); } }
.qr-inner { display: grid; grid-template-columns: 63px 1fr; align-items: center; gap: 10px; }
#qrcode { width: 63px; height: 63px; overflow: hidden; }
#qrcode img, #qrcode canvas { width: 63px !important; height: 63px !important; }
.qr-float strong { font-family: "Manrope", sans-serif; display: block; font-size: 11px; line-height: 1.3; }
.qr-float small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.whatsapp-float { position: absolute; z-index: 6; left: -5px; bottom: 80px; color: #174a31; width: 190px; padding: 13px 15px; border-radius: 16px; background: white; box-shadow: 0 22px 44px rgba(17, 24, 39, .18); transform: rotate(-3deg); animation: smallFloat2 4.5s ease-in-out infinite; }
@keyframes smallFloat2 { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(7px); } }
.whatsapp-float .wa-row { display: flex; align-items: center; gap: 9px; }
.wa-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #20bd68; font-size: 18px; font-weight: 800; }
.whatsapp-float strong { display: block; font-size: 11px; }
.whatsapp-float small { color: var(--muted); display: block; font-size: 8px; }
.trust-strip { border-top: 1px solid #eceeeb; border-bottom: 1px solid #eceeeb; background: #fff; }
.trust-items { min-height: 104px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.trust-item { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; border-right: 1px solid #eceeeb; }
.trust-item:last-child { border: 0; }
.trust-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--primary-dark); flex: none; border-radius: 12px; background: var(--primary-soft); }
.trust-item strong { display: block; font: 700 14px "Manrope", sans-serif; }
.trust-item span { color: var(--muted); font-size: 12px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { position: relative; min-height: 260px; padding: 29px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.feature-card:hover { transform: translateY(-7px); border-color: #ffd1c5; box-shadow: var(--shadow-sm); }
.feature-icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--primary-dark); border-radius: 16px; background: var(--primary-soft); margin-bottom: 22px; }
.feature-card:nth-child(2) .feature-icon, .feature-card:nth-child(5) .feature-icon { color: var(--green-dark); background: var(--green-soft); }
.feature-card h3 { font-size: 20px; letter-spacing: -.02em; }
.feature-card p { color: var(--muted); margin-top: 12px; font-size: 15px; }
.feature-number { position: absolute; right: 18px; top: 12px; color: rgba(17, 24, 39, .035); font: 800 72px "Manrope", sans-serif; }
.permanent { background: var(--secondary); color: #fff; overflow: hidden; position: relative; }
.permanent::before { content: ""; position: absolute; width: 500px; height: 500px; right: -130px; top: -180px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); }
.permanent-grid { display: grid; grid-template-columns: 1fr .95fr; align-items: center; gap: 90px; }
.permanent .eyebrow { color: #ffd5ca; background: rgba(255, 92, 53, .13); border-color: rgba(255, 125, 89, .25); }
.permanent h2 { font-size: clamp(34px, 4.5vw, 55px); letter-spacing: -.045em; margin: 20px 0; }
.permanent-copy > p { color: #c6d0ca; font-size: 18px; max-width: 570px; }
.permanent-list { display: grid; gap: 15px; margin-top: 30px; }
.permanent-list li { list-style: none; display: flex; align-items: flex-start; gap: 12px; color: #e9efeb; }
.permanent-list .check { margin-top: 2px; color: white; background: var(--green); }
.qr-stage { position: relative; min-height: 450px; display: grid; place-items: center; }
.qr-card-large { width: 330px; padding: 25px; text-align: center; color: var(--dark); border-radius: 28px; background: #fff; box-shadow: 0 35px 75px rgba(0, 0, 0, .3); transform: rotate(3deg); }
.qr-card-large .brand { display: inline-flex; align-items: center; gap: 8px; font: 800 18px "Manrope", sans-serif; }
#qrcodeLarge { width: 195px; height: 195px; margin: 18px auto; padding: 8px; border: 1px solid #ececec; border-radius: 12px; }
#qrcodeLarge img, #qrcodeLarge canvas { width: 177px !important; height: 177px !important; }
.qr-card-large h3 { font-size: 19px; }
.qr-card-large p { color: var(--muted); font-size: 12px; margin-top: 5px; }
.domain-pill { margin-top: 15px; display: inline-flex; align-items: center; gap: 6px; color: var(--green-dark); background: var(--green-soft); border-radius: 999px; padding: 7px 12px; font-size: 11px; font-weight: 800; }
.infinity-badge { position: absolute; right: 4%; top: 15%; width: 110px; height: 110px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); transform: rotate(-8deg); }
.infinity-badge span { color: var(--primary); font: 800 55px "Manrope", sans-serif; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.steps::before { content: ""; position: absolute; height: 2px; top: 34px; left: 16%; right: 16%; background: linear-gradient(90deg, #ffd9cf, var(--primary), #ffd9cf); z-index: 0; }
.step { position: relative; z-index: 1; text-align: center; padding: 0 25px; }
.step-number { width: 68px; height: 68px; margin: 0 auto 22px; display: grid; place-items: center; color: white; border: 7px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 8px 20px rgba(255, 92, 53, .26); font: 800 18px "Manrope", sans-serif; }
.step h3 { font-size: 20px; }
.step p { color: var(--muted); font-size: 15px; margin-top: 10px; }
.showcase-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; }
.showcase-content h2 { font-size: clamp(34px, 4vw, 50px); letter-spacing: -.04em; margin: 18px 0; }
.showcase-content > p { color: var(--muted); font-size: 17px; }
.color-options { display: flex; gap: 10px; margin: 25px 0; }
.color-btn { width: 39px; height: 39px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #d6d9de; transition: transform .2s; }
.color-btn:hover, .color-btn.active { transform: scale(1.12); box-shadow: 0 0 0 2px var(--dark); }
.showcase-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.showcase-points span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.dashboard { overflow: hidden; border: 1px solid #e3e6e2; border-radius: 24px; background: white; box-shadow: var(--shadow-lg); }
.dashboard-top { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #eee; }
.dots { display: flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #d8dce1; }
.dashboard-top span { color: #9299a3; font-size: 10px; }
.dashboard-body { display: grid; grid-template-columns: 132px 1fr; min-height: 390px; }
.dashboard-nav { color: #dce5df; padding: 19px 12px; background: #17241e; }
.dashboard-nav strong { color: #fff; display: block; margin: 0 7px 20px; font: 800 13px "Manrope", sans-serif; }
.dashboard-nav span { display: block; padding: 9px; margin-bottom: 5px; border-radius: 7px; font-size: 8px; }
.dashboard-nav span.active { background: rgba(255,255,255,.11); color: #fff; }
.dashboard-main { padding: 23px; background: #f7f8f7; }
.dash-title { display: flex; justify-content: space-between; align-items: center; }
.dash-title h4 { font-size: 15px; }
.dash-title button { border: 0; color: white; background: var(--primary); padding: 7px 10px; border-radius: 7px; font-size: 8px; font-weight: 700; }
.stats-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 16px 0; }
.stat-mini { padding: 11px; background: #fff; border-radius: 9px; box-shadow: 0 3px 10px rgba(0,0,0,.035); }
.stat-mini small { display: block; color: #9ba1aa; font-size: 7px; }
.stat-mini strong { font-size: 14px; }
.product-table { padding: 13px; border-radius: 11px; background: #fff; }
.table-row { display: grid; grid-template-columns: 36px 1fr 65px 47px; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #f0f1f0; font-size: 8px; }
.table-row:last-child { border-bottom: 0; }
.table-row img { width: 34px; height: 30px; border-radius: 5px; object-fit: cover; }
.status { color: var(--green-dark); background: var(--green-soft); padding: 4px; text-align: center; border-radius: 6px; }
.benefits-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.benefit { padding: 24px; border-radius: 18px; background: white; border: 1px solid var(--border); }
.benefit strong { display: block; color: var(--primary); font: 800 clamp(29px, 3vw, 40px) "Manrope", sans-serif; letter-spacing: -.04em; }
.benefit h3 { margin-top: 8px; font-size: 16px; }
.benefit p { color: var(--muted); font-size: 13px; margin-top: 7px; }
.cta-box { position: relative; overflow: hidden; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 58px 65px; border-radius: 30px; background: radial-gradient(circle at 92% 15%, rgba(255, 255, 255, .12), transparent 25%), linear-gradient(135deg, #ff633e, #d83a1b); box-shadow: 0 28px 65px rgba(213, 55, 24, .25); }
.cta-box::after { content: "QR"; position: absolute; right: 25%; top: -40px; color: rgba(255,255,255,.055); font: 800 190px "Manrope", sans-serif; transform: rotate(-9deg); }
.cta-box h2 { max-width: 700px; font-size: clamp(31px, 4vw, 48px); letter-spacing: -.04em; }
.cta-box p { max-width: 650px; color: #ffe3dc; margin-top: 14px; font-size: 17px; }
.cta-box .btn { position: relative; z-index: 2; color: var(--primary-dark); background: #fff; min-width: 175px; box-shadow: 0 12px 25px rgba(111, 24, 7, .18); }
.faq-wrap { max-width: 850px; margin: 0 auto; }
.faq-item { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.faq-item.active { border-color: #ffcabc; box-shadow: 0 10px 30px rgba(17, 24, 39, .055); }
.faq-question { width: 100%; padding: 21px 23px; border: 0; background: none; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--dark); font: 700 16px "Manrope", sans-serif; }
.faq-plus { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 21px; transition: transform .25s; }
.faq-item.active .faq-plus { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-answer p { padding: 0 23px 22px; color: var(--muted); font-size: 15px; }
footer { color: #c9d1cc; padding: 70px 0 26px; background: #101914; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .65fr .65fr .8fr; gap: 50px; }
.footer-about .logo { color: #fff; }
.footer-about p { max-width: 350px; margin-top: 18px; color: #94a29a; font-size: 14px; }
.footer-col h3 { color: #fff; font-size: 14px; margin-bottom: 17px; }
.footer-col a { display: block; color: #94a29a; font-size: 14px; margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 20px; color: #7f8d85; font-size: 12px; }
.mobile-cta { display: none; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .nav-links { gap: 18px; }
  .hero-grid { gap: 20px; }
  .hero-visual { transform: scale(.9); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .permanent-grid, .showcase-grid { gap: 45px; }
  .benefits-wrap { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .section { padding: 78px 0; }
  .nav-links { position: fixed; inset: 82px 16px auto; display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: .25s; }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links > a { padding: 13px; }
  .nav-links .mobile-link-btn { color: #fff; text-align: center; border-radius: 10px; background: var(--primary); margin-top: 8px; }
  .menu-toggle { display: inline-flex; }
  .nav-actions .btn { display: none; }
  .hero { min-height: auto; padding-top: 125px; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-content { display: flex; flex-direction: column; align-items: center; }
  .hero-visual { margin-top: 25px; }
  .trust-items { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: 0; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid #eceeeb; }
  .permanent-grid, .showcase-grid { grid-template-columns: 1fr; }
  .permanent-copy { text-align: center; }
  .permanent-copy > p { margin-left: auto; margin-right: auto; }
  .permanent-list { text-align: left; max-width: 550px; margin-left: auto; margin-right: auto; }
  .showcase-content { text-align: center; }
  .color-options { justify-content: center; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .steps::before { width: 2px; height: auto; left: 50%; top: 34px; bottom: 34px; right: auto; }
  .step { background: #fff; }
  .cta-box { grid-template-columns: 1fr; text-align: center; padding: 50px 35px; }
  .cta-box .btn { justify-self: center; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .nav { height: 70px; }
  .nav-links { top: 70px; }
  .logo { font-size: 20px; }
  .hero { padding: 106px 0 58px; }
  .hero h1 { font-size: 42px; }
  .hero-lead { font-size: 17px; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .micro-proof { justify-content: center; gap: 12px; }
  .hero-visual { height: 520px; transform: scale(.76); margin: -20px -70px -35px; }
  .visual-blob { width: 440px; height: 440px; }
  .features-grid, .benefits-wrap { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }
  .trust-item { flex-direction: column; text-align: center; gap: 7px; padding: 17px 8px; }
  .trust-icon { width: 38px; height: 38px; }
  .section-heading { margin-bottom: 34px; }
  .section-heading p { font-size: 16px; }
  .qr-stage { min-height: 410px; transform: scale(.88); margin: -15px -35px; }
  .infinity-badge { right: 0; top: 6%; width: 80px; height: 80px; }
  .dashboard-body { grid-template-columns: 95px 1fr; }
  .dashboard-main { padding: 13px; }
  .stats-mini { gap: 5px; }
  .stat-mini { padding: 8px 6px; }
  .table-row { grid-template-columns: 30px 1fr 44px; }
  .table-row .status { display: none; }
  .showcase-points { grid-template-columns: 1fr; text-align: left; }
  .cta-box { padding: 40px 22px; border-radius: 23px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
  .footer-bottom { flex-direction: column; }
  .mobile-cta { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 8px; padding: 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 16px; background: rgba(255,255,255,.91); backdrop-filter: blur(14px); box-shadow: 0 15px 45px rgba(17,24,39,.22); transform: translateY(130%); transition: transform .3s; }
  .mobile-cta.visible { transform: none; }
  .mobile-cta .btn { min-height: 45px; padding: 0 9px; font-size: 13px; }
  footer { padding-bottom: 100px; }
}


/* Floating WhatsApp Chat Widget */
.htc-wa-float-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #ffffff !important;
  padding: 12px 20px;
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.htc-wa-float-btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.45);
  background: #20ba5a;
  color: #fff;
}

.htc-wa-icon-wrap {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.htc-wa-icon-wrap svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.htc-wa-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  border: 2px solid #25d366;
  animation: waPulse 2s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

@keyframes waPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

@media (max-width: 560px) {
  .htc-wa-float-btn {
    bottom: 80px;
    right: 16px;
    padding: 10px 16px;
    font-size: 13px;
  }
}


/* Feature card visual media — managed from HTC Menü Panel */
.feature-card { min-height: 0; padding: 0 0 28px; }
.feature-media { position: relative; height: 178px; overflow: hidden; background: #eef1ee; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.feature-card:hover .feature-media img { transform: scale(1.045); }
.feature-media.is-placeholder { background: linear-gradient(135deg, #17241e 0%, #294537 100%); }
.feature-card:nth-child(2) .feature-media.is-placeholder,
.feature-card:nth-child(5) .feature-media.is-placeholder { background: linear-gradient(135deg, #117a47 0%, #28a66c 100%); }
.feature-card:nth-child(3) .feature-media.is-placeholder,
.feature-card:nth-child(6) .feature-media.is-placeholder { background: linear-gradient(135deg, #df3f1e 0%, #ff7653 100%); }
.feature-media-fallback { position: absolute; inset: 0; display: block; }
.feature-media-fallback::before { content: ""; position: absolute; width: 150px; height: 150px; right: -24px; top: -34px; border: 1px solid rgba(255,255,255,.22); border-radius: 38px; transform: rotate(22deg); box-shadow: 0 0 0 28px rgba(255,255,255,.055), 0 0 0 58px rgba(255,255,255,.035); }
.feature-media-fallback::after { content: "HTC Menü"; position: absolute; left: 28px; bottom: 25px; color: rgba(255,255,255,.92); font: 800 22px "Manrope", sans-serif; letter-spacing: -.04em; }
.feature-card > .feature-number { z-index: 3; right: 16px; top: 15px; color: #17241e; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.72); border-radius: 999px; padding: 5px 10px; box-shadow: 0 8px 20px rgba(17,24,39,.12); font-size: 12px; line-height: 1; }
.feature-card .feature-icon { position: relative; z-index: 2; margin: -27px 0 18px 26px; border: 5px solid #fff; box-sizing: content-box; box-shadow: 0 10px 24px rgba(17,24,39,.12); }
.feature-card h3, .feature-card p { margin-left: 28px; margin-right: 28px; }
.feature-card p { margin-top: 10px; }
@media (max-width: 767px) {
  .feature-media { height: 160px; }
  .feature-card { padding-bottom: 24px; }
  .feature-card h3, .feature-card p { margin-left: 22px; margin-right: 22px; }
  .feature-card .feature-icon { margin-left: 22px; }
}

/* QR MENU LANDING PAGE STYLES — kept outside the page editor */
.qr-landing{--q-orange:#ff5c35;--q-orange-dark:#df3f1e;--q-green:#173c2e;--q-soft:#f6f8f6;--q-text:#111827;--q-muted:#667085;--q-border:#e5e7eb;color:var(--q-text);font-family:"DM Sans",sans-serif;overflow:hidden}.qr-landing *{box-sizing:border-box}.qr-landing img{display:block;width:100%;height:auto}.qr-wrap{width:min(calc(100% - 40px),1180px);margin:auto}.qr-hero{padding:150px 0 90px;background:radial-gradient(circle at 85% 20%,rgba(255,92,53,.18),transparent 30%),linear-gradient(180deg,#fff,#f8faf8)}.qr-hero-grid,.qr-split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:64px;align-items:center}.qr-hero-grid>*{min-width:0}.qr-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:99px;background:#fff0eb;color:var(--q-orange-dark);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.qr-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--q-orange)}.qr-hero h1{font:800 clamp(42px,5.8vw,52px)/1.05 "Manrope",sans-serif;letter-spacing:-.055em;margin:22px 0}.qr-hero h1 .qr-accent{color:var(--q-orange)}.qr-lead{font-size:19px;color:var(--q-muted);max-width:650px}.qr-slogan{display:inline-block;margin-top:22px;padding:10px 14px;border-left:4px solid var(--q-orange);background:#fff;font-weight:800}.qr-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.qr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:13px;font-weight:800;text-decoration:none!important}.qr-btn-primary{color:#fff!important;background:linear-gradient(135deg,#ff714d,var(--q-orange-dark));box-shadow:0 14px 30px rgba(223,63,30,.24)}.qr-btn-light{color:var(--q-text)!important;background:#fff;border:1px solid #d7dce0}.qr-image{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#173c2e,#2c6a50);box-shadow:0 28px 70px rgba(17,24,39,.16);aspect-ratio:4/3}.qr-image img{height:100%;object-fit:cover}.qr-image:after{content:"HTC Menü";position:absolute;left:18px;bottom:18px;padding:7px 11px;color:#fff;background:rgba(17,24,39,.6);backdrop-filter:blur(10px);border-radius:9px;font-weight:800}.qr-proof{padding:28px 0;background:#173c2e;color:#fff}.qr-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.qr-proof-item{display:flex;gap:12px;align-items:center;padding:14px}.qr-proof-item b{display:block}.qr-proof-item span{font-size:13px;color:#c8d7d0}.qr-proof-icon{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:13px;background:rgba(255,255,255,.1);color:#ff8a6b;font-size:20px}.qr-section{padding:92px 0}.qr-section-alt{background:var(--q-soft)}.qr-section h2{font:800 clamp(30px,4vw,48px)/1.12 "Manrope",sans-serif;letter-spacing:-.04em;margin:15px 0 20px}.qr-section h3{font:800 23px/1.25 "Manrope",sans-serif;margin:25px 0 12px}.qr-section p{color:var(--q-muted);font-size:17px;margin:0 0 16px}.qr-section strong{color:var(--q-text)}.qr-list{display:grid;gap:10px;margin:22px 0;padding:0;list-style:none}.qr-list li{position:relative;padding-left:30px;color:#4b5563}.qr-list li:before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#eaf8f0;color:#117a47;font-size:12px;font-weight:900}.qr-chip-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.qr-chip{padding:9px 13px;border-radius:99px;background:#fff;border:1px solid var(--q-border);font-size:14px;font-weight:700}.qr-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}.qr-step{padding:28px;border:1px solid var(--q-border);border-radius:20px;background:#fff}.qr-step-num{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#fff0eb;color:var(--q-orange-dark);font-weight:900}.qr-step h3{font-size:18px;margin:18px 0 9px}.qr-step p{font-size:14px;margin:0}.qr-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}.qr-info-card{padding:25px;border-radius:20px;border:1px solid var(--q-border);background:#fff}.qr-info-card h3{font-size:19px;margin:0 0 10px}.qr-domain{display:block;margin:24px 0;padding:20px;border-radius:16px;background:#173c2e;color:#fff;font:800 clamp(22px,3vw,34px) "Manrope",sans-serif;text-align:center}.qr-quote{padding:25px;border-radius:18px;background:#fff0eb;color:var(--q-orange-dark);font:800 22px "Manrope",sans-serif}.qr-centered{text-align:center}.qr-centered .qr-list{max-width:760px;margin:25px auto;text-align:left;grid-template-columns:1fr 1fr}.qr-audience{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}.qr-audience span{padding:18px;border-radius:15px;background:#fff;border:1px solid var(--q-border);font-weight:750;text-align:center}.qr-cta{padding:80px 0;background:linear-gradient(135deg,#df3f1e,#ff714d);color:#fff}.qr-cta-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:center}.qr-cta h2{font:800 clamp(32px,4.6vw,54px)/1.08 "Manrope",sans-serif;letter-spacing:-.04em;margin:0 0 18px}.qr-cta p{color:#fff4ef;font-size:18px}.qr-cta .qr-btn{background:#fff;color:#b93518!important}.qr-faq{max-width:900px;margin:35px auto 0}.qr-faq details{border:1px solid var(--q-border);border-radius:16px;background:#fff;margin-bottom:12px;padding:0 21px}.qr-faq summary{cursor:pointer;padding:20px 35px 20px 0;font-weight:800;list-style:none;position:relative}.qr-faq summary:after{content:"+";position:absolute;right:0;font-size:24px;color:var(--q-orange)}.qr-faq details[open] summary:after{content:"−"}.qr-faq details p{padding:0 0 20px;margin:0;font-size:15px}.qr-note{font-size:12px!important;color:#98a2b3!important;margin-top:10px!important}.qr-reverse .qr-copy{order:2}.qr-reverse .qr-image{order:1}@media(max-width:900px){.qr-hero-grid,.qr-split,.qr-cta-grid{grid-template-columns:1fr;gap:36px}.qr-steps,.qr-proof-grid{grid-template-columns:1fr 1fr}.qr-audience{grid-template-columns:repeat(3,1fr)}.qr-reverse .qr-copy,.qr-reverse .qr-image{order:initial}.qr-hero{padding-top:125px}}@media(max-width:600px){.qr-wrap{width:min(calc(100% - 28px),1180px)}.qr-hero{padding:115px 0 64px}.qr-section{padding:65px 0}.qr-steps,.qr-card-grid,.qr-proof-grid,.qr-audience,.qr-centered .qr-list{grid-template-columns:1fr}.qr-image{border-radius:20px}.qr-actions{display:grid}.qr-btn{width:100%}}