/* halimozturk.com — family stylesheet v1.0.1 (2026-10-13)
   Extracted from the apex v1 page. Every app site carries a verbatim copy and sets its own face in
   <app>.css: --g1 / --g2 / --acc (stage colours), --aura1..3 (hero backlight), --sheen (headline).
   Do not edit a copy; edit design/family.css in halimozturk-website and re-sync. */
:root {
  --bg:#f3f4f8; --surface:#ffffff; --fg:#14161c; --muted:#5b6170; --line:#dcdfe8; --ink-btn:#14161c; --ink-btn-fg:#ffffff;
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:"Onest", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gut:clamp(16px,4vw,48px); --max:1240px;
  /* face defaults = the apex */
  --g1:#1a1240; --g2:#6a3fd0; --acc:#ffb81f; --sfg:#ffffff;
  --aura1:#6a3fd0; --aura2:#ffb81f; --aura3:#3271ff;
  --sheen:linear-gradient(90deg,#6a3fd0,#4a3fd6 25%,#ffb81f 50%,#c99a3f 70%,#3271ff);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0c0e13; --surface:#161920; --fg:#eef0f5; --muted:#a0a6b4; --line:#252933; color-scheme:dark } }
:root[data-theme="dark"] { --bg:#0c0e13; --surface:#161920; --fg:#eef0f5; --muted:#a0a6b4; --line:#252933; color-scheme:dark }
* { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body { background:var(--bg); color:var(--fg); font:400 16px/1.55 var(--body); margin:0; overflow-x:hidden }
a { color:inherit }
a:focus-visible, button:focus-visible, summary:focus-visible, .shots:focus-visible { outline:3px solid currentColor; outline-offset:3px; border-radius:10px }
img { max-width:100% }
.wrap { max-width:var(--max); margin:0 auto; padding-inline:var(--gut) }

/* top bar */
.topbar { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent) }
.topbar .wrap { display:flex; align-items:center; gap:18px; min-height:64px }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:700 18px/1 var(--display); letter-spacing:-.02em }
.brand img { width:32px; height:32px; border-radius:8px }
.topnav { display:flex; gap:4px 22px; margin:0 0 0 auto; padding:0; list-style:none; font-size:15px; font-weight:500 }
.topnav a { text-decoration:none; color:var(--muted) } .topnav a:hover { color:var(--fg) }
.topbar .btn.sm { margin-left:auto; min-height:40px; padding:6px 14px 6px 10px; font-size:15px; border-radius:12px; background:var(--ink-btn); color:var(--ink-btn-fg) }
.topbar .btn.sm svg { width:20px; height:20px }
@media (max-width:700px) { .topnav { display:none } }
.topnav + .btn.sm { margin-left:0 }

/* hero */
.hero { position:relative; padding-block:clamp(48px,9vw,112px) 0; isolation:isolate; overflow-x:clip } /* the aura bleeds 20% past each side; clip so iOS Safari cannot pan sideways */
.aura { position:absolute; inset:-10% -20% auto; height:120%; z-index:-1; pointer-events:none; filter:blur(70px); opacity:.55 }
.aura i { position:absolute; width:38vw; height:38vw; max-width:560px; max-height:560px; border-radius:50%; animation:drift 18s ease-in-out infinite alternate }
.aura i:nth-child(1) { background:var(--aura1); left:8%; top:30% }
.aura i:nth-child(2) { background:var(--aura2); left:38%; top:45%; animation-delay:-6s }
.aura i:nth-child(3) { background:var(--aura3); left:62%; top:28%; animation-delay:-12s }
@keyframes drift { to { transform:translate(6vw,-4vw) scale(1.15) } }
.eyebrow { font:600 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 18px }
.hero h1 { font:800 clamp(44px,9vw,120px)/.92 var(--display); letter-spacing:-.05em; margin:0; max-width:12ch; text-wrap:balance }
.hero h1 em, .sheen { font-style:normal; background:var(--sheen); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 8s linear infinite }
@keyframes sheen { to { background-position:-200% 0 } }
.hero .sub { font-size:clamp(17px,2vw,21px); color:var(--muted); max-width:46ch; margin:24px 0 0; text-wrap:pretty }
.hero .ctas { margin-top:30px }
.hero .btn { background:var(--ink-btn); color:var(--ink-btn-fg) }

.fan { position:relative; display:flex; justify-content:center; margin-top:clamp(40px,6vw,72px); height:clamp(380px,46vw,620px); perspective:1600px }
.fan-item { position:absolute; bottom:0; width:clamp(150px,19vw,256px); left:50%; border-radius:clamp(18px,2.4vw,30px); overflow:hidden;
  box-shadow:0 40px 80px -24px rgb(8 10 20 / .45), 0 0 0 1px rgb(255 255 255 / .08);
  transform:translateX(calc(-50% + var(--o) * clamp(92px,13.5vw,182px))) translateY(calc(var(--a) * 24px)) rotate(calc(var(--o) * 4.5deg));
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; z-index:calc(10 - var(--a) * 2);
  animation:rise .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--a) * 90ms) }
