/*
    ANA SAYFA STİLİ (29.10). Yön: teknik çizim. Kâğıt zemin, mürekkep
    yazı, ölçü çizgileri; tek vurgu kobalt (uygulamanın ana rengi),
    levha kontrplak tonunda. Başlık ve metin Plus Jakarta Sans (29.10),
    ölçüler eşit aralıklı rakam. Yalnız açık tema (kullanıcı 29.10:
    "koyu ve açık istemiyorum, tek renk, açık renk").
*/
:root {
    --kagit: #f5f6f8;
    --yuzey: #ffffff;
    --murekkep: #141b2b;
    --soluk: #56607a;
    --cizgi: #d9dee7;
    --kobalt: #2f5bea;
    --kobalt-acik: #e7edfd;
    --kobalt-yazi: #ffffff;
    --olcu: #2f5bea;
    --kontraplak: #e6cfa6;
    --kontraplak-damar: #d4b887;
    --koyu-zemin: #141b2b;
    --koyu-yazi: #e8ecf4;
    --koyu-soluk: #a4adc2;
    --koyu-kart: #1d263a;
    --koyu-rozet: #c9d5ff;
    --kapi: #c2410c;
    --kapak: #0f766e;
    --cad: #6d28d9;
    --golge: 0 12px 32px rgba(20, 27, 43, 0.10);
    --baslik: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --metin: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --rakam: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    background: var(--kagit);
    color: var(--murekkep);
    font-family: var(--metin);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--kobalt); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--baslik); line-height: 1.12; text-wrap: balance; margin: 0; }
.olcuYazi { font-family: var(--rakam); font-variant-numeric: tabular-nums; }

.kap {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- üst ---------- */
.ust {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, var(--kagit) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cizgi);
}
.ustIc { display: flex; align-items: center; gap: 24px; height: 64px; }
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--baslik); font-size: 18px; font-weight: 600; }
.marka b { font-weight: 800; }
.logo { width: 30px; height: 30px; color: var(--kobalt); }
.menu { display: flex; gap: 22px; margin-left: 12px; }
.menu a { text-decoration: none; color: var(--soluk); font-weight: 500; font-size: 15px; }
.menu a:hover { color: var(--murekkep); }
.ustSag { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.birincil, .ikincil {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 11px; padding: 10px 16px; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
    transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
}
.birincil { background: var(--kobalt); color: var(--kobalt-yazi); }
.birincil:hover { filter: brightness(1.08); }
.birincil:active { transform: scale(0.98); }
.ikincil { background: transparent; color: var(--murekkep); border: 1px solid var(--cizgi); }
.ikincil:hover { background: var(--yuzey); }
.buyuk { padding: 14px 22px; font-size: 16px; border-radius: 13px; }
.birincil svg { width: 20px; height: 20px; }

/* ---------- giriş ---------- */
.giris { padding-block: 72px 56px; }
.girisIc { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.3fr); gap: 44px; align-items: center; }
.etiketYazi { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kobalt); }
.giris h1 { font-size: clamp(36px, 5.2vw, 60px); font-weight: 800; letter-spacing: -0.02em; }
.giriAlt { margin: 20px 0 0; max-width: 34em; font-size: 18px; color: var(--soluk); }
.girisDugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.girisNot { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--soluk); font-size: 14px; }
.girisNot li::before { content: "✓"; color: var(--kobalt); font-weight: 700; margin-right: 7px; }


/* ---------- gerçek ekran görüntüleri (29.10, kullanıcı: "görseller gerçek uygulama görselleri olmalı") ---------- */
.ekran { position: relative; margin: 0; min-width: 0; border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); overflow: hidden; }
.ekran img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.pencereCubugu { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--cizgi); background: var(--kagit); }
.pencereCubugu i { width: 9px; height: 9px; border-radius: 50%; background: var(--cizgi); }
.pencereCubugu span { margin-left: 10px; padding: 2px 10px; border-radius: 6px; background: var(--yuzey); color: var(--soluk); font-family: var(--rakam); font-size: 11.5px; }
.giriEkrani { overflow: visible; transform-origin: 50% 100%; }
.giriEkrani img { border-radius: 0 0 14px 14px; }
.ncCipi { position: absolute; left: -22px; bottom: 26px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 12px; background: var(--murekkep); color: var(--kagit); box-shadow: 0 12px 30px rgba(20, 27, 43, 0.28); }
.ncCipi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ncCipi span { display: grid; gap: 2px; }
.ncCipi b { font-family: var(--rakam); font-size: 14px; }
.ncCipi small { color: color-mix(in srgb, var(--kagit) 72%, transparent); font-size: 12px; }

