/* KraftX — Apple tasarım dili (K015). Tek stil dosyası. */
:root {
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --line: #d2d2d7;
  --link: #0066cc;
  --blue: #0071e3;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --docs: #0071e3;
  --health: #34c759;
  --ai: #5e5ce6;
  --orange: #ff9f0a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.w { max-width: 1024px; margin: 0 auto; padding: 0 22px; }
.w-wide { max-width: 1440px; margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }

/* ---------- Global nav (apple.com) ---------- */
.gn { position: sticky; top: 0; z-index: 50; height: 48px; background: rgba(251,251,253,.8);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.08); }
.gn .w { height: 48px; display: flex; align-items: center; justify-content: space-between; max-width: 1024px; }
.gn .logo img { height: 19px; display: block; }
.gn ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 34px; }
.gn ul a { color: rgba(0,0,0,.8); font-size: 12px; letter-spacing: -0.01em; }
.gn ul a:hover { color: #000; text-decoration: none; }
.gn ul li.on a { color: #000; font-weight: 600; }
.gn-btn { display: none; background: none; border: 0; width: 44px; height: 44px; margin-right: -12px; cursor: pointer; position: relative; }
.gn-btn span { position: absolute; left: 14px; right: 14px; height: 1.2px; background: #1d1d1f; transition: transform .25s; }
.gn-btn span:first-child { top: 18px; } .gn-btn span:last-child { top: 25px; }
@media (max-width: 833px) {
  .gn ul { display: none; }
  .gn-btn { display: block; }
  .menu-open { overflow: hidden; }
  .menu-open .gn { background: #fff; }
  .menu-open .gn ul { display: flex; flex-direction: column; gap: 0; position: fixed; inset: 48px 0 0 0; background: #fff; padding: 20px 46px; }
  .menu-open .gn ul a { font-size: 28px; font-weight: 600; line-height: 2.1; color: #1d1d1f; }
  .menu-open .gn-btn span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-open .gn-btn span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

/* ---------- Tipografi ---------- */
.eyebrow { font-size: 21px; font-weight: 600; letter-spacing: .011em; margin: 0 0 6px; }
.hero-h { font-size: clamp(48px, 8vw, 96px); line-height: 1.05; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.05; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.h3 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: 0; margin: 0; }
.sub { font-size: clamp(19px, 2.2vw, 28px); line-height: 1.14; font-weight: 400; letter-spacing: .007em; margin: 10px 0 0; }
.body-lg { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.38; color: var(--text-2); letter-spacing: .011em; font-weight: 400; }
.body-lg b { color: var(--text); font-weight: 600; }
.muted { color: var(--text-2); }
.grad { background: linear-gradient(90deg, #0071e3, #5e5ce6 50%, #bf5af2); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Linkler ve butonlar */
.ctas { display: flex; gap: 32px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 22px; font-size: 19px; }
.ctas.left { justify-content: flex-start; }
.btn { display: inline-block; background: var(--blue); color: #fff; border-radius: 980px; padding: 11px 22px; font-size: 17px; font-weight: 400; letter-spacing: -0.022em; }
.btn:hover { background: #0077ed; text-decoration: none; }
.btn.dark { background: #1d1d1f; } .btn.dark:hover { background: #000; }
.btn.white { background: #fff; color: #1d1d1f; } .btn.white:hover { background: #f5f5f7; }
.more::after { content: " ›"; }
.more { font-size: 19px; }

/* ---------- Bölümler ---------- */
.sec { padding: clamp(80px, 11vw, 140px) 0; }
.sec.tight { padding: clamp(48px, 6vw, 80px) 0; }
.bg2 { background: var(--bg-2); }
.dark { background: #000; color: #f5f5f7; }
.dark .muted, .dark .body-lg { color: #86868b; }
.dark .body-lg b { color: #f5f5f7; }
.dark a { color: #2997ff; }
.head { max-width: 820px; margin: 0 auto; text-align: center; }
.head .body-lg { margin: 22px auto 0; max-width: 700px; }

/* Hero */
.hero { padding: clamp(56px, 8vw, 92px) 0 0; text-align: center; overflow: hidden; }
.hero .sub { color: var(--text); }
.stage { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 3vw, 40px); margin-top: clamp(48px, 6vw, 80px); padding-bottom: 0; }
.stage .phone:nth-child(1), .stage .phone:nth-child(3) { transform: translateY(46px) scale(.92); }
.stage-fade { height: 120px; margin-top: -120px; position: relative; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }

/* ---------- Bento tiles (apple.com ana sayfa) ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; max-width: 1440px; margin: 0 auto; }
.tile { position: relative; background: var(--bg-2); border-radius: 0; min-height: 580px; overflow: hidden; text-align: center; padding: 52px 24px 0; display: flex; flex-direction: column; align-items: center; color: var(--text); }
.tile.full { grid-column: 1 / -1; min-height: 640px; }
.tile.black { background: #000; color: #f5f5f7; }
.tile.black .muted { color: #86868b; }
.tile.black a { color: #2997ff; }
.tile.white { background: #fff; }
.tile .h3 + .tsub, .tile .h2 + .tsub { margin-top: 6px; }
.tsub { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.17; font-weight: 400; letter-spacing: .009em; margin: 0; }
.tile .ctas { margin-top: 14px; font-size: 17px; gap: 22px; }
.tile .ctas .btn { font-size: 15px; padding: 8px 17px; }
.tile .art { margin-top: auto; padding-top: 34px; display: flex; justify-content: center; align-items: flex-end; gap: 18px; width: 100%; }
.tile .art .phone { margin-bottom: -150px; }
@media (max-width: 833px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 520px; } }

/* Özellik ızgarası */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.feat { background: #fff; border-radius: 28px; padding: 34px 30px 36px; }
.bg2 .feat { background: #fff; }
.sec:not(.bg2) .feat { background: var(--bg-2); }
.dark .feat { background: #1d1d1f; }
.feat .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; }
.feat .ic svg { width: 28px; height: 28px; }
.feat h3 { font-size: 24px; font-weight: 600; letter-spacing: .009em; margin: 0 0 8px; line-height: 1.17; }
.feat p { margin: 0; color: var(--text-2); font-size: 17px; line-height: 1.47; }
.dark .feat p { color: #86868b; }
@media (max-width: 833px) { .feats { grid-template-columns: 1fr; } }

/* Büyük kart (iki sütun) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
.card { border-radius: 28px; background: var(--bg-2); padding: 44px 40px 0; overflow: hidden; display: flex; flex-direction: column; min-height: 520px; }
.card.black { background: #000; color: #f5f5f7; }
.card.black .muted { color: #86868b; }
.card .ctas { justify-content: flex-start; font-size: 17px; margin-top: 18px; }
.card .art { margin-top: auto; display: flex; justify-content: center; padding-top: 30px; }
.card .art .phone { margin-bottom: -120px; }
@media (max-width: 833px) { .duo { grid-template-columns: 1fr; } }

/* Büyük ifade */
.statement { font-size: clamp(32px, 4.8vw, 64px); line-height: 1.08; font-weight: 600; letter-spacing: -0.003em; max-width: 980px; margin: 0 auto; }
.statement .m { color: var(--text-3); }
.dark .statement .m { color: #6e6e73; }

/* Numaralı adımlar */
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; }
.steps4 > div { border-top: 1px solid var(--line); padding-top: 22px; }
.dark .steps4 > div { border-color: #424245; }
.steps4 .n { font-size: 14px; color: var(--text-3); }
.steps4 h3 { font-size: 28px; font-weight: 600; margin: 14px 0 8px; letter-spacing: .007em; }
.steps4 p { margin: 0; color: var(--text-2); font-size: 17px; }
.dark .steps4 p { color: #86868b; }
@media (max-width: 833px) { .steps4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps4 { grid-template-columns: 1fr; } }

/* Liste satırları (kariyer) */
.rows { margin-top: 48px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 18px; align-items: center; padding: 24px 4px; border-bottom: 1px solid var(--line); }
.row h3 { margin: 0; font-size: 21px; font-weight: 600; }
.row span { color: var(--text-2); }
.pill { font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border-radius: 980px; padding: 5px 12px; white-space: nowrap; }
@media (max-width: 700px) { .row { grid-template-columns: 1fr; gap: 6px; } .pill { justify-self: start; } }

/* Haber kartları */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.ncard { display: block; border-radius: 22px; overflow: hidden; background: #fff; color: var(--text); box-shadow: 2px 4px 12px rgba(0,0,0,.08); transition: transform .3s, box-shadow .3s; }
.ncard:hover { text-decoration: none; transform: scale(1.015); box-shadow: 2px 4px 20px rgba(0,0,0,.12); }
.ncard .nv { aspect-ratio: 16/10; display: grid; place-items: center; }
.ncard .nb { padding: 20px 24px 26px; }
.ncard .k { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.ncard h3 { font-size: 21px; font-weight: 600; margin: 8px 0 0; line-height: 1.19; }
@media (max-width: 833px) { .news { grid-template-columns: 1fr; } }

/* Makale ve yasal metin */
.article { max-width: 692px; margin: 0 auto; }
.article p, .article li { font-size: 19px; line-height: 1.58; letter-spacing: .012em; }
.article h2 { font-size: 32px; font-weight: 600; margin: 56px 0 12px; }
.doc { max-width: 760px; margin: 0 auto; padding: 72px 22px 100px; }
.doc h1 { font-size: clamp(36px, 5vw, 48px); font-weight: 600; margin: 0 0 6px; }
.doc .meta { color: var(--text-2); margin: 0 0 40px; }
.doc h2 { font-size: 24px; font-weight: 600; margin: 44px 0 10px; }
.doc h3 { font-size: 19px; font-weight: 600; margin: 28px 0 6px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 14px 0; }
.doc th, .doc td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc .box { background: var(--bg-2); border-radius: 18px; padding: 20px 22px; margin: 22px 0; }

/* İletişim */
.contact3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.contact3 a { display: block; background: var(--bg-2); border-radius: 28px; padding: 34px 30px; color: var(--text); }
.contact3 a:hover { text-decoration: none; background: #ebebef; }
.contact3 h3 { margin: 0 0 6px; font-size: 24px; font-weight: 600; }
.contact3 p { margin: 0 0 18px; color: var(--text-2); }
.contact3 .em { color: var(--link); }
@media (max-width: 833px) { .contact3 { grid-template-columns: 1fr; } }

/* ---------- Telefon maketi ---------- */
.phone { --pw: 280px; width: var(--pw); aspect-ratio: 9 / 19.3; flex: none; border-radius: calc(var(--pw) * .17); background: #1d1d1f; padding: calc(var(--pw) * .035);
  box-shadow: 0 0 0 2px #3a3a3c inset, 0 30px 60px -20px rgba(0,0,0,.35); position: relative; }
.phone.sm { --pw: 230px; }
.phone .scr { position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw) * .14); background: #fff; overflow: hidden; font-size: calc(var(--pw) * .046); letter-spacing: -0.01em; color: #1d1d1f; text-align: left; line-height: 1.3; }
.phone .scr::before { content: ""; position: absolute; top: calc(var(--pw) * .03); left: 50%; transform: translateX(-50%); width: 32%; height: calc(var(--pw) * .085); background: #000; border-radius: 99px; z-index: 5; }
.scr .sb { height: calc(var(--pw) * .15); display: flex; justify-content: space-between; align-items: center; padding: 0 9% ; font-size: .82em; font-weight: 600; }
.scr .pad { padding: 0 6%; }
.scr .t1 { font-size: 1.75em; font-weight: 700; letter-spacing: -0.02em; margin: .2em 0 .5em; }
.scr .lbl { font-size: .78em; color: #86868b; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin: 1em 0 .5em; }
.scr .srch { background: #eeeef0; border-radius: .7em; padding: .55em .8em; color: #8e8e93; font-size: .9em; }
.scr .lst { display: flex; flex-direction: column; gap: .55em; }
.scr .it { display: flex; gap: .7em; align-items: center; background: #f5f5f7; border-radius: .9em; padding: .6em; }
.scr .th { width: 2.4em; height: 3em; border-radius: .35em; background: #fff; box-shadow: 0 0 0 1px #e5e5ea inset; position: relative; flex: none; }
.scr .th::after { content: ""; position: absolute; left: .4em; right: .4em; top: .55em; height: .25em; background: #d1d1d6; border-radius: 9px; box-shadow: 0 .45em 0 #e5e5ea, 0 .9em 0 #e5e5ea; }
.scr .it b { display: block; font-size: .95em; font-weight: 600; }
.scr .it small { color: #86868b; font-size: .78em; }
.scr .fab { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); background: var(--docs); color: #fff; border-radius: 99px; padding: .7em 1.4em; font-weight: 600; font-size: .95em; box-shadow: 0 6px 16px rgba(0,113,227,.35); white-space: nowrap; }
.scr .sheet { position: absolute; left: 4%; right: 4%; bottom: 4%; background: #fff; border-radius: 1.2em; padding: 1em; box-shadow: 0 -2px 30px rgba(0,0,0,.12); }
.scr .ai-chip { display: inline-flex; align-items: center; gap: .35em; font-size: .78em; font-weight: 600; color: var(--ai); background: #efeffd; border-radius: 99px; padding: .3em .7em; }
.scr .line { height: .45em; border-radius: 9px; background: #e5e5ea; margin: .45em 0; }
.scr .ring { width: 58%; aspect-ratio: 1; margin: .4em auto .6em; border-radius: 50%; background: conic-gradient(var(--health) 0 68%, #e8f8ec 68% 100%); display: grid; place-items: center; }
.scr .ring > div { width: 78%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; }
.scr .ring b { font-size: 1.7em; letter-spacing: -0.03em; display: block; line-height: 1; }
.scr .ring small { color: #86868b; font-size: .75em; }
.scr .macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.scr .macros div { background: #f5f5f7; border-radius: .7em; padding: .5em; font-size: .78em; }
.scr .macros i { display: block; height: .3em; border-radius: 9px; margin-top: .35em; }
.scr .meal { display: flex; gap: .7em; align-items: center; background: #f5f5f7; border-radius: .9em; padding: .55em; margin-top: .55em; }
.scr .meal .ph { width: 2.6em; height: 2.6em; border-radius: .6em; background: radial-gradient(circle at 35% 35%, #ffd60a 0 18%, transparent 19%), radial-gradient(circle at 65% 40%, #34c759 0 20%, transparent 21%), radial-gradient(circle at 45% 70%, #ff6b4a 0 18%, transparent 19%), #f2e6d0; flex: none; }
.scr .meal b { display: block; font-size: .92em; }
.scr .meal small { color: #86868b; font-size: .76em; }
.scr .cam { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--health); box-shadow: 0 6px 16px rgba(52,199,89,.4); display: grid; place-items: center; }
.scr .cam::after { content: ""; width: 1.2em; height: 1.2em; border-radius: 50%; border: .22em solid #fff; }
.scr .chips { display: flex; gap: .4em; flex-wrap: wrap; margin-bottom: .7em; }
.scr .chips span { font-size: .75em; font-weight: 600; border-radius: 99px; padding: .3em .7em; background: #f2f2f7; color: #3a3a3c; }
.scr .chips span.on { background: #1d1d1f; color: #fff; }
.scr .msg { max-width: 82%; border-radius: 1.1em; padding: .6em .85em; font-size: .9em; margin: .45em 0; }
.scr .msg.me { margin-left: auto; background: var(--ai); color: #fff; border-bottom-right-radius: .35em; }
.scr .msg.bot { background: #f2f2f7; border-bottom-left-radius: .35em; }
.scr .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; margin-top: .5em; }
.scr .cmp div { background: #f5f5f7; border-radius: .8em; padding: .55em; font-size: .74em; }
.scr .cmp div b { display: block; font-size: 1.05em; margin-bottom: .2em; }
.scr .input { position: absolute; left: 5%; right: 5%; bottom: 5%; border-radius: 99px; background: #f2f2f7; padding: .7em 1em; color: #8e8e93; font-size: .88em; }
.scr .input::after { content: ""; position: absolute; right: .45em; top: 50%; transform: translateY(-50%); width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--ai); }
.scr.dk { background: #000; color: #f5f5f7; }
@media (max-width: 833px) {
  .stage .phone:nth-child(1), .stage .phone:nth-child(3) { display: none; }
  .phone { --pw: 240px; }
}

/* App ikonları */
.appicon { width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.appicon svg { width: 40px; height: 40px; }
.ic-docs { background: linear-gradient(160deg, #3a9bff, #0060d1); }
.ic-health { background: linear-gradient(160deg, #5ee07f, #1fa346); }
.ic-ai { background: linear-gradient(160deg, #8a88ff, #4b48d6); }
.ic-k { background: #000; }

/* ---------- Footer (apple.com) ---------- */
.gf { background: var(--bg-2); color: var(--text-2); font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; padding: 20px 0 22px; }
.gf .w { max-width: 1024px; }
.gf .note { padding-bottom: 17px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.gf .cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 20px 0 6px; }
.gf h4 { color: var(--text); font-size: 12px; font-weight: 600; margin: 0 0 9px; }
.gf .cols a { display: block; color: var(--text-2); margin: 0 0 8px; }
.gf .cols a:hover { color: var(--text); }
.gf .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 16px; }
.gf .legal a { color: var(--text-2); margin-left: 14px; }
@media (max-width: 833px) { .gf .cols { grid-template-columns: 1fr 1fr; } .gf .legal a { margin: 0 14px 0 0; } }

/* Kaydırınca belirme */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(32px); transition: opacity 1s cubic-bezier(.28,.11,.32,1), transform 1s cubic-bezier(.28,.11,.32,1); }
  .rv.on { opacity: 1; transform: none; }
  .hero .rv { transition-duration: 1.2s; }
}

/* Düzeltmeler: koyu zeminlerde buton ve kart renkleri */
a.btn, .dark a.btn, .tile.black a.btn, .card.black a.btn { color: #fff; }
a.btn.white { color: #1d1d1f; }
.sec.dark .feat { background: #1d1d1f; }
.sec.dark .feat h3 { color: #f5f5f7; }
.sec.dark .feat p { color: #86868b; }