@keyframes rise { from { translate:0 60px; opacity:.001 } }
.fan-item img { display:block; width:100%; height:auto }
.fan-item:hover { transform:translateX(calc(-50% + var(--o) * clamp(92px,13.5vw,182px))) translateY(-20px) rotate(0deg) scale(1.06); z-index:20; box-shadow:0 50px 90px -20px rgb(8 10 20 / .55) }

.chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding-block:clamp(40px,7vw,96px) 0 }
.chip { display:flex; align-items:center; gap:10px; padding:6px 18px 6px 6px; border-radius:999px; background:var(--surface); border:1px solid var(--line); text-decoration:none; font-weight:500; font-size:15px; min-height:52px; transition:transform .2s, border-color .2s }
.chip img { border-radius:11px; width:40px; height:40px }
.chip.dot { padding-left:18px } .chip.dot::before { content:""; width:10px; height:10px; border-radius:3px; background:var(--g2); transform:rotate(45deg); margin-right:2px }
.chip:hover { border-color:var(--fg); transform:translateY(-2px) }
footer .fam .chip.self { color:var(--fg); border-color:var(--fg); cursor:default }
footer .fam .chip.self:hover { transform:none }

/* section heads + card grid */
.section { padding-block:clamp(48px,7vw,96px) 0 }
.section > .wrap > h2, .section-head h2 { font:800 clamp(30px,4.4vw,56px)/1 var(--display); letter-spacing:-.04em; margin:0; max-width:18ch; text-wrap:balance }
.section-head p { font-size:clamp(16px,1.6vw,19px); color:var(--muted); max-width:52ch; margin:16px 0 0; text-wrap:pretty }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:14px; margin-top:clamp(24px,3vw,40px); padding:0; list-style:none }
.card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; min-width:0; display:grid; gap:8px; align-content:start }
.card .ico { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--g2) 14%, var(--surface)); color:var(--g2); margin-bottom:6px }
.card .ico svg { width:22px; height:22px }
.card h3 { font:700 19px/1.15 var(--display); letter-spacing:-.02em; margin:0 }
.card p { margin:0; color:var(--muted); font-size:15px; line-height:1.55 }

/* stages (one per feature, in the app's own colours) */
.apps { display:grid; gap:clamp(20px,3vw,36px); padding-block:clamp(40px,6vw,80px) 0; padding-inline:clamp(8px,2vw,24px) }
.app { scroll-margin-top:80px }
.stage { position:relative; overflow:hidden; isolation:isolate; max-width:1440px; margin:0 auto; border-radius:clamp(28px,4vw,48px); color:var(--sfg);
  background:radial-gradient(120% 90% at 85% 10%, var(--g2), var(--g1) 70%);
  padding:clamp(28px,5vw,72px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,64px); align-items:center }
.app:nth-child(even) .stage { grid-template-columns:minmax(0,7fr) minmax(0,5fr); background:radial-gradient(120% 90% at 15% 10%, var(--g2), var(--g1) 70%) }
.app:nth-child(even) .app-copy { order:2 }
.water { position:absolute; z-index:-1; right:-2%; bottom:-.18em; font:800 clamp(110px,19vw,300px)/1 var(--display); letter-spacing:-.06em; white-space:nowrap; color:var(--sfg); opacity:.07; pointer-events:none }
.app:nth-child(even) .water { right:auto; left:-2% }
.app-copy { min-width:0 }
.app-id { display:flex; align-items:center; gap:16px }
.app-icon { width:80px; height:80px; border-radius:19px; box-shadow:0 0 0 1px rgb(255 255 255 / .15), 0 16px 40px -10px var(--acc) }
.app h2 { font:700 clamp(24px,2.4vw,30px)/1.05 var(--display); letter-spacing:-.02em; margin:0 }
.cat { margin:6px 0 0; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; opacity:.7 }
.headline { font:800 clamp(34px,4.6vw,62px)/.98 var(--display); letter-spacing:-.04em; margin:0; text-wrap:balance }
.app-id + .headline { margin-top:28px }
.line { font-size:clamp(17px,1.6vw,19px); line-height:1.5; margin:18px 0 0; max-width:38ch; opacity:.85; text-wrap:pretty }
.tiles { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:10px }
.tiles li { padding:12px 16px 12px 42px; position:relative; border-radius:14px; background:color-mix(in srgb, var(--sfg) 8%, transparent); border:1px solid color-mix(in srgb, var(--sfg) 12%, transparent); font-weight:500; font-size:15px }
.tiles li::before { content:""; position:absolute; left:16px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:4px; background:var(--acc); transform:rotate(45deg) }
.meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:22px }
.devices { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px }
.devices li { display:flex; align-items:center; gap:6px; padding:6px 12px 6px 9px; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 25%, transparent); font-size:14px; font-weight:500 }
.devices svg { width:18px; height:18px }
.ctas { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:26px }
.btn { display:inline-flex; align-items:center; gap:10px; background:var(--sfg); color:var(--g1); text-decoration:none; padding:10px 22px 10px 16px; border-radius:16px; min-height:58px; font:600 19px/1.05 var(--body); transition:transform .2s, box-shadow .2s; border:0; cursor:pointer }
.btn svg { width:26px; height:26px }
.btn small { display:block; font-size:11px; font-weight:500; opacity:.75 }
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px rgb(0 0 0 / .5) }
.link { font-weight:500; text-decoration:none; border-bottom:1.5px solid currentColor; padding-block:6px 2px; opacity:.9 }

