:root {
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f4f4f5; --fg:#18181b; --muted:#52525b; --line:#e4e4e7; --line-strong:#d4d4d8;
  --accent:#047857; --accent-fg:#ffffff; --accent-soft:rgba(4,120,87,.08);
  --adhan:#0f766e; --kids:#c2410c; --planzi:#1258ff; --pawcurve:#b5432d;
  --term-bg:#0c0c10; --term-line:#26262d; --term-fg:#e4e4e7; --term-dim:#8b8b96; --term-ok:#6ee7b7; --term-warn:#fcd34d; --term-key:#93c5fd;
  --radius:18px; --maxw:1120px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0);
  --dur-1:150ms; --dur-2:260ms; --dur-3:560ms;
  --font:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --arabic:"Noto Naskh Arabic", "Space Grotesk", system-ui, sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#09090b; --surface:#111114; --surface-2:#18181c; --fg:#f4f4f5; --muted:#a1a1aa; --line:#232329; --line-strong:#34343d;
    --accent:#6ee7b7; --accent-fg:#052e1f; --accent-soft:rgba(110,231,183,.08);
    --adhan:#e7c982; --kids:#fdba74; --planzi:#7ea6ff; --pawcurve:#ffa88c;
  }
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body { margin:0; background:var(--bg); color:var(--fg); font:400 17px/1.6 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
html[lang="ar"] body { font-family:var(--arabic); line-height:1.85; }
img, svg { display:block; max-width:100%; }
a { color:inherit; }
p { margin:0; }
h1, h2, h3 { margin:0; font-weight:600; letter-spacing:-.025em; line-height:1.08; text-wrap:balance; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing:0; line-height:1.35; }
.mono { font-family:var(--mono); letter-spacing:0; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; }
@media (min-width:768px) { .wrap { padding:0 32px; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:absolute; left:16px; top:-60px; z-index:100; background:var(--fg); color:var(--bg); padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:500; }
.skip:focus { top:12px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
.ic { width:22px; height:22px; flex:none; }

/* ---- üst çubuk */
.nav { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line);
       -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); }
.nav .wrap { display:flex; align-items:center; gap:12px; min-height:64px; }
.logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:1.05rem; letter-spacing:-.02em; color:var(--fg); min-height:44px; }
.logo .mark { width:30px; height:30px; color:var(--fg); }
.logo span { color:var(--muted); font-family:var(--mono); font-weight:400; font-size:.9rem; }
.nav-links { display:none; gap:4px; margin-inline-start:auto; }
@media (min-width:760px) { .nav-links { display:flex; } }
.nav-links a { text-decoration:none; color:var(--muted); font-size:.95rem; padding:10px 12px; border-radius:10px; transition:color var(--dur-1), background var(--dur-1); }
.nav-links a:hover { color:var(--fg); background:var(--surface-2); }
.langs { display:flex; gap:4px; margin-inline-start:auto; }
@media (min-width:760px) { .nav-links + .langs { margin-inline-start:8px; } }
.langs a { font-family:var(--mono); font-size:.8rem; text-decoration:none; color:var(--muted); padding:0 10px; min-height:36px; min-width:40px;
           display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:999px; transition:all var(--dur-1); }
.langs a:hover { color:var(--fg); border-color:var(--line-strong); }
.langs a[aria-current="page"] { color:var(--fg); background:var(--surface-2); border-color:var(--line-strong); }

/* ---- düğmeler, rozetler */
.btn { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px; border-radius:12px; font:500 1rem var(--font);
       text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform var(--dur-1) var(--ease-out), background var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--fg); color:var(--bg); }
