:root {
  --forest-950: #09271f;
  --forest-900: #0d3329;
  --forest-800: #123f33;
  --forest-700: #195442;
  --mint-500: #79c6a9;
  --mint-300: #b8e0d0;
  --mint-100: #e6f2ec;
  --cream: #f7f3eb;
  --paper: #fffdf9;
  --sand: #e8dfd2;
  --ink: #13251f;
  /* Was #68736e, which is 4.92:1 on white but only 4.45:1 on --cream and
     4.28:1 on --mint-100 — both below AA, and both are backgrounds this token
     now sits on (the trust cards, the app section, the claim card). #5f6a65
     is the shallowest step that clears 4.5:1 against every background the
     palette has: paper 5.53, cream 5.08, mint-100 4.89, white 5.62. */
  --muted: #5f6a65;
  --line: rgba(18, 63, 51, 0.13);
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --shell: 1200px;
  --radius-xl: 32px;
  --shadow: 0 24px 60px rgba(7, 30, 24, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
button, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.section { padding-block: 112px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 12px 18px; background: white; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: max(24px, calc((100vw - var(--shell)) / 2)); color: white; border-bottom: 1px solid rgba(255,255,255,.15); transition: background .3s, height .3s, box-shadow .3s; }
.site-header.scrolled { height: 72px; color: var(--ink); background: rgba(255,253,249,.92); border-color: var(--line); box-shadow: 0 10px 30px rgba(18,50,41,.06); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; justify-self: start; gap: 10px; font-size: 22px; font-weight: 500; letter-spacing: -.7px; }
.brand > span > span { font-weight: 700; }
.brand-mark { width: 38px; color: var(--mint-500); transform: rotate(-3deg); }
.site-header:not(.scrolled) .brand-mark { color: #8dd8ba; }
.desktop-nav { display: flex; gap: 34px; font-size: 14px; font-weight: 500; }
.desktop-nav a, .partner-link { position: relative; }
.desktop-nav a::after, .partner-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: currentColor; transition: right .25s; }
.desktop-nav a:hover::after, .partner-link:hover::after { right: 0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.partner-link { font-size: 14px; font-weight: 600; }
.menu-button { display: none; border: 0; color: currentColor; background: none; width: 42px; height: 42px; padding: 10px; cursor: pointer; }
.menu-button span:not(.sr-only) { display: block; height: 1.5px; width: 22px; margin: 5px auto; background: currentColor; transition: transform .25s; }
.mobile-nav { display: none; }

.hero { min-height: 840px; height: 100svh; position: relative; overflow: hidden; color: white; background: var(--forest-900); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.015); animation: heroIn 1.2s cubic-bezier(.2,.7,.2,1) both; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,31,24,.92) 0%, rgba(8,39,30,.7) 35%, rgba(6,30,24,.12) 70%, rgba(5,24,19,.18) 100%), linear-gradient(0deg, rgba(4,25,19,.58), transparent 46%); }
.hero-orb { position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.hero-orb-one { width: 520px; height: 520px; right: -160px; bottom: -210px; }
.hero-orb-two { width: 350px; height: 350px; right: -72px; bottom: -128px; }
.hero-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 86px; }
.hero-copy { max-width: 650px; margin-top: -36px; }
.eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 11px; color: var(--forest-700); font-size: 12px; line-height: 1; letter-spacing: 1.7px; text-transform: uppercase; font-weight: 700; }
.eyebrow span { width: 28px; height: 1px; background: currentColor; }
.eyebrow-light { color: #9bdabb; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -2.7px; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(64px, 7.2vw, 104px); line-height: .92; max-width: 8ch; }
h1 em, h2 em { font-weight: 400; color: var(--mint-500); }
.hero-copy > p { max-width: 570px; margin: 28px 0 0; color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.7; }

.search-panel { width: min(100%, 1030px); margin-top: 46px; padding: 10px; display: grid; grid-template-columns: 1fr 1px 1fr 1px .95fr auto; gap: 3px; align-items: stretch; color: var(--ink); background: rgba(255,255,255,.97); border-radius: 18px; box-shadow: 0 22px 60px rgba(0,20,14,.28); }
.search-field { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; border-radius: 11px; transition: background .2s; }
.search-field:hover { background: var(--cream); }
.field-icon { flex: 0 0 21px; color: var(--forest-700); }
.field-icon svg, .search-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field-copy { display: grid; gap: 3px; min-width: 0; }
.field-copy > span { color: var(--ink); font-size: 12px; font-weight: 700; }
.field-copy select { width: 100%; padding: 0 22px 0 0; color: #76807b; background: transparent; border: 0; outline: 0; font-size: 14px; cursor: pointer; }
.search-separator { width: 1px; margin-block: 10px; background: var(--line); }
.search-button { min-width: 142px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; color: white; border: 0; border-radius: 12px; background: var(--forest-800); font-weight: 600; cursor: pointer; transition: transform .2s, background .2s; }
.search-button:hover { background: var(--forest-700); transform: translateY(-1px); }
.hero-meta { position: absolute; inset: auto 0 34px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.68); font-size: 12px; }
.trust-row { display: flex; align-items: center; }
.trust-row strong { color: white; font-size: 13px; font-weight: 600; }
.avatar { width: 30px; height: 30px; margin-left: -7px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; background: linear-gradient(145deg, #d3aa8e, #5c362a); }
.avatar:first-child { margin-left: 0; }.avatar-two { background: linear-gradient(145deg,#b7c9b9,#4d6554); }.avatar-three { margin-right: 12px; background: linear-gradient(145deg,#e0bd9f,#7a5242); }
.hero-meta > a { display: flex; align-items: center; gap: 12px; color: white; font-size: 13px; font-weight: 500; }
.hero-meta > a span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }

.section-heading { display: grid; grid-template-columns: 1.1fr .7fr; gap: 80px; align-items: end; margin-bottom: 60px; }
.section-heading h2, .promise-heading h2, .city-copy h2, .partner-copy h2, .app-copy h2 { font-size: clamp(48px, 5vw, 72px); line-height: .98; }
.section-heading > p { max-width: 420px; margin: 0 0 5px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.experience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.experience-card { min-height: 380px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 30px 28px; border: 1px solid var(--line); border-radius: 20px; background: #fbf9f4; overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; }
.experience-card::after { content: ""; position: absolute; width: 180px; height: 180px; left: -80px; top: -90px; border: 1px solid var(--line); border-radius: 50%; }
.experience-card:hover { transform: translateY(-8px); border-color: transparent; box-shadow: var(--shadow); }
.experience-featured { color: white; background: var(--forest-800); border-color: var(--forest-800); }
.experience-featured::after { border-color: rgba(255,255,255,.1); }
.experience-icon { width: 62px; height: 62px; display: grid; place-items: center; color: var(--forest-700); border-radius: 50%; background: var(--mint-100); }
.experience-featured .experience-icon { color: var(--mint-300); background: rgba(255,255,255,.09); }
.experience-icon svg { width: 34px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.experience-card > div:nth-child(2) { margin-top: auto; padding-top: 50px; }
/* Was #8b948f, which is 2.97:1 on this card and fails WCAG AA for text. The
   palette's own --muted clears it at 4.68:1 and needs no new colour. */
.experience-card span { color: var(--muted); font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 700; }
.experience-featured span { color: var(--mint-300); }
.experience-card h3 { margin: 10px 0 12px; font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: -.5px; }
.experience-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.experience-featured p { color: rgba(255,255,255,.68); }
.round-link { position: absolute; right: 24px; top: 26px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--forest-700); border: 1px solid var(--line); border-radius: 50%; font-size: 19px; transition: background .2s, color .2s; }
.experience-featured .round-link { color: white; border-color: rgba(255,255,255,.2); }
.round-link:hover { color: white; background: var(--forest-700); }

.promise-section { color: white; background: var(--forest-950); overflow: hidden; }
.promise-section .shell { position: relative; }
.promise-section .shell::after { content: ""; position: absolute; width: 520px; height: 520px; right: -280px; top: -300px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.015), 0 0 0 160px rgba(255,255,255,.012); }
.promise-heading { margin-bottom: 68px; }
.steps-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); }
.step-card { position: relative; min-height: 310px; padding: 34px 44px 30px 0; border-top: 1px solid rgba(255,255,255,.18); }
.step-card:not(:last-child) { margin-right: 44px; }
.step-card:not(:last-child)::after { content: ""; position: absolute; right: -1px; top: 32px; bottom: 24px; width: 1px; background: rgba(255,255,255,.1); }
.step-number { color: var(--mint-300); font-size: 12px; letter-spacing: 1px; }
.step-symbol { width: 54px; height: 54px; display: grid; place-items: center; margin: 54px 0 26px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: var(--mint-300); }
.step-symbol svg { width: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.step-card h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 30px; font-weight: 400; }
.step-card p { max-width: 300px; margin: 0; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.75; }

.cities-section { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: center; }
.city-visual { min-height: 480px; position: relative; display: grid; place-items: center; border-radius: var(--radius-xl); background: #eef2eb; overflow: hidden; }
.city-glow { position: absolute; width: 520px; height: 520px; background: radial-gradient(circle, rgba(121,198,169,.34), transparent 68%); }
.turkey-line { width: 88%; position: relative; z-index: 1; fill: rgba(255,255,255,.6); stroke: #6b9d87; stroke-width: 1.3; filter: drop-shadow(0 18px 16px rgba(49,90,72,.1)); }
.turkey-line circle { fill: var(--forest-700); stroke: white; stroke-width: 4; }
.city-badge { position: absolute; z-index: 2; display: flex; gap: 7px; align-items: center; padding: 9px 13px; color: var(--forest-800); background: rgba(255,255,255,.88); border: 1px solid white; border-radius: 30px; box-shadow: 0 10px 28px rgba(26,70,52,.12); font-size: 11px; font-weight: 600; }
.city-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-500); box-shadow: 0 0 0 4px rgba(121,198,169,.16); }
.city-badge-one { left: 10%; top: 30%; }.city-badge-two { left: 26%; bottom: 25%; }.city-badge-three { right: 29%; top: 38%; }
.city-badge-four { left: 40%; bottom: 12%; }.city-badge-five { left: 16%; top: 8%; }
.city-copy > p:not(.eyebrow) { margin: 28px 0 30px; color: var(--muted); line-height: 1.8; }
.city-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.city-list li { padding: 9px 14px; color: var(--forest-700); border: 1px solid var(--line); border-radius: 100px; background: var(--paper); font-size: 12px; font-weight: 600; }
.city-list li:last-child { color: white; background: var(--forest-700); border-color: var(--forest-700); }
/* Same specificity as `.city-copy > p:not(.eyebrow)` above and declared after
   it, so it wins the margin without needing !important. */
.city-copy > p.city-note { margin: 26px 0 0; font-size: 13px; }

.partner-section { position: relative; color: white; background: var(--forest-800); overflow: hidden; }
.partner-section::before { content: ""; position: absolute; width: 700px; height: 700px; left: -330px; bottom: -500px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 110px rgba(255,255,255,.018); }
.partner-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.partner-copy > p:not(.eyebrow) { max-width: 510px; margin: 28px 0 28px; color: rgba(255,255,255,.67); line-height: 1.75; }
.partner-copy ul { list-style: none; padding: 0; margin: 0 0 35px; display: grid; gap: 12px; color: rgba(255,255,255,.86); font-size: 14px; }
.partner-copy li span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 9px; color: var(--forest-900); background: var(--mint-500); border-radius: 50%; font-size: 11px; font-weight: 800; }
.light-button { display: inline-flex; align-items: center; gap: 24px; padding: 15px 18px 15px 22px; color: var(--forest-900); border-radius: 10px; background: white; font-size: 13px; font-weight: 700; transition: transform .2s; }
.light-button:hover { transform: translateY(-2px); }
.light-button span { font-size: 18px; }
.dashboard-wrap { position: relative; padding: 30px 0 30px 25px; }
.dashboard { min-height: 450px; display: grid; grid-template-columns: 82px 1fr; color: var(--ink); border-radius: 22px; background: #f7f8f4; box-shadow: 0 40px 70px rgba(0,18,12,.25); overflow: hidden; transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.dashboard-sidebar { display: flex; flex-direction: column; align-items: center; gap: 23px; padding-top: 30px; background: #eef1eb; }
.mini-logo { display: flex; align-items: end; gap: 3px; height: 22px; margin-bottom: 20px; }.mini-logo i { width: 5px; height: 14px; border-radius: 5px; background: var(--forest-700); }.mini-logo i:nth-child(2){height:22px}.mini-logo i:nth-child(3){height:17px}
.dash-nav { width: 27px; height: 5px; border-radius: 4px; background: #cdd7d0; }.dash-nav.active { height: 27px; background: var(--forest-700); }.dash-nav.short { width: 19px; }
.dashboard-main { padding: 30px; }
/* Every grey in this mock panel used to be its own hex between #748079 and
   #8a9590 — 2.90:1 to 4.11:1 on the panel's white, all of it below AA, some of
   it at 8px. Being a picture of a product does not exempt text from being
   readable, and this panel is now the hero visual of /isletmeler rather than
   one illustration near the foot of one page. They are all --muted, which is
   5.27:1 here; the mock stays a mock through its scale, not through low
   contrast. */
.dash-top { display: flex; justify-content: space-between; align-items: center; }.dash-top div { display: grid; gap: 3px; }.dash-top small { color:var(--muted);font-size:10px}.dash-top strong{font-family:var(--serif);font-size:22px}.profile-dot{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#a6bdae,#416455)}
.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 18px; }.dash-stats>div{display:grid;grid-template-columns:1fr auto;align-items:end;padding:17px;border:1px solid #dfe6df;border-radius:12px;background:white}.dash-stats small{grid-column:1/-1;color:var(--muted);font-size:9px}.dash-stats b{font-family:var(--serif);font-size:30px}
/* Was #4d9a79 (3.38:1). #377a5d is 5.12:1 and still reads as the positive green. */
.dash-stats span{color:#377a5d;font-size:9px}
.dash-calendar { padding: 18px; border-radius: 14px; background: white; }.calendar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.calendar-head strong{font-size:12px}.calendar-head span{color:var(--muted);font-size:9px}.appointment{display:grid;grid-template-columns:39px 5px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid #edf0ed}.appointment time{color:var(--muted);font-size:9px}.appointment i{width:5px;height:31px;border-radius:4px}.appointment .mint{background:#7ec8a9}.appointment .peach{background:#d9a68f}.appointment .sage{background:#9caf8f}.appointment div{display:grid;gap:2px}.appointment b{font-size:10px}.appointment small{color:var(--muted);font-size:8px}.appointment>span{color:var(--muted);font-size:8px}
.floating-review { position: absolute; right: -26px; bottom: 3px; display: flex; align-items: center; gap: 11px; padding: 14px 18px; color: var(--ink); border-radius: 12px; background: white; box-shadow: 0 16px 35px rgba(0,24,16,.22); }.floating-review>span{display:grid;place-items:center;width:34px;height:34px;color:#8b6821;background:#fff1c9;border-radius:50%}.floating-review div{display:grid;gap:2px}.floating-review b{font-size:11px}.floating-review small{color:#849089;font-size:8px}

footer { color: rgba(255,255,255,.8); background: #071f19; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; padding-block: 62px 48px; }
/* Was .48 alpha (4.4:1). .62 is 6.6:1 — this line now carries the "Yakında 81
   ilde" claim rather than one decorative sentence, so it has to be readable. */
.footer-brand { color: white; }.footer-top > div > p { margin: 17px 0 0; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.7; }
/* Alpha raised from .38 (3.52:1, below AA) to .55 (5.94:1). */
.footer-bottom { display: flex; justify-content: space-between; padding-block: 22px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); font-size: 11px; }

.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; width: min(390px, calc(100% - 48px)); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 17px; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast-icon { width: 34px; height: 34px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--forest-700); }
.toast strong { font-size: 13px; }.toast p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }.toast button{align-self:start;border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes heroIn { from { opacity: .3; transform: scale(1.07); } to { opacity: 1; transform: scale(1.015); } }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }.desktop-nav,.partner-link{display:none}.menu-button{display:block}.mobile-nav{position:fixed;inset:72px 0 auto;display:grid;gap:0;padding:18px 24px 28px;color:var(--ink);background:rgba(255,253,249,.98);box-shadow:0 20px 30px rgba(0,20,14,.1);transform:translateY(-140%);opacity:0;transition:transform .3s,opacity .3s}.mobile-nav.open{transform:none;opacity:1}.mobile-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-weight:600}
  .hero{min-height:820px}.hero-copy{margin-top:-50px}.hero-image{object-position:62% center}.search-panel{grid-template-columns:1fr 1px 1fr auto}.search-field:nth-of-type(3),.search-separator:nth-of-type(5){display:none}
  .experience-grid{grid-template-columns:repeat(2,1fr)}.experience-card{min-height:330px}.cities-section,.partner-grid{grid-template-columns:1fr;gap:60px}.city-visual{order:2}.partner-copy{max-width:640px}.dashboard-wrap{max-width:680px}.section-heading{grid-template-columns:1fr .8fr;gap:40px}
}

@media (max-width: 680px) {
  .shell{width:min(calc(100% - 32px),var(--shell))}.section{padding-block:78px}.site-header{height:70px;padding-inline:16px}.site-header.scrolled{height:64px}.brand{font-size:19px}.brand-mark{width:33px}.mobile-nav{inset:64px 0 auto}
  .hero{min-height:760px;height:auto}.hero-image{object-position:67% center}.hero-shade{background:linear-gradient(90deg,rgba(5,28,21,.88),rgba(5,28,21,.33)),linear-gradient(0deg,rgba(4,25,19,.74),transparent 65%)}.hero-content{min-height:760px;padding:150px 0 100px;justify-content:flex-start}.hero-copy{margin:0}.hero-copy>p{font-size:15px;line-height:1.65}.eyebrow{margin-bottom:18px;font-size:10px}h1{font-size:61px}.search-panel{margin-top:34px;padding:8px;grid-template-columns:1fr}.search-separator,.search-field:nth-of-type(2),.search-field:nth-of-type(3){display:none}.search-button{height:54px}.hero-meta{bottom:24px}.hero-meta>a{display:none}.trust-row{font-size:10px}
  .section-heading{display:block;margin-bottom:38px}.section-heading>p{margin-top:25px}.section-heading h2,.promise-heading h2,.city-copy h2,.partner-copy h2,.app-copy h2{font-size:48px}.experience-grid{grid-template-columns:1fr}.experience-card{min-height:280px}.experience-card>div:nth-child(2){padding-top:30px}
  .promise-heading{margin-bottom:45px}.steps-grid{grid-template-columns:1fr}.step-card{min-height:0;padding:26px 0 34px}.step-card:not(:last-child){margin-right:0}.step-card:not(:last-child)::after{display:none}.step-symbol{margin:28px 0 20px}.city-visual{min-height:330px}.city-badge{font-size:9px}.city-badge-three{right:15%}.city-badge-one{left:5%}.city-badge-two{left:18%}.cities-section{gap:45px}.partner-grid{gap:42px}
  .dashboard-wrap{padding:0}.dashboard{min-height:365px;grid-template-columns:58px 1fr;transform:none}.dashboard-sidebar{padding-top:22px}.dashboard-main{padding:18px 14px}.dash-stats{margin:18px 0 12px}.appointment{grid-template-columns:32px 4px 1fr}.appointment>span{display:none}.floating-review{right:-8px;bottom:-28px}.footer-top{display:grid;gap:35px}.footer-bottom{gap:20px;flex-direction:column}.toast{right:16px;bottom:16px;width:calc(100% - 32px)}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}
}

/* --- additions for deployment (see docs/HOSTING.md) ---------------------- */

/* The .reveal elements are hidden until an IntersectionObserver marks them
   visible. If script.js never runs, every section of this page stays at
   opacity 0 — a blank site. script.js drops `no-js` from <html> on its first
   line, so this rule is what the page falls back to. */
.no-js .reveal { opacity: 1; transform: none; }

/* The mobile menu is the only navigation below 980px and it opens with JS, so
   without the script there is no way to reach the sections. Falling back to a
   plain visible row keeps them reachable. */
.no-js .mobile-nav { display: flex; flex-wrap: wrap; gap: 18px; position: static; transform: none; opacity: 1; padding: 0 0 14px; }
.no-js .menu-button { display: none; }

/* --mint-500 is 1.98:1 on the cream sections — below AA even at the 48px that
   counts as large text. The dark sections keep it, where it is 7.92:1 against
   --forest-950 and doing exactly the job it was picked for; only the two light
   headings get a deeper step of the same hue, at 3.67:1. */
.section-heading h2 em,
.city-copy h2 em,
.app-copy h2 em,
.claim-card h2 em { color: #3d9376; }

/* Was #76807b (4.08:1) and #849089 (3.32:1) on white. --muted is 4.92:1. */
.field-copy select { color: var(--muted); }
.floating-review small { color: var(--muted); }

/* Names the sample dashboard as a sample. Deliberately not at the 11px the
   surrounding micro-labels use: this line is what keeps the invented salon name
   and occupancy figure below it from reading as real, so it is the one caption
   on the page that must actually be read. */
.dashboard-caption {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  letter-spacing: .2px;
}

/* The same caption over the phone mockup, which sits on a light section — so
   it needs the light-background colour rather than the dark one. --muted is
   4.92:1 on white and 4.63:1 on --cream, both AA for body text. */
.app-section .dashboard-caption { color: var(--muted); }

/* === Neden masajagit? ==================================================== */

/* #deneyimler ends 112px above this and both sections are light, so the full
   112px again would read as one long stretch of nothing. The heading provides
   the break. */
.trust-section { padding-top: 28px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trust-card { padding: 32px 30px 34px; border: 1px solid var(--line); border-radius: 20px; background: var(--cream); transition: transform .35s, box-shadow .35s, border-color .35s; }
.trust-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow); }
.trust-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 26px; color: var(--forest-700); background: var(--mint-100); border-radius: 50%; }
.trust-icon svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust-card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 23px; font-weight: 500; letter-spacing: -.4px; }
.trust-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* === Yakında iOS ve Android'de =========================================== */

.app-section { background: var(--cream); }
.app-grid { display: grid; grid-template-columns: 1fr .82fr; gap: 80px; align-items: center; }
.app-copy > p:not(.eyebrow) { max-width: 480px; margin: 26px 0 30px; color: var(--muted); line-height: 1.8; }
.app-list { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 12px; color: var(--ink); font-size: 14px; }
.app-list li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.55; }
.app-list li span { flex: 0 0 20px; display: inline-grid; place-items: center; height: 20px; margin-top: 1px; color: white; background: var(--forest-700); border-radius: 50%; font-size: 10px; font-weight: 800; }