/* ---------- hareket: yalnız betik varken ve hareket azaltılmamışken ---------- */
.hareketli [data-gorun] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--sira, 0) * 90ms); }
.hareketli [data-gorun].gorundu { opacity: 1; transform: none; }
.hareketli .giriEkrani { transform: perspective(1400px) rotateX(10deg) translateY(30px); }
.hareketli .giriEkrani.gorundu { transform: perspective(1400px) rotateX(0deg); transition-duration: 1.1s; }
.hareketli .giriEkrani .ncCipi { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s ease 1s, transform .6s cubic-bezier(.2,.7,.2,1) 1s; }
.hareketli .giriEkrani.gorundu .ncCipi { opacity: 1; transform: none; animation: yuzer 5s ease-in-out 2s infinite; }
@keyframes yuzer { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.panel .ekran img { animation: resimGir 420ms ease; }
@keyframes resimGir { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel, .panel .ekran img { animation: none; } }
@media (max-width: 600px) { .ncCipi { left: 10px; bottom: 10px; padding: 8px 10px; } .ncCipi small { display: none; } }

/* ---------- bölümler ---------- */
.bolum { padding-block: 72px; }
.bolum h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.015em; }
.bolumAlt { margin: 12px 0 0; max-width: 40em; color: var(--soluk); font-size: 17px; }

.atolyeler { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.atolyeler article { padding: 22px; border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.atolyeler h3 { font-size: 19px; }
.atolyeler p { margin: 8px 0 0; color: var(--soluk); font-size: 15px; }
.atolyeler b { color: var(--murekkep); }

/* ---------- uygulama sekmeleri ---------- */
.sekmeler { margin-top: 28px; display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--cizgi); }
.sekmeler button {
    position: relative; border: 0; background: none; padding: 12px 18px 14px;
    font-family: var(--baslik); font-size: 18px; font-weight: 600; color: var(--soluk); cursor: pointer;
}
.sekmeler button::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 9px; background: var(--urun); opacity: .45; }
.sekmeler button::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--urun); transform: scaleX(0); transition: transform 180ms ease; }
.sekmeler button[aria-selected="true"] { color: var(--murekkep); }
.sekmeler button[aria-selected="true"]::before { opacity: 1; }
.sekmeler button[aria-selected="true"]::after { transform: scaleX(1); }
.sekmeler button:hover { color: var(--murekkep); }

.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center; padding-top: 36px; animation: panelGir 260ms ease; }
.panel[hidden] { display: none; }
@keyframes panelGir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }
.panelYazi h3 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.01em; }
.panelYazi > p { margin: 12px 0 0; color: var(--soluk); font-size: 17px; max-width: 34em; }
.maddeler { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 12px; }
.maddeler li { position: relative; padding-left: 22px; color: var(--soluk); }
.maddeler li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 2px; background: var(--urun); }
.maddeler b { color: var(--murekkep); font-weight: 600; }
.panel .birincil { background: var(--urun); }


.son { padding-block: 64px 88px; }
.sonIc { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sonIc p { margin: 0; color: var(--soluk); font-size: 17px; }
.sonIc .birincil { margin-top: 8px; }

.alt { border-top: 1px solid var(--cizgi); padding-block: 26px calc(26px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--soluk); }
.altIc { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.alt nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.alt a { text-decoration: none; }
.alt a:hover { color: var(--murekkep); text-decoration: underline; }
.altNot { margin-left: auto; }
.iletisim { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.iletisim dt { font-weight: 600; color: var(--murekkep); }
.iletisim dd { margin: 0 12px 0 0; }
.iletisim [hidden] { display: none; }
body { -webkit-user-select: none; user-select: none; }

/* ---------- dar ekran ---------- */
@media (max-width: 980px) {
    .menu { display: none; }
    .girisIc { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .atolyeler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
    .ustSag .ikincil { display: none; }
    .ustIc { gap: 12px; }
    .birincil { padding: 9px 13px; }
    .giris { padding-block: 40px 32px; }
    .bolum { padding-block: 52px; }
    .atolyeler { grid-template-columns: minmax(0, 1fr); }
    .sekmeler button { padding: 10px 12px 12px; font-size: 16px; }
    .altNot { margin-left: 0; }
}
.panelDugmeler { display: flex; flex-wrap: wrap; gap: 10px; }