.btn-primary:hover { background:var(--accent); color:var(--accent-fg); }
.btn-ghost { border-color:var(--line-strong); color:var(--fg); background:transparent; }
.btn-ghost:hover { border-color:var(--fg); }
.btn .ic { width:18px; height:18px; transition:transform var(--dur-2) var(--ease-out); }
.btn:hover .ic { transform:translateX(3px); }
[dir="rtl"] .btn .ic { transform:scaleX(-1); }
[dir="rtl"] .btn:hover .ic { transform:scaleX(-1) translateX(3px); }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.pill { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.78rem; color:var(--muted); border:1px solid var(--line);
        border-radius:999px; padding:4px 12px; white-space:nowrap; }
.pill .dot { width:7px; height:7px; border-radius:50%; background:var(--app, var(--accent)); box-shadow:0 0 0 3px color-mix(in srgb, var(--app, var(--accent)) 22%, transparent); }
html[lang="ar"] .pill { font-family:var(--arabic); font-size:.85rem; }
.tags { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.tags li { font-family:var(--mono); font-size:.76rem; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:3px 9px; }

/* ---- kahraman alanı */
.hero { position:relative; padding:56px 0 64px; overflow:hidden; }
@media (min-width:960px) { .hero { padding:96px 0 104px; } }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, #000 20%, transparent 75%); }
.hero-grid { display:grid; gap:48px; align-items:center; }
@media (min-width:960px) { .hero-grid { grid-template-columns:1.05fr 1fr; gap:56px; } }
.eyebrow { font-family:var(--mono); font-size:.85rem; color:var(--accent); margin-bottom:20px; }
.hero h1 { font-size:clamp(2.5rem, 7vw, 4.4rem); }
.hero h1 em { font-style:normal; color:var(--muted); }
.lead { color:var(--muted); font-size:clamp(1.06rem, 2.2vw, 1.22rem); max-width:36em; margin:22px 0 32px; }
.stats { display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:56px; }
@media (min-width:640px) { .stats { grid-template-columns:repeat(4, 1fr); } }
.stats div { background:var(--bg); padding:18px 20px; }
.stats b { display:block; font-family:var(--mono); font-weight:500; font-size:1.6rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.stats span { color:var(--muted); font-size:.9rem; }

/* ---- terminal */
.term { background:var(--term-bg); color:var(--term-fg); border:1px solid var(--term-line); border-radius:var(--radius); overflow:hidden;
        box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 30px 80px -30px rgba(0,0,0,.55); font-family:var(--mono); font-size:.8rem; line-height:1.75; direction:ltr; text-align:left; }
@media (min-width:480px) { .term { font-size:.86rem; } }
.term-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--term-line); color:var(--term-dim); }
.term-bar i { width:11px; height:11px; border-radius:50%; background:#3f3f46; }
.term-bar span { margin-inline-start:10px; font-size:.78rem; }
.term-body { padding:18px 18px 22px; overflow-x:auto; white-space:pre; }
.term .p { color:var(--term-ok); } .term .d { color:var(--term-dim); } .term .ok { color:var(--term-ok); } .term .w { color:var(--term-warn); } .term .k { color:var(--term-key); }
.caret { display:inline-block; width:.6em; height:1.15em; vertical-align:-.2em; background:var(--term-fg); }
.js .term .ln { opacity:0; }
.js .term.run .ln { animation:ln-in 1ms steps(1) forwards; animation-delay:var(--d); }
@keyframes ln-in { to { opacity:1; } }
@media (prefers-reduced-motion: no-preference) { .caret { animation:blink 1.1s steps(1) infinite; } }
@keyframes blink { 50% { opacity:0; } }

/* ---- bölümler */
section.block { padding:72px 0; border-top:1px solid var(--line); }
@media (min-width:960px) { section.block { padding:104px 0; } }
.kicker { font-family:var(--mono); font-size:.82rem; color:var(--muted); margin-bottom:14px; }
.kicker b { color:var(--accent); font-weight:500; }
.block h2 { font-size:clamp(1.9rem, 4.6vw, 3rem); max-width:18em; }
.block .sub { color:var(--muted); margin-top:14px; max-width:40em; font-size:1.06rem; }
.block-head { margin-bottom:40px; }

/* ---- uygulama kartları */
.apps { display:grid; gap:20px; }
@media (min-width:900px) { .apps { grid-template-columns:1fr 1fr; } }
.appcard { --app:var(--accent); position:relative; display:flex; flex-direction:column; gap:18px; background:var(--surface); border:1px solid var(--line);
           border-radius:var(--radius); padding:28px; overflow:hidden; transition:border-color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.appcard::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg, transparent, var(--app), transparent); opacity:.7; }