.shots { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:clamp(10px,1.4vw,18px); min-width:0; perspective:1400px }
.shots img { width:100%; height:auto; border-radius:clamp(14px,1.6vw,24px); box-shadow:0 30px 60px -20px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .1);
  transform:translateY(calc(var(--j) * 14px - 21px)) rotateY(-10deg); transition:transform .5s cubic-bezier(.2,.8,.2,1) }
.app:nth-child(even) .shots img { transform:translateY(calc(var(--j) * -14px + 21px)) rotateY(10deg) }
.stage:hover .shots img { transform:translateY(0) rotateY(0) }
.shots img:hover { transform:translateY(-12px) scale(1.04) !important; z-index:2 }
.shots.one { grid-auto-columns:minmax(0,1fr); justify-items:center }
.shots.one img { max-width:min(100%,340px) }
@supports (animation-timeline: view()) {
  .shots img { animation:enter linear both; animation-timeline:view(); animation-range:entry 0% entry 70% }
  @keyframes enter { from { opacity:.25; translate:0 80px } }
}

/* FAQ */
.faq { display:grid; gap:10px; margin-top:clamp(24px,3vw,40px); max-width:820px }
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:0 20px }
.faq summary { cursor:pointer; list-style:none; font:600 17px/1.3 var(--body); padding:18px 32px 18px 0; position:relative }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:""; position:absolute; right:4px; top:50%; width:10px; height:10px; margin-top:-7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s }
.faq details[open] summary::after { transform:rotate(225deg); margin-top:-2px }
.faq details p { margin:0 0 18px; color:var(--muted); line-height:1.6; max-width:68ch }

/* family footer */
footer { margin-top:clamp(56px,8vw,112px); padding-block:40px 56px; border-top:1px solid var(--line); color:var(--muted); font-size:14px }
footer .wrap { display:grid; gap:28px }
footer .fam { display:flex; flex-wrap:wrap; align-items:center; gap:10px }
footer .fam > span { flex:1 1 100%; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600 }
footer .fam .chip { min-height:44px; font-size:14px; padding:4px 14px 4px 4px } footer .fam .chip img { width:32px; height:32px; border-radius:8px }
footer .legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px }
footer ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 20px }
footer a { text-decoration:none } footer a:hover { color:var(--fg) }

/* legal pages */
.legal-page { max-width:760px; padding-block:clamp(40px,6vw,80px) 0 }
.legal-page h1 { font:800 clamp(34px,5vw,52px)/1 var(--display); letter-spacing:-.04em; margin:0 0 8px }
.legal-page .legal-date { color:var(--muted); font-size:14px; margin:0 0 40px }
.legal-page h2 { font:700 clamp(20px,2.4vw,24px)/1.2 var(--display); letter-spacing:-.02em; margin:40px 0 12px }
.legal-page p, .legal-page li { color:var(--muted); line-height:1.75; margin:0 0 12px; font-size:15px }
.legal-page ul { padding-left:20px; margin:0 0 16px }
.legal-page a { color:var(--fg) }

/* iPad portrait and below */
@media (max-width: 960px) {
  .stage, .app:nth-child(even) .stage { grid-template-columns:minmax(0,1fr) }
  .app:nth-child(even) .app-copy { order:0 }
  .shots { grid-auto-columns:clamp(150px,36vw,230px); overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(clamp(28px,5vw,72px) * -1); padding:10px clamp(28px,5vw,72px) 30px; scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .shots::-webkit-scrollbar { display:none }
  .shots img, .app:nth-child(even) .shots img { scroll-snap-align:center; transform:none }
  .shots.one { grid-auto-columns:minmax(0,1fr); overflow:visible; margin-inline:0; padding:0 }
  .line { max-width:none }
  .water { font-size:clamp(90px,26vw,200px) }
}
@media (max-width: 600px) {
  .fan { height:auto; justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(var(--gut) * -1); padding:6px var(--gut) 28px; scrollbar-width:none; perspective:none }
  .fan::-webkit-scrollbar { display:none }
  .fan-item, .fan-item:hover { position:relative; left:auto; transform:none; flex:0 0 46vw; scroll-snap-align:center; z-index:auto }
  .chips { justify-content:flex-start; padding-top:8px }
  .btn { flex:1 1 100%; justify-content:center }
  .topbar .btn.sm { flex:0 0 auto }
  .apps { padding-inline:8px }
  .stage { padding:28px 20px }
  .shots { margin-inline:-20px; padding-inline:20px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation:none !important; transition:none !important; scroll-behavior:auto !important }
}