/* Not <a> and not the official badge art — there is no store listing behind
   either of these yet. A tile that cannot be clicked cannot disappoint. */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.store-tile { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 16px; color: var(--forest-900); border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.store-tile svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.store-tile div { display: grid; gap: 1px; }
.store-tile small { color: var(--muted); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; }
.store-tile b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.ghost-button { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; color: white; background: var(--forest-800); border-radius: 10px; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s; }
.ghost-button:hover { background: var(--forest-700); transform: translateY(-2px); }
.ghost-button span { font-size: 16px; }

.phone-wrap { justify-self: center; }
.phone { width: 292px; padding: 11px; border-radius: 42px; background: linear-gradient(160deg, #17392f, #0b241d); box-shadow: 0 40px 70px rgba(0,24,16,.28), inset 0 0 0 1px rgba(255,255,255,.08); }
.phone-screen { position: relative; min-height: 520px; padding: 30px 16px 18px; border-radius: 32px; background: var(--paper); overflow: hidden; }
/* The notch. Decorative, so it is drawn rather than marked up. */
.phone-screen::before { content: ""; position: absolute; left: 50%; top: 11px; width: 82px; height: 6px; transform: translateX(-50%); background: #dfe4df; border-radius: 4px; }
.phone-top { display: grid; gap: 2px; margin-bottom: 14px; }
.phone-top small { color: var(--muted); font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 700; }
.phone-top b { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.phone-search { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--muted); font-size: 11px; }
.phone-search svg { width: 15px; flex: 0 0 15px; fill: none; stroke: var(--forest-700); stroke-width: 1.8; stroke-linecap: round; }
.phone-chips { display: flex; gap: 6px; margin: 12px 0 14px; }
.phone-chips i { padding: 6px 11px; border: 1px solid var(--line); border-radius: 100px; color: var(--forest-700); background: white; font-size: 9px; font-style: normal; font-weight: 700; }
.phone-chips i.on { color: white; background: var(--forest-700); border-color: var(--forest-700); }
.phone-card { display: grid; grid-template-columns: 52px 1fr; gap: 11px; align-items: center; padding: 11px; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.phone-card > div { display: grid; gap: 2px; min-width: 0; }
.phone-card b { font-size: 12px; }
.phone-card small { color: var(--muted); font-size: 9px; }
.phone-card em { margin-top: 3px; color: var(--forest-700); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .3px; }
.phone-thumb { height: 52px; border-radius: 10px; }
.thumb-a { background: linear-gradient(150deg, #cfe3d6, #6f9b85); }
.thumb-b { background: linear-gradient(150deg, #e6d9c6, #b08f6c); }
.thumb-c { background: linear-gradient(150deg, #d5dfe6, #6f8797); }

/* === Sık sorulanlar ====================================================== */

.faq-section .section-heading > p a { color: var(--forest-700); text-decoration: underline; text-underline-offset: 3px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 26px 56px 26px 0; font-family: var(--serif); font-size: clamp(19px, 2vw, 24px); font-weight: 500; letter-spacing: -.4px; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--forest-700); }
.faq-list summary:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 4px; border-radius: 4px; }
/* Drawn from two spans of the same pseudo-element pair rather than a glyph, so
   the plus/minus lines up at any font size and needs no icon font. */
.faq-list summary::after, .faq-list summary::before { content: ""; position: absolute; right: 14px; top: 50%; width: 15px; height: 1.5px; background: var(--forest-700); transition: transform .25s; }
.faq-list summary::before { transform: translateY(-50%) rotate(90deg); }
.faq-list summary::after { transform: translateY(-50%); }
.faq-list details[open] summary::before { transform: translateY(-50%) rotate(0deg); }
.faq-list details p { max-width: 74ch; margin: 0 0 28px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.faq-list details p a { color: var(--forest-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* === Footer ============================================================== */

.footer-columns { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 56px; padding-top: 6px; }
.footer-columns nav { display: grid; gap: 11px; align-content: start; font-size: 13px; }
.footer-columns h2 { margin: 0 0 6px; color: white; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.footer-columns a { color: rgba(255,255,255,.72); }
.footer-columns a:hover { color: white; }

/* === /isletmeler ========================================================= */

/* No hero photograph here — see the comment in isletmeler/index.html. The
   gradient is the same forest ramp the dark sections already use. */
.biz-hero { position: relative; padding: 168px 0 104px; color: white; background: linear-gradient(155deg, var(--forest-900) 0%, var(--forest-950) 55%, #061c16 100%); overflow: hidden; }
.biz-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .92fr; gap: 72px; align-items: center; }
.biz-hero .hero-orb-one { right: -220px; top: -240px; bottom: auto; }
.biz-hero .hero-orb-two { right: -130px; top: -150px; bottom: auto; }
.biz-hero h1 { font-size: clamp(46px, 5.2vw, 74px); line-height: 1; letter-spacing: -2.2px; max-width: none; }
.biz-hero-copy > p { max-width: 490px; margin: 26px 0 0; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.75; }
.biz-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }
.line-button { padding: 15px 22px; color: white; border: 1px solid rgba(255,255,255,.32); border-radius: 10px; font-size: 13px; font-weight: 600; transition: background .2s, border-color .2s; }
.line-button:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.biz-hero-note { margin: 24px 0 0; color: var(--mint-300); font-size: 13px; font-weight: 600; }
.biz-hero .dashboard-wrap { padding: 0; }

.pricing-section { background: var(--cream); }
.pricing-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 40px; align-items: start; }
.price-example { padding: 34px 32px 30px; color: white; background: var(--forest-800); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.price-example-title { margin: 0 0 22px; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.82); font-size: 14px; }
.price-row b { flex: 0 0 auto; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-row-total { color: white; }
.price-row-payout { margin-top: 6px; padding: 17px 18px; color: var(--forest-950); background: var(--mint-500); border-radius: 14px; border-top: 0; font-weight: 600; }
.price-row-payout b { font-size: 22px; }
.price-example-note { margin: 20px 0 0; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.65; }
.price-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.price-points article { padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.price-points h3 { margin: 0 0 9px; font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -.3px; }
.price-points p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feature-card { padding: 28px 24px 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); transition: transform .35s, box-shadow .35s, border-color .35s; }
.feature-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow); }
.feature-card .trust-icon { width: 46px; height: 46px; margin-bottom: 20px; }
.feature-card .trust-icon svg { width: 23px; }
.feature-card h3 { margin: 0 0 9px; font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -.3px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }

.claim-card { position: relative; padding: 54px 56px 58px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--mint-100); overflow: hidden; }
.claim-card::after { content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -160px; border: 1px solid rgba(18,63,51,.1); border-radius: 50%; }
.claim-card > div { position: relative; z-index: 1; max-width: 660px; }
.claim-card h2 { font-size: clamp(38px, 4vw, 56px); line-height: 1; }
.claim-card > div > p { margin: 24px 0 32px; color: var(--muted); font-size: 15px; line-height: 1.8; }

.cta-section { padding-bottom: 0; }
.cta-card { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; padding: 58px 56px; color: white; background: var(--forest-800); border-radius: var(--radius-xl); }
.cta-card h2 { font-size: clamp(38px, 4vw, 56px); line-height: 1; }
.cta-card > div > p { margin: 22px 0 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.75; }
.cta-actions { justify-self: end; text-align: right; }
.cta-mail { margin: 18px 0 0; color: rgba(255,255,255,.72); font-size: 13px; }
.cta-mail a { color: white; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: 1fr; gap: 54px; }
  .app-copy { max-width: 640px; }
  .biz-hero { padding: 138px 0 84px; }
  .biz-hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .biz-hero-copy { max-width: 640px; }
  .biz-hero .dashboard-wrap { max-width: 680px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 26px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-card { grid-template-columns: 1fr; gap: 34px; padding: 46px 40px; }
  .cta-actions { justify-self: start; text-align: left; }
}

@media (max-width: 680px) {
  .trust-section { padding-top: 8px; }
  .trust-grid { grid-template-columns: 1fr; gap: 12px; }
  .trust-card { padding: 26px 24px 28px; }
  .trust-icon { margin-bottom: 20px; }
  /* Five badges is a crowd at 375px. The two added for the country-wide
     rewrite are the ones that go. */
  .city-badge-four, .city-badge-five { display: none; }
  .store-row { gap: 9px; }
  .store-tile { padding: 11px 16px 11px 14px; }
  .phone { width: min(292px, 100%); }
  .faq-list summary { padding: 22px 42px 22px 0; }
  .faq-list details p { margin-bottom: 22px; font-size: 14px; }
  .footer-columns { grid-template-columns: 1fr 1fr; gap: 32px; }

  .biz-hero { padding: 118px 0 68px; }
  .biz-hero h1 { font-size: 42px; letter-spacing: -1.4px; }
  .biz-hero-copy > p { font-size: 15px; }
  .biz-hero-actions { gap: 10px; }
  .biz-hero-actions .light-button, .line-button { width: 100%; justify-content: center; text-align: center; }
  .price-example { padding: 26px 22px 24px; border-radius: 22px; }
  .price-row { font-size: 13px; }
  .price-points { grid-template-columns: 1fr; gap: 12px; }
  .feature-grid { grid-template-columns: 1fr; gap: 12px; }
  .claim-card { padding: 34px 24px 38px; border-radius: 22px; }
  .cta-card { padding: 36px 24px 40px; border-radius: 22px; }
  .cta-actions .light-button { width: 100%; justify-content: space-between; }
}