.appcard:hover { border-color:color-mix(in srgb, var(--app) 55%, var(--line)); transform:translateY(-3px); box-shadow:0 22px 50px -30px color-mix(in srgb, var(--app) 60%, transparent); }
.app-flapjack { --app:#e8a64a; } .app-adhan { --app:var(--adhan); } .app-kids { --app:var(--kids); } .app-planzi { --app:var(--planzi); } .app-pawcurve { --app:var(--pawcurve); }
@media (min-width:1080px) { .apps.three { grid-template-columns:repeat(3, 1fr); } .apps.three .appcard { padding:24px; } }
.appcard .top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.app-icon { width:64px; height:64px; border-radius:15px; flex:none; }
.appcard h3 { font-size:1.6rem; }
.appcard .alt { color:var(--muted); font-family:var(--mono); font-size:.82rem; margin-top:4px; }
.appcard .desc { color:var(--muted); }
.links { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:auto; padding-top:6px; }
.links a { display:inline-flex; align-items:center; gap:6px; min-height:40px; text-decoration:none; color:var(--fg); font-weight:500; border-bottom:1px solid transparent; transition:color var(--dur-1); }
.links a:hover { color:var(--app); }
.links a .ic { width:16px; height:16px; }
[dir="rtl"] .links a .ic { transform:scaleX(-1); }

/* ---- ilke kartları */
.grid3 { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:640px) { .grid3 { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px) { .grid3 { grid-template-columns:repeat(3, 1fr); } }
.cell { background:var(--bg); padding:28px 26px 30px; transition:background var(--dur-2); }
.cell:hover { background:var(--surface); }
.cell .row { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; color:var(--app, var(--accent)); }
.cell .n { font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.cell h3 { font-size:1.2rem; letter-spacing:-.015em; margin-bottom:8px; }
.cell p { color:var(--muted); font-size:.98rem; }

.stack { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.stack li { font-family:var(--mono); font-size:.88rem; border:1px solid var(--line); border-radius:10px; padding:10px 14px; background:var(--surface);
            display:flex; align-items:center; gap:10px; }
.stack li small { color:var(--muted); font-size:.74rem; }

.cta { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:40px 28px; display:grid; gap:24px; align-items:center; }
@media (min-width:860px) { .cta { grid-template-columns:1.4fr auto; padding:56px; } }
.cta h2 { font-size:clamp(1.7rem, 4vw, 2.5rem); }
.cta p { color:var(--muted); margin-top:12px; }
.mail-box { display:flex; flex-direction:column; gap:12px; min-width:0; }
.mail-addr { font-family:var(--mono); font-size:clamp(1rem, 2.6vw, 1.25rem); overflow-wrap:anywhere; user-select:all; }
.mail-actions { display:flex; flex-wrap:wrap; gap:10px; }
.mail-actions .btn { min-height:48px; }
.mail-note { color:var(--muted); font-size:.9rem; min-height:1.4em; }
.contact-page .cta { margin-top:8px; grid-template-columns:1fr; max-width:760px; }
.contact-form { display:grid; gap:16px; max-width:760px; margin-top:28px; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:32px 28px; }
.contact-form h2 { font-size:1.5rem; }
.contact-form label { display:grid; gap:6px; font-weight:500; }
.contact-form input, .contact-form textarea { font:400 1rem var(--font); color:var(--fg); background:var(--bg); border:1px solid var(--line-strong);
  border-radius:12px; padding:12px 14px; min-height:48px; width:100%; }
.contact-form textarea { min-height:150px; resize:vertical; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.contact-form .small { color:var(--muted); font-size:.88rem; }
.contact-form .btn { justify-self:start; }
.mail-form-link { color:var(--muted); font-size:.92rem; }
.contact-page .cta p { max-width:60ch; }

/* ---- uygulama sayfası */
.app-hero { padding:48px 0 56px; }
@media (min-width:960px) { .app-hero { padding:80px 0 72px; } }
.app-hero .id { display:flex; align-items:center; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.app-hero .id img, .app-hero .id svg { width:72px; height:72px; border-radius:17px; }
.app-hero h1 { font-size:clamp(2.3rem, 6.4vw, 4rem); }
.app-hero .alt { color:var(--muted); font-family:var(--mono); font-size:.85rem; margin-top:6px; }
.shot-main { margin-top:48px; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#0b3b2e;
             box-shadow:0 40px 90px -40px rgba(0,0,0,.55); aspect-ratio:2560/1440; }
.shot-main img { width:100%; height:100%; object-fit:cover; }
.shots { display:grid; gap:18px; }
@media (min-width:760px) { .shots { grid-template-columns:1fr 1fr; } }
.shots figure { margin:0; }
.shots img { width:100%; height:auto; border-radius:16px; border:1px solid var(--line); aspect-ratio:2560/1440; object-fit:cover; }
.shots figcaption { color:var(--muted); font-size:.9rem; margin-top:10px; font-family:var(--mono); }
.spec { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0; }
@media (min-width:760px) { .spec { grid-template-columns:1fr 1fr; } }
.spec div { background:var(--bg); padding:18px 22px; }
.spec dt { font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-bottom:4px; }
.spec dd { margin:0; }
.note { color:var(--muted); font-size:.92rem; margin-top:28px; max-width:52em; }
.checks { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.checks li { display:flex; gap:12px; align-items:flex-start; }
.checks .ic { color:var(--app, var(--accent)); margin-top:2px; }
.two { display:grid; gap:20px; }
@media (min-width:860px) { .two { grid-template-columns:1fr 1fr; } }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.panel h3 { font-size:1.25rem; margin-bottom:18px; }

/* ---- Planzi telefon görünümü (örnek plan kartı) */
.pz-screen { border-radius:34px; background:#f5f8ff; color:#0f172a; padding:24px 16px 18px; font-family:var(--font); }
.pz-head { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:#475569; margin-bottom:12px; }
.pz-head b { font-size:1.15rem; color:#0f172a; }
.pz-chip { background:#e0e9ff; color:#1258ff; border-radius:999px; padding:3px 10px; font-weight:600; font-size:.72rem; }
.pz-card { background:#fff; border-radius:20px; padding:14px; box-shadow:0 10px 30px -18px rgba(18,88,255,.45); margin-bottom:10px; }
.pz-card h4 { margin:6px 0 2px; font-size:1.02rem; }
.pz-card small { color:#64748b; font-size:.76rem; display:block; }
.pz-tag { display:inline-block; font-size:.68rem; font-weight:600; color:#1258ff; background:#eef3ff; border-radius:6px; padding:2px 7px; }
.pz-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.pz-av { display:flex; }
.pz-av i { width:24px; height:24px; border-radius:50%; border:2px solid #fff; margin-inline-start:-7px; display:block; }
.pz-av i:first-child { margin-inline-start:0; }
.pz-go { background:#1258ff; color:#fff; border-radius:999px; padding:6px 14px; font-size:.76rem; font-weight:600; }
.pz-wait { color:#475569; font-size:.74rem; font-weight:600; }

/* ---- Family Daily Routine telefon görünümü */
.phone { width:min(330px, 100%); margin:0 auto; border-radius:44px; padding:12px; background:#0c0c10; border:1px solid var(--term-line);
         box-shadow:0 40px 90px -40px rgba(0,0,0,.6); }
.screen { border-radius:34px; background:#fff7ed; color:#1c1917; padding:26px 18px 20px; font-family:var(--font); }
.ph-top { display:flex; align-items:center; gap:10px; }
.ph-av { width:40px; height:40px; border-radius:50%; background:#fb923c; color:#fff; display:grid; place-items:center; font-weight:600; }
.ph-top b { display:block; font-size:1rem; line-height:1.2; }
.ph-top small { color:#78716c; font-size:.78rem; }
.ph-stars { margin-inline-start:auto; display:flex; align-items:center; gap:5px; background:#fef3c7; color:#92400e; border-radius:999px; padding:4px 10px; font-weight:600; font-size:.85rem; }
.ph-stars svg { width:15px; height:15px; fill:#f59e0b; stroke:#f59e0b; }
.ph-prog { height:10px; border-radius:99px; background:#fed7aa; margin:18px 0 6px; overflow:hidden; }
.ph-prog i { display:block; height:100%; width:60%; border-radius:inherit; background:linear-gradient(90deg, #fb923c, #e11d48); }
.ph-meta { font-size:.78rem; color:#78716c; display:flex; justify-content:space-between; }
.ph-part { margin:16px 0 8px; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#c2410c; display:flex; align-items:center; gap:6px; }
.ph-part svg { width:15px; height:15px; }
.ph-task { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #fed7aa; border-radius:16px; padding:11px 12px; margin-bottom:8px; font-size:.92rem; font-weight:500; }
.ph-task .tk { width:28px; height:28px; border-radius:9px; border:2px solid #fdba74; flex:none; display:grid; place-items:center; }
.ph-task.done { color:#78716c; }
.ph-task.done span { text-decoration:line-through; text-decoration-color:#d6d3d1; }
.ph-task.done .tk { background:#16a34a; border-color:#16a34a; }
.ph-task .tk svg { width:16px; height:16px; stroke:#fff; }
.ph-task small { margin-inline-start:auto; color:#a8a29e; font-size:.72rem; font-family:var(--mono); }
.ph-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.ph-btns span { border-radius:14px; padding:12px 8px; text-align:center; font-weight:600; font-size:.85rem; }
.ph-btns .a { background:#dcfce7; color:#166534; } .ph-btns .b { background:#ffe4e6; color:#9f1239; }
@media (prefers-reduced-motion: no-preference) {
  .js .phone.in .ph-task.done .tk { animation:pop 520ms var(--ease-out) both; animation-delay:calc(300ms + var(--i) * 180ms); }
  .js .phone.in .ph-prog i { animation:grow 1100ms var(--ease-out) both 200ms; }
}
@keyframes pop { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.15); opacity:1; } 100% { transform:scale(1); } }
@keyframes grow { from { width:0; } }

/* ---- gizlilik */
.prose { max-width:44em; }
.prose h2 { font-size:1.35rem; margin:36px 0 10px; letter-spacing:-.01em; }
.prose p { color:var(--muted); }
.prose .intro { font-size:1.1rem; color:var(--fg); }

/* ---- alt bilgi */
footer.foot { border-top:1px solid var(--line); padding:48px 0 56px; color:var(--muted); font-size:.93rem; }
.foot-grid { display:grid; gap:28px; }
@media (min-width:760px) { .foot-grid { grid-template-columns:1.4fr 1fr 1fr; } }
.foot h4 { margin:0 0 10px; font-family:var(--mono); font-weight:500; font-size:.78rem; color:var(--fg); }
.foot ul { list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.foot a { text-decoration:none; display:inline-flex; min-height:32px; align-items:center; transition:color var(--dur-1); }
.foot a:hover { color:var(--fg); }
.foot .legal { margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:.78rem; }

/* ---- kaydırınca beliren öğeler (yalnızca JS varsa ve hareket azaltılmamışsa) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity:0; transform:translateY(16px); transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay:calc(var(--i, 0) * 70ms); }
  .js .reveal.in { opacity:1; transform:none; }
}