/* ============================================================ OSNote tanıtım sitesi ------------------------------------------------------------ Sayfanın dili 217 Products'tan: kâğıt beyazı, mürekkep siyahı, tek vurgu mühür kırmızısı; başlıklar Shippori Mincho, metin Manrope. Cihazların içi Android: Roboto, Material simgeleri. Üstlerindeki OSNote çubuğu uygulamanın kodundaki ölçülerle çizilir (PremiumToolbar.kt): #1A1A1E %70 zemin, %15 beyaz kenar, seçili araçta kehribar halka. Cihazın içi tasarım pikseliyle yazılır (telefon ekranı 360×780, tablet 1000×625) ve bütünüyle --k oranında küçültülür. ============================================================ */ @font-face { font-family: "Shippori Mincho"; src: url("../fonts/shippori-500.woff2?v=b5809f73") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Shippori Mincho"; src: url("../fonts/shippori-700.woff2?v=3ecf6220") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "Shippori Mincho"; src: url("../fonts/shippori-800.woff2?v=ada4e346") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2?v=78276c57") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("../fonts/roboto-400.woff2?v=9ef3d2aa") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Belge"; src: url("../fonts/belge-500.woff2?v=0f059f1d") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Belge"; src: url("../fonts/belge-600.woff2?v=01388cf0") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("../fonts/roboto-500.woff2?v=f1d41ec1") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; } :root { color-scheme: only light; --kagit: #FFFFFF; --sayfa: #F0F0F3; --masa: #E8E8EC; --murekkep: #111111; --murekkep-2: #505057; --murekkep-3: #6E6E76; --cizgi: rgba(17, 17, 17, 0.12); --cizgi-koyu: rgba(17, 17, 17, 0.24); --kirmizi: #E0402A; --kirmizi-koyu: #BF3218; /* beyaz yazının altında 5.34:1 */ --kirmizi-yazi: #A82C15; /* kâğıtta küçük kırmızı yazı 6.9:1 */ --kara: #121214; --uygulama: #1F1C21; --uygulama-2: #2A262D; --kehribar: #FFC107; --serif: "Shippori Mincho", Georgia, "Times New Roman", serif; --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --android: "Roboto", system-ui, "Segoe UI", Arial, sans-serif; --belge: "Belge", Georgia, "Times New Roman", serif; --kenar: clamp(20px, 3.4vw, 56px); --en: 1400px; /* sayfanın tek içerik genişliği: üst bilgi, giriş, bölümler aynı kenarda */ --noktalar: url("data:image/svg+xml,"); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--sayfa); scroll-behavior: smooth; } html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } body { margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--murekkep); background: var(--sayfa); -webkit-font-smoothing: antialiased; } img, canvas, svg, picture { display: block; } img { max-width: 100%; height: auto; } a { color: inherit; } p { margin: 0; } h1, h2, h3, h4 { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: default; } ::selection { background: var(--kirmizi-koyu); color: #fff; } :focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 3px; border-radius: 6px; } [hidden] { display: none !important; } section[id], .kutuphane { scroll-margin-top: 92px; } .gorunmez { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .simgeler { position: absolute; width: 0; height: 0; overflow: hidden; } .simge { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .atla { position: fixed; top: 10px; left: 10px; z-index: 200; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 8px; background: var(--murekkep); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform 0.2s ease; } .atla:focus { transform: none; } .kap { max-width: var(--en); margin: 0 auto; } /* ---------- ortak yazı ---------- */ .etiket { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kirmizi-yazi); } .etiket + .baslik { margin-top: 12px; } /* sahnenin kısa bilgileri (uygulamanın kodundan): küçük ad, altında serif değer */ .olgular { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 16px 28px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--cizgi-koyu); } .olgular dt { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--murekkep-3); } .olgular dd { margin: 6px 0 0; font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--murekkep); } .baslik { margin-top: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -0.016em; text-wrap: balance; } .bolum__on { font-size: 17px; line-height: 1.7; color: var(--murekkep-2); max-width: 36em; text-wrap: pretty; } .bolum__on b { color: var(--murekkep); font-weight: 800; } .bolum__bas { margin-bottom: clamp(36px, 4.4vw, 60px); } .bolum__bas--iki { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 20px clamp(32px, 5vw, 88px); align-items: start; } .bolum__bas--iki .bolum__on { padding-bottom: 6px; } /* ---------- düğmeler ---------- */ .dugme { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .dugme:active { transform: scale(0.97); } .dugme .simge { width: 19px; height: 19px; } .dugme--cizgi { background: var(--kagit); color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--cizgi-koyu); } .dugme--cizgi:hover { box-shadow: inset 0 0 0 1.5px var(--murekkep); } .dugme--kucuk { min-height: 44px; padding: 0 16px; font-size: 14px; } .dugme:disabled { opacity: 0.4; transform: none; } .play { display: inline-flex; min-height: 44px; align-items: center; border-radius: 10px; } .play img { height: 56px; width: auto; } .play--buyuk img { height: 64px; } /* ---------- mühür (yalnız alt bilgide, 217'nin imzası) ---------- */ .muhur { display: inline-grid; place-items: center; background: var(--kirmizi); color: #fff; font-family: var(--serif); font-weight: 700; line-height: 1; border-radius: 10px; user-select: none; } .muhur--alt { width: 58px; height: 58px; font-size: 14px; letter-spacing: 0.06em; transform: rotate(-5deg); } /* ============================================================ ÜST */ .ust { position: absolute; top: 0; left: 0; right: 0; z-index: 70; display: flex; justify-content: space-between; align-items: center; padding: 24px max(var(--kenar), calc((100% - var(--en)) / 2)); pointer-events: none; } .marka { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 68px; font-family: var(--serif); font-weight: 800; font-size: 28px; letter-spacing: -0.01em; text-decoration: none; color: var(--murekkep); } .marka__simge { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 2px 6px rgba(17, 17, 26, 0.18); } .kapsul { pointer-events: auto; position: fixed; top: 24px; right: max(var(--kenar), calc((100% - var(--en)) / 2)); display: flex; align-items: center; padding: 10px 10px 10px 16px; border-radius: 999px; background: #fff; /* sade: kaydırınca içeriğin üstünden ayrılsın diye ince bir kenar ve kısa bir gölge */ box-shadow: 0 1px 2px rgba(17, 17, 26, 0.06), 0 10px 24px -14px rgba(17, 17, 26, 0.3), inset 0 0 0 1px rgba(17, 17, 17, 0.09); } .kapsul__baglar { display: flex; list-style: none; margin: 0 8px 0 0; padding: 0; } .kapsul__baglar a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; color: #3b3b40; border-radius: 999px; transition: color 0.2s ease; } .kapsul__baglar a:hover, .kapsul__baglar a[aria-current="true"] { color: var(--murekkep); } .kapsul__baglar a[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--kirmizi); } .kapsul__indir { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px; background: var(--kirmizi-koyu); color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none; transition: background-color 0.2s ease; } .kapsul__indir:hover { background: #A02611; } .kapsul__menu { display: none; width: 48px; height: 48px; margin-left: 6px; border: 0; border-radius: 50%; background: var(--sayfa); place-items: center; } .kapsul__kalem { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; margin-right: 8px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; background: #fff; color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--cizgi-koyu); font-size: 14px; font-weight: 700; transition: box-shadow 0.2s ease; } .kapsul__kalem:hover { box-shadow: inset 0 0 0 1.5px var(--murekkep); } .kapsul__kalem-yazi { line-height: 1; } .kapsul__kalem .simge { width: 21px; height: 21px; stroke-width: 1.7; } html.kalem-acik .kapsul__kalem { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--kehribar); } .kapsul__menu-cizgi, .kapsul__menu-cizgi::before { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--murekkep); transition: transform 0.25s ease; } .kapsul__menu-cizgi { position: relative; transform: translateY(-3px); } .kapsul__menu-cizgi::before { content: ""; position: absolute; left: 0; top: 6px; } .kapsul__menu[aria-expanded="true"] .kapsul__menu-cizgi { transform: translateY(0) rotate(45deg); } .kapsul__menu[aria-expanded="true"] .kapsul__menu-cizgi::before { transform: translateY(-6px) rotate(-90deg); } /* ============================================================ KALEM KUTUSU Ekran kaleminin çubuğu (PenTrayToolbar.kt), kutu.js çizer. Ölçüler dp; cihazın içinde --dp ile tasarım pikseline (tablet 1 dp = 0,833 px, telefon 1 px). Geçiş süreleri uygulamanınkiler: mod tuşları ve simgeler 160 ms, araçların sönmesi 180 ms, kalkan araç 140 ms; Dokun'a geçerken kalkık araç önce iner, sonra söner. */ .kk { --dp: 1px; position: absolute; z-index: 6; width: calc(var(--kk-en) * var(--dp)); height: calc(var(--kk-boy) * var(--dp)); pointer-events: none; user-select: none; -webkit-user-select: none; } .kk__svg { display: block; width: 100%; height: 100%; overflow: visible; } .kk__arac { transition: transform 0.14s cubic-bezier(0.4, 0, 0.2, 1); } .kk--ciz .kk__arac--sec { transform: translateY(var(--kalk)); } .kk__p, .kk__s { transition: opacity 0.18s linear; } .kk--ciz .kk__s, .kk--dokun .kk__p { opacity: 0; } .kk--dokun .kk__arac--sec .kk__p { transition-delay: 0.14s; } .kk--dokun .kk__d { opacity: 0.55; } .kk__d { transition: opacity 0.18s linear; } .kk__derin { opacity: 0; transition: opacity 0.18s linear; } .kk--dokun .kk__derin { opacity: 1; } .kk__centik { opacity: 0; } .kk__centik--acik { opacity: 1; } .kk__plaka, .kk__ince, .kk__kalin { transition: opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1); } /* iki tuşlu mod: seçili tuşta açık daire + koyu kalın simge, öbüründe soluk ince simge */ .kk--ciz .kk__tus--dokun .kk__plaka, .kk--dokun .kk__tus--ciz .kk__plaka { opacity: 0; } .kk--ciz .kk__tus--ciz .kk__ince, .kk--dokun .kk__tus--dokun .kk__ince { opacity: 0; } .kk--ciz .kk__tus--dokun .kk__kalin, .kk--dokun .kk__tus--ciz .kk__kalin { opacity: 0; } /* tek tuş (dar kutu): Dokun açıkken açık daire + koyu el, Çiz'de koyu daire + açık el */ .kk--ciz .kk__tek .kk__plaka, .kk--ciz .kk__tek .kk__kalin, .kk--dokun .kk__tek .kk__ince { opacity: 0; } /* eylem simgeleri: Çiz'de kalın ve tam beyaz, Dokun'da ince */ .kk--ciz .kk__eylem .kk__ince, .kk--dokun .kk__eylem .kk__kalin { opacity: 0; } .kk__kapat circle { stroke-width: 1.75px; transition: stroke-opacity 0.16s ease, stroke-width 0.16s ease; } .kk--dokun .kk__kapat circle { stroke-opacity: 0.55; stroke-width: 1.5px; } .kk [data-kk] { cursor: default; } /* defterin kalem kutusu (KarmaBar.kt): seçili kalem yaylanarak kalkar (sönüm 0,55), halka ~0,15 sn'de geçer */ .kr { --dp: 1px; position: absolute; z-index: 6; width: calc(var(--kr-en) * var(--dp)); height: calc(var(--kr-boy) * var(--dp)); pointer-events: none; user-select: none; -webkit-user-select: none; } .kr__svg { display: block; width: 100%; height: 100%; overflow: visible; } .kr__arac { transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1); } .kr__arac--sec { transform: translateY(var(--kalk)); } .kr__halka { transition: transform 0.15s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.12s linear; } @media (prefers-reduced-motion: reduce) { .kk__arac, .kk__p, .kk__s, .kk__d, .kk__derin, .kk__plaka, .kk__ince, .kk__kalin, .kk__kapat circle, .kr__arac, .kr__halka { transition: none; } } /* ============================================================ KUTUNUN KARTLARI Kalem Kutusu'nun kartları (DockedKit.kt › DPopCard, TrayTok), kutu.js › KART kurar: kutunun yarı saydam gövdesi + 5 dp duvar + koyu panel; seçimler açık plaka, düğmeler hap. Ölçüler dp (--dp); boşluklar uygulamadaki Spacer'lar. */ .kc { --dp: 1px; position: absolute; z-index: 7; box-sizing: border-box; width: calc(var(--kc-en) * var(--dp)); padding: calc(5 * var(--dp)); border-radius: calc(22 * var(--dp)); background: linear-gradient(rgba(90, 82, 84, 0.24), rgba(69, 64, 65, 0.24)); box-shadow: inset 0 0 0 calc(1 * var(--dp)) rgba(255, 255, 255, 0.12); font-family: Roboto, system-ui, sans-serif; line-height: 1.2; color: #EDE6EA; text-align: left; pointer-events: none; user-select: none; -webkit-user-select: none; } .kc__ic { position: relative; display: flex; flex-direction: column; padding: calc(12 * var(--dp)); border-radius: calc(17 * var(--dp)); background: #221E20; } .kc p { margin: 0; } .kc__ilk { display: flex; align-items: center; gap: calc(10 * var(--dp)); min-height: calc(30 * var(--dp)); margin-right: calc(36 * var(--dp)); } .kc__ilk > .kc__satir { flex: 1; } .kc__kapat { position: absolute; top: calc(13 * var(--dp)); right: calc(12 * var(--dp)); display: grid; place-items: center; width: calc(28 * var(--dp)); height: calc(28 * var(--dp)); border-radius: 50%; background: #2E292B; } .kc__kapat svg { width: calc(12 * var(--dp)); height: calc(12 * var(--dp)); fill: #CFC6CA; } .kc__baslik { flex: 1; min-width: 0; overflow: hidden; font-size: calc(14 * var(--dp)); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .kc__bolme { flex: 1; display: flex; min-width: 0; height: calc(30 * var(--dp)); padding: calc(2 * var(--dp)); box-sizing: border-box; border-radius: 999px; background: #2E292B; } .kc__bolme > span { flex: 1; display: grid; place-items: center; min-width: 0; overflow: hidden; border-radius: 999px; font-size: calc(12.5 * var(--dp)); font-weight: 500; color: #A0969B; white-space: nowrap; } .kc__bolme > .kc__sec { background: #F2ECEF; color: #221E20; } .kc__bolme--dar { flex: none; width: calc(112 * var(--dp)); } .kc__bolme--desen { flex: none; margin-top: calc(8 * var(--dp)); } .kc__bolme--desen > span { font-size: calc(11.5 * var(--dp)); } .kc__bolme--yon { flex: none; margin-top: calc(6 * var(--dp)); } .kc--silgi .kc__bolme > span { font-size: calc(12 * var(--dp)); } .kc__kuyu { display: block; width: 100%; height: calc(44 * var(--dp)); margin-top: calc(8 * var(--dp)); } .kc__renkler, .kc__kagitlar { display: block; width: 100%; height: calc(34 * var(--dp)); margin-top: calc(6 * var(--dp)); } .kc__kagitlar { margin-top: calc(10 * var(--dp)); } .kc__boylar, .kc__sekiller { display: flex; gap: calc(6 * var(--dp)); margin-top: calc(2 * var(--dp)); } .kc__boylar > span, .kc__sekiller > span { flex: 1; display: grid; place-items: center; height: calc(32 * var(--dp)); border-radius: 999px; background: #2E292B; } .kc__boylar > .kc__sec, .kc__sekiller > .kc__sec { background: #F2ECEF; } .kc__boylar svg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); } .kc__sekiller { gap: calc(4 * var(--dp)); margin-top: calc(8 * var(--dp)); } .kc__sekiller > span { height: calc(36 * var(--dp)); } .kc__sekiller svg { width: calc(18 * var(--dp)); height: calc(18 * var(--dp)); } .kc--silgi .kc__boylar { margin-top: calc(10 * var(--dp)); } .kc__kaydir { display: flex; align-items: center; margin-top: calc(4 * var(--dp)); } .kc__kaydir svg { flex: 1; min-width: 0; height: calc(30 * var(--dp)); } .kc__deger { flex: none; width: calc(44 * var(--dp)); font-size: calc(11 * var(--dp)); font-weight: 500; color: #A0969B; text-align: right; white-space: nowrap; } .kc__satir { display: flex; align-items: center; gap: calc(12 * var(--dp)); height: calc(40 * var(--dp)); padding: 0 calc(8 * var(--dp)); font-size: calc(13.5 * var(--dp)); font-weight: 500; white-space: nowrap; } .kc__satir--tehlike { color: #FF8F80; } .kc--kalem .kc__satir { margin-top: calc(2 * var(--dp)); } .kc--silgi .kc__satir { margin-top: calc(4 * var(--dp)); } .kc--menu .kc__ic { padding: calc(8 * var(--dp)); } .kc--menu .kc__ilk { min-height: calc(40 * var(--dp)); margin-right: calc(32 * var(--dp)); } .kc--menu .kc__kapat { top: calc(14 * var(--dp)); right: calc(8 * var(--dp)); } .kc__simge { flex: none; width: calc(18 * var(--dp)); height: calc(18 * var(--dp)); fill: currentColor; } .kc__not { font-size: calc(11.5 * var(--dp)); line-height: calc(15 * var(--dp)); color: #A0969B; } .kc__secenek { display: flex; align-items: center; gap: calc(10 * var(--dp)); height: calc(40 * var(--dp)); margin-top: calc(6 * var(--dp)); padding: 0 calc(14 * var(--dp)); border-radius: 999px; background: #2E292B; font-size: calc(13.5 * var(--dp)); font-weight: 500; white-space: nowrap; } .kc__not + .kc__secenek { margin-top: calc(10 * var(--dp)); } .kc__onay { display: flex; gap: calc(6 * var(--dp)); margin-top: calc(10 * var(--dp)); } .kc__onay > span { flex: 1; display: grid; place-items: center; height: calc(38 * var(--dp)); border-radius: 999px; background: #2E292B; font-size: calc(13.5 * var(--dp)); font-weight: 500; } .kc__onay > .kc__tamam { background: #E5484D; color: #FFFFFF; font-weight: 600; } /* ============================================================ SAYFANIN EKRAN KALEMİ Kapalıyken sol kenarda bir dil (sekme; menüdeki "Sayfaya yaz" da açar), açıkken ekranın altında, ortada kalem kutusu (uygulamanın varsayılan yeri) ve kutunun üstünde açılan kartlar. Görünüş kutu.js'ten (SVG); üstünde her öğenin yerinde görünmez bir düğme. Katmanlar kalem.js'ten gelir: .kalem-sayfa (kâğıt), .kalem-tuval (mürekkep). Kök dönüşümsüz: içindeki sabit konumlu kutu ve kart ekrana göre yerleşsin. */ .kalem { position: static; } .kalem__sekme { position: fixed; left: 0; top: 50%; z-index: 80; transform: translateY(-50%); display: none; flex-direction: column; align-items: center; gap: 10px; width: 44px; padding: 14px 0 16px; border: 0; border-radius: 0 16px 16px 0; background: #1A1A1E; color: #fff; box-shadow: 0 14px 34px rgba(17, 17, 26, 0.24); transition: width 0.2s ease; } .kalem__sekme-uc { width: 20px; height: 20px; fill: #fff; } .kalem__sekme:hover { width: 50px; } .kalem__sekme-yazi { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .kalem--acik .kalem__sekme { display: none; } .kalem__cubuk { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 81; width: var(--kalem-en, 0); height: var(--kalem-boy, 0); transform: translateX(-50%); } .kalem__cubuk[hidden], .kalem__panel[hidden] { display: none; } .kalem__cubuk .kk { z-index: 0; } .kalem__tus { position: absolute; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease; } .kalem__tus:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); } .kalem__tus:focus-visible { outline: 2px solid #FFB300; outline-offset: -1px; } .kalem__tus:disabled { cursor: default; } /* çizimler gizliyken ⋯ düğmesinde sarı nokta */ .kalem__gizli-nokta { position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: #FFC53D; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .kalem__cubuk--gizli .kalem__gizli-nokta { opacity: 1; } .kalem__panel { position: fixed; left: var(--x, 12px); top: var(--y, 12px); z-index: 82; } .kalem__panel .kc { position: relative; } /* kalem açıkken duyuru şeridi ekranın üstünde (altta kutu ve kartlar var) */ html.kalem-acik .duyuru { top: 104px; bottom: auto; } .kalem-tuval { position: fixed; left: 0; top: 0; z-index: 60; width: 100vw; height: 100vh; height: 100lvh; pointer-events: none; } html.kalem-acik .kalem-tuval { pointer-events: auto; touch-action: none; cursor: crosshair; } html.kalem-acik .kalem[data-kalem-arac="silgi"] ~ .kalem-tuval { cursor: none; } html.kalem-el .kalem-tuval { pointer-events: none; } .kalem-sayfa { --c: rgba(17, 17, 17, 0.13); position: fixed; inset: 0; z-index: 58; pointer-events: none; background-color: var(--zemin, #FAFAFA); } .kalem-sayfa--koyu { --c: rgba(255, 255, 255, 0.16); } .kalem-sayfa[data-desen="kareli"] { background-image: linear-gradient(var(--c) 1px, transparent 1px), linear-gradient(90deg, var(--c) 1px, transparent 1px); background-size: 32px 32px; } .kalem-sayfa[data-desen="cizgili"] { background-image: repeating-linear-gradient(180deg, transparent 0 35px, var(--c) 35px 36px); } .kalem-sayfa[data-desen="noktali"] { background-image: radial-gradient(circle at 16px 16px, var(--c) 1.6px, transparent 2px); background-size: 32px 32px; } .kalem-silgi { position: fixed; left: var(--x, -100px); top: var(--y, -100px); z-index: 61; width: var(--r, 36px); height: var(--r, 36px); margin: calc(var(--r, 36px) / -2) 0 0 calc(var(--r, 36px) / -2); border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 1.5px rgba(17, 17, 17, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.7); } .kalem-silgi.uzak { opacity: 0.6; } /* duyuru şeridi: altta, ortada (uygulamadaki toast gibi) */ .duyuru { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: max-content; max-width: min(92vw, 560px); padding: 12px 18px; border-radius: 16px; background: #1A1A1E; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.45; box-shadow: 0 18px 40px rgba(17, 17, 26, 0.3); opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .duyuru:empty { display: none; } .duyuru.acik { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .duyuru a { display: inline-flex; align-items: center; min-height: 32px; color: #FFD24A; font-weight: 800; text-underline-offset: 0.2em; } /* ============================================================ CİHAZLAR Telefon: 384×804 gövde; 2'lik alüminyum kenar, 10'luk siyah cam, 360×780 ekran. Tablet: 1048×673 gövde; ekran 24 içeride, 1000×625. Köşeler iç içe (cam 54/44, ekran 44/22). --k gövdenin sayfadaki ölçeği. Gölge iki katman: yere yakın keskin, uzakta geniş ve silik. */ .tel { --k: 0.7; position: relative; flex: none; width: calc(384px * var(--k)); height: calc(804px * var(--k)); } .tablet { --k: 0.62; position: relative; width: calc(1048px * var(--k)); height: calc(673px * var(--k)); } .tablet--dikey { width: calc(673px * var(--k)); height: calc(1048px * var(--k)); } .tel__govde, .tablet__govde { position: absolute; left: 0; top: 0; transform: scale(var(--k)); transform-origin: 0 0; /* kasa: ince alüminyum kenar; üst kenarı ışık alır, alt kenarı koyulaşır */ background: linear-gradient(180deg, #E4E6EA 0, #A9ADB4 1.2%, #7B7F86 5%, #5C6066 30%, #54575D 70%, #6F737A 95%, #A3A7AE 98.8%, #C9CCD1 100%); box-shadow: 0 0.6px 0.6px rgba(0, 0, 0, 0.34), 0 2px 4px -1px rgba(14, 16, 22, 0.2), 0 12px 24px -8px rgba(14, 16, 22, 0.24), 0 34px 70px -22px rgba(14, 16, 22, 0.34), 0 70px 120px -50px rgba(14, 16, 22, 0.3); } .tel__govde { width: 384px; height: 804px; border-radius: 56px; } .tablet__govde { width: 1048px; height: 673px; border-radius: 46px; } .tablet--dikey .tablet__govde { width: 673px; height: 1048px; } /* ön cam: siyah; kenarında ince bir ışık. Tablette ön kamera camın içinde (yatayda üst uzun kenar) */ .tel__govde::before, .tablet__govde::before { content: ""; position: absolute; inset: 2px; border-radius: 54px; background: #070708; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 1.5px 0.5px rgba(255, 255, 255, 0.1); } .tablet__govde::before { border-radius: 44px; background: radial-gradient(circle at 50% 12px, #34465A 0 0.9px, #121A24 2px, #0A0C0F 3.2px, #1B1D21 4.1px, rgba(27, 29, 33, 0) 4.8px), #070708; } .tablet--dikey .tablet__govde::before { background: radial-gradient(circle at calc(100% - 12px) 50%, #34465A 0 0.9px, #121A24 2px, #0A0C0F 3.2px, #1B1D21 4.1px, rgba(27, 29, 33, 0) 4.8px), #070708; } /* tuşlar: telefonda sağ kenarda. Tabletin tuşları önden görünmez; kalemin yuvası uzun kenarında */ .tel__govde::after { content: ""; position: absolute; } .tel__govde::after { right: -2.6px; top: 176px; width: 3.4px; height: 150px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #6D7178, #C8CBD0 45%, #8E9299 70%, #5E6268); -webkit-mask: linear-gradient(180deg, #000 0 72px, transparent 72px 100px, #000 100px); mask: linear-gradient(180deg, #000 0 72px, transparent 72px 100px, #000 100px); } .tel__ekran, .tablet__ekran { position: absolute; overflow: hidden; background: #fff; isolation: isolate; } .tel__ekran { inset: 12px; border-radius: 44px; } .tablet__ekran { inset: 24px; border-radius: 22px; } /* ekranın kenarı: panelin cama bitiştiği ince koyu çizgi */ .tel__ekran::before, .tablet__ekran::before { content: ""; position: absolute; inset: 0; z-index: 30; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); } /* telefonun ön kamerası: ekranda, durum çubuğunun ortasında */ .tel__ekran::after { content: ""; position: absolute; left: 50%; top: 11px; z-index: 31; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #3A4B60 0 1px, #111822 2.4px, #07090C 4.2px, #0B0B0D 6.5px); } .tel__murekkep, .tablet__murekkep { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; } .tel__tutamac { position: absolute; left: 50%; bottom: 8px; z-index: 8; width: 108px; height: 4px; margin-left: -54px; border-radius: 2px; background: rgba(0, 0, 0, 0.55); } .tel--koyu .tel__tutamac { background: rgba(255, 255, 255, 0.72); } /* kalem ucu (stylus): gövdenin içinde, ekranın üstünde; ekranın dışına da taşar. Yeri ve gölgesi sahne.js'ten (yalnız dönüşüm değişir). */ .uc { position: absolute; left: 0; top: 0; z-index: 12; pointer-events: none; } .uc svg { position: absolute; left: 0; top: 0; overflow: visible; transform-origin: 0 0; will-change: transform; } .uc__golge { filter: blur(6px); } .uc__temas { filter: blur(1.4px); } .uc--gizli { visibility: hidden; } /* Android durum çubuğu */ /* sistemin durum çubuğu kalemin katmanlarının da üstünde (sayfa onun altına serilir) */ .durum { position: absolute; left: 0; right: 0; top: 0; z-index: 7; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 2px 24px 0 28px; font-family: var(--android); color: #1F1F1F; pointer-events: none; } .durum b { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; } .durum__sag { display: flex; align-items: center; gap: 5px; } .durum__sag svg { width: 16px; height: 16px; fill: currentColor; } .pil { position: relative; display: block; width: 23px; height: 12px; margin-left: 2px; border-radius: 3.5px; box-shadow: inset 0 0 0 1.3px currentColor; opacity: 0.95; } .pil::before { content: ""; position: absolute; left: 2.5px; top: 2.5px; bottom: 2.5px; width: 13px; border-radius: 1.5px; background: currentColor; } .pil::after { content: ""; position: absolute; right: -3px; top: 4px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; } .tel--koyu .durum, .durum--acik { color: #fff; } .tablet .durum { height: 28px; padding: 0 22px; } .tablet .durum b { font-size: 13px; } /* telefonlarda çubuğun yeri: her birinde başka bir yere çekilmiş */ /* ============================================================ CİHAZLARDAKİ UYGULAMALAR Hepsi bu site için hazırlandı; gerçek bir uygulamanın kopyası değil. */ .uyg { position: absolute; inset: 0; overflow: hidden; font-family: var(--android); font-size: 14px; line-height: 1.35; color: #1F1F1F; text-align: left; } .uyg svg { flex: none; fill: currentColor; } /* --- ödev PDF'i: Android'in PDF görüntüleyicisi; sayfa dizgisi bir sınav kâğıdı gibi --- */ .uyg--pdf, .uyg--test { background: linear-gradient(#fff 0 88px, #DADCE0 88px); padding-top: 32px; } .p-ust { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 16px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); color: #1F1F1F; } .p-ust span { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p-ust b { font-weight: 500; } .p-ust svg { width: 24px; height: 24px; fill: #444746; } .p-alan { padding: 14px 12px; } .p-sayfa { min-height: 660px; padding: 22px 20px 26px 22px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.16); font-family: var(--belge); font-size: 13px; line-height: 1.5; color: #1B1B1D; font-weight: 500; -webkit-font-smoothing: auto; } .p-bas { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 5px; border-bottom: 0.8px solid #1B1B1D; font-family: var(--belge); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .p-soru { margin-top: 16px; } .p-soru p { text-wrap: pretty; } .p-soru b { font-weight: 600; } .p-k { margin-top: 4px; font-size: 11.5px; color: #3C3C40; } .p-sik { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, max-content); gap: 5px 24px; } .p-sik b { margin-right: 3px; font-weight: 600; } .p-sik--yan { grid-template-columns: repeat(5, max-content); gap: 5px 30px; } .p-bosluk { height: 132px; } /* sorunun şekli: çizgi çizim, sağa yaslı */ .p-sekil { float: right; width: 128px; height: 72px; margin: 2px 0 6px 12px; overflow: visible; } .p-sekil path { fill: none; stroke: #1B1B1D; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .p-sekil .p-sekil__yol { stroke-dasharray: 3 3; stroke-width: 0.9; } .p-sekil .p-sekil__uc { fill: #1B1B1D; stroke: none; } .p-sekil .p-sekil__aci { stroke-width: 0.8; } .p-sekil text { font-family: var(--belge); font-size: 8.5px; fill: #1B1B1D; } .p-sekil .p-sekil__v { font-style: italic; font-size: 10px; } /* --- sınıf grubu (sohbet) --- */ .uyg--sohbet { background: linear-gradient(#fff 0 92px, #EDF0F3 92px); padding-top: 32px; } .s-ust { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 10px 0 12px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07); } .s-ust > svg { width: 22px; height: 22px; fill: #3C4043; } .s-ust > svg + svg { margin-left: 6px; } .s-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #6A4FB3; color: #fff; font-size: 13px; font-weight: 500; font-style: normal; } .s-ust span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .s-ust b { font-size: 16px; font-weight: 500; } .s-ust small { font-size: 12px; color: #5F6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-akis { display: flex; flex-direction: column; gap: 8px; padding: 12px; } .s-gun { align-self: center; padding: 3px 10px; border-radius: 8px; background: #DCE2E9; color: #44474F; font-size: 11.5px; } .s-m { position: relative; align-self: flex-start; max-width: 80%; padding: 6px 10px 5px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); font-size: 14.5px; line-height: 19px; } .s-ad { display: block; margin-bottom: 1px; font-size: 12.5px; font-weight: 500; } .s-ad--1 { color: #C2185B; } .s-ad--2 { color: #00796B; } .s-m time { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 1px; font-size: 10.5px; color: #8A8F98; } .s-m time svg { width: 15px; height: 15px; fill: #1E88E5; } .s-m--resim { width: 262px; max-width: none; padding: 4px 4px 5px; } .s-m--resim .s-ad { padding: 2px 6px 3px; } .s-ekran { overflow: hidden; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); font-size: 11px; line-height: 1.35; color: #202124; } .s-ekran__ust { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; background: #127A52; color: #fff; } .s-ekran__ust i { flex: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #9FE0B8; } .s-ekran__ust b { flex: 1; font-size: 12px; font-weight: 500; } .s-ekran__ust span { font-size: 9.5px; opacity: 0.85; } .s-ekran__alt { padding: 7px 10px 3px; font-size: 9.5px; color: #5F6368; } .s-fis { list-style: none; margin: 0; padding: 0 10px; } .s-fis li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid #EEF0F2; font-size: 11.2px; } .s-fis b { font-weight: 500; font-variant-numeric: tabular-nums; } .s-fis__top { display: flex; justify-content: space-between; padding: 6px 10px 9px; font-size: 11.5px; font-weight: 500; } .s-m--resim p { padding: 5px 6px 0; } .s-m--resim time { padding: 0 6px; } .s-yaz { position: absolute; left: 8px; right: 8px; bottom: 26px; display: flex; gap: 6px; } .s-yaz span { flex: 1; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: 24px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); } .s-yaz em { flex: 1; font-style: normal; font-size: 15px; color: #8A8F98; } .s-yaz span svg { width: 22px; height: 22px; fill: #5F6368; } .s-yaz i { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1E73D8; } .s-yaz i svg { width: 22px; height: 22px; fill: #fff; } /* --- harita --- */ .uyg--harita { background: #EAE8E1; } .h-harita { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--android); } .h-yazi text { font-size: 10.5px; fill: #5F6368; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; letter-spacing: 0.02em; } .h-yazi .h-yazi--su { fill: #3E7DAD; stroke: none; font-style: italic; } .h-yazi .h-yazi--ana { font-size: 11px; font-weight: 500; fill: #4A4F55; } .h-park { font-size: 11px; font-weight: 500; fill: #3B7A2E; paint-order: stroke; stroke: #EAF4E4; stroke-width: 3px; } .h-poi text { font-size: 10.5px; fill: #5F6368; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; } .h-hedef { font-size: 12.5px; font-weight: 500; fill: #B3261E; paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; } .h-ara { position: absolute; left: 12px; right: 12px; top: 42px; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 8px 0 16px; border-radius: 25px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); } .h-ara span { flex: 1; font-size: 15px; } .h-ara svg { width: 22px; height: 22px; fill: #444746; } .h-yuvar { position: absolute; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } .h-yuvar svg { width: 22px; height: 22px; fill: #444746; } .h-yuvar--konum { bottom: 230px; } .h-yuvar--konum svg { fill: #1E73D8; } .h-kart { position: absolute; left: 0; right: 0; bottom: 0; height: 212px; padding: 10px 18px; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12); } .h-tutamac { display: block; width: 32px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: #C4C7C5; } .h-ad { font-size: 21px; line-height: 26px; } .h-acik { margin-top: 4px; font-size: 13px; color: #5F6368; } .h-eylem { display: flex; gap: 8px; margin-top: 16px; } .h-eylem span { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px #C4C7C5; color: #1F1F1F; font-size: 14px; font-weight: 500; } .h-eylem svg { width: 18px; height: 18px; } .h-eylem .h-eylem__ana { background: #2B2B2B; color: #fff; box-shadow: none; } /* --- bölünmüş ekran: iki uygulama, aralarında Android'in ayırıcısı --- */ .bol { position: absolute; inset: 28px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); } .tel .bol { inset: 32px 0 0; } .bol--ust { grid-template-columns: none; grid-template-rows: 356px 12px minmax(0, 1fr); } .bol > .uyg { position: relative; inset: auto; min-width: 0; min-height: 0; border-radius: 14px; } .tablet__ekran:has(> .bol), .tel__ekran:has(> .bol) { background: #000; } .bol__ayrac { position: relative; } .bol__ayrac i { position: absolute; left: 50%; top: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 2px; background: rgba(255, 255, 255, 0.78); } .bol--ust .bol__ayrac i { width: 44px; height: 4px; margin: -2px 0 0 -22px; } /* --- ders videosu (koyu, bölünmüş ekranda): kare tuvalde (videolar.js), altında bilgi ve bölümler --- */ .uyg--ders { background: #0F0F0F; color: #F1F1F1; padding-top: 32px; } .bol .uyg--ders { padding-top: 0; background: #121212; } .d-kare { position: relative; aspect-ratio: 16 / 9; background: #0C1218; } .d-video { position: absolute; inset: 0; width: 100%; height: 100%; } .d-bilgi { padding: 14px 18px; } .d-baslik { font-size: 17px; line-height: 23px; font-weight: 500; } .d-meta { margin-top: 4px; font-size: 12.5px; color: #AAAAAA; } .d-ara { margin-top: 16px; font-size: 13px; font-weight: 500; color: #AAAAAA; } .d-bolumler { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; } .d-bolumler li { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; color: #D6D6D6; } .d-bolumler time { flex: none; min-width: 40px; font-size: 12.5px; font-weight: 500; color: #8AB4F8; font-variant-numeric: tabular-nums; } .d-bolumler .d-simdi { background: #262626; color: #fff; } .tel .d-bilgi { padding: 12px 14px; } .tel .d-baslik { font-size: 16px; line-height: 21px; } .tel .d-bolumler { margin-top: 10px; } .tel .d-bolumler li { height: 36px; font-size: 13.5px; } /* PDF bölünmüş ekranda: pencerenin tepesinde kendi çubuğu */ .bol .uyg--pdf { padding-top: 0; background: linear-gradient(#fff 0 56px, #DADCE0 56px); } .tablet .bol .p-sayfa { padding: 24px 28px 30px; font-size: 13.6px; line-height: 1.5; } .tablet .bol .p-bas { font-size: 9.5px; } .tablet .bol .p-k { font-size: 12px; } .tablet .bol .p-sik { gap: 6px 24px; } .tablet .bol .p-bosluk { height: 140px; } .bol--ust .p-alan { padding: 10px 10px; } .bol--ust .p-sayfa { padding: 16px 76px 16px 18px; font-size: 13px; } .bol--ust .p-soru { margin-top: 0; } .bol--ust .p-sik { grid-template-columns: repeat(3, max-content); gap: 4px 22px; } .bol--ust .p-bosluk { height: 130px; } /* --- takvim --- */ .uyg--takvim { background: #fff; padding-top: 32px; color: #1F1F1F; } .k-ust { display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 16px; } .k-ust > svg { width: 24px; height: 24px; fill: #444746; } .k-ust span { flex: 1; display: flex; align-items: center; gap: 2px; font-size: 22px; } .k-ust span svg { width: 22px; height: 22px; fill: #444746; } .k-gunler { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 4px; font-size: 11px; font-weight: 500; color: #5F6368; text-align: center; } .k-ay { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 38px; margin-top: 6px; padding: 0 4px 10px; border-bottom: 1px solid #E3E3E3; } .k-ay > i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; font-style: normal; min-width: 0; } .k-ay b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12.5px; font-weight: 500; } .k-ay .k-sec b { background: #0B57D0; color: #fff; } .k-n { display: block; width: 5px; height: 5px; border-radius: 50%; background: #7986CB; } .k-n--2 { background: #33B679; } .k-n--3 { background: #039BE5; } .k-n--4 { background: #F6BF26; } .k-n--5 { background: #E67C73; } .k-n--6 { background: #8E24AA; } .k-liste { padding: 6px 12px 0; } .k-liste__gun { margin: 12px 4px 6px; font-size: 12.5px; font-weight: 500; color: #444746; } .k-etk { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; padding: 8px 12px 9px 14px; border-radius: 10px; background: #E8F0FE; box-shadow: inset 4px 0 0 #7986CB; } .k-etk b, .k-etk span { align-self: flex-start; } .k-etk b { font-size: 14px; font-weight: 500; color: #1F1F1F; } .k-etk span { font-size: 12px; color: #444746; } .k-etk--2 { background: #E6F4EA; box-shadow: inset 4px 0 0 #33B679; } .k-etk--3 { background: #E1F3FC; box-shadow: inset 4px 0 0 #039BE5; } /* --- video oynatıcı (tablet, yatay) --- */ .uyg--oynatici { background: #0B0C0D; } .o-sim { position: absolute; inset: 0; width: 100%; height: 100%; } /* tam ekran video: durum çubuğu yok; üst çubuk videonun üstünde, koyu bir geçişle */ .o-ust { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 22px; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .o-ust span { flex: 1; font-size: 17px; } .o-ust b { font-weight: 500; } .o-ust svg { width: 24px; height: 24px; } /* oynat düğmesi videonun alt çubuğunda: sahnenin ortasını (topun yolunu) kapatmaz */ .o-oynat { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; transition: background-color 0.2s ease; } .o-oynat:hover { background: rgba(255, 255, 255, 0.26); } .o-oynat svg { width: 30px; height: 30px; fill: #fff; } .o-oynat:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .o-oynat__dur, .o-oynat__yeniden { display: none; } .uyg--oynatici[data-durum="oynuyor"] .o-oynat__oynat, .uyg--oynatici[data-durum="bitti"] .o-oynat__oynat { display: none; } .uyg--oynatici[data-durum="oynuyor"] .o-oynat__dur { display: block; } .uyg--oynatici[data-durum="bitti"] .o-oynat__yeniden { display: block; width: 26px; height: 26px; } .o-alt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 16px; height: 72px; padding: 0 22px 6px 14px; color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); } .o-cubuk { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); } .o-cubuk i { display: block; width: 0; height: 100%; border-radius: 2px; background: #fff; } .o-alt svg { width: 26px; height: 26px; } /* --- geometri testi (tablet, dikey) --- */ .t-sayfa { margin: 18px 22px; padding: 30px 34px 40px; min-height: 900px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.16); font-family: var(--belge); font-size: 15.5px; font-weight: 500; line-height: 1.5; color: #1B1B1D; -webkit-font-smoothing: auto; } .t-sayfa .p-bas { font-size: 10.5px; } .t-soru { margin-top: 26px; } .t-soru b { font-weight: 600; } .t-soru p { text-wrap: pretty; } .t-soru p + p { margin-top: 4px; } .t-cizim { width: 400px; height: 260px; margin: 22px 0 6px 64px; overflow: visible; } .t-cizim text { font-family: var(--belge); font-size: 17px; font-weight: 500; font-style: italic; fill: #1B1B1D; } .t-soru .p-sik { margin-top: 16px; } /* ============================================================ GİRİŞ Başlık tek satır; altında iki sütun: solda yazı, sağda tablet ve altında açıklaması. Tabletin ölçeği (--k) ekranlar.js'te: sütuna ve ekranın yüksekliğine sığar. Sol sütunun ilk satırının büyük harf üstü tabletin üst kenarında (--on-ust, ölçülür). Kalem tabletin üst kenarındaki yuvasında durur: başlıkla tablet arasındaki pay onu da taşır. Bölüm en az ekran boyu; içerik dikeyde ortalanır. Dar ekranda alt alta: başlık, cihaz ve açıklaması, yazı; ve tablet yerine telefon. */ /* kalem ucu tabletin dışına taşabilir: yanda sayfa kırpar, aşağıda bir sonraki bölümün üstünden geçer */ .giris { position: relative; z-index: 2; overflow-x: clip; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 112px var(--kenar) clamp(24px, 5vh, 56px); background-color: var(--sayfa); } /* nokta dokusu (217'nin) ayrı katmanda: geniş ekranda yazı sütununun arkasında silikleşir */ .giris::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--noktalar); background-size: 30px 30px; } @media (min-width: 1101px) { .giris::before { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 26%, #000 46%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 26%, #000 46%); } } .giris__ic { position: relative; width: 100%; max-width: var(--en); margin: 0 auto; display: grid; grid-template-columns: minmax(300px, 372px) minmax(0, 1fr); grid-template-areas: "baslik baslik" "yazi sahne"; column-gap: clamp(40px, 4.6vw, 88px); } .giris__baslik { grid-area: baslik; margin: 0 0 clamp(44px, 5.6vh, 64px) var(--baslik-sol, 0px); white-space: nowrap; font-family: var(--serif); font-weight: 800; font-size: clamp(46px, min(5vw, 8.2vh), 84px); line-height: 1; letter-spacing: -0.028em; } .giris__yazi { grid-area: yazi; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .giris__on { margin-top: var(--on-ust, -0.47em); font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 1.35vw, 20.5px); line-height: 1.55; color: #26262B; text-wrap: pretty; } .giris__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; } .giris__eylem .dugme { min-height: 52px; padding: 0 22px; } .giris__eylem .play img { height: 52px; } .giris__meta { margin-top: 16px; font-size: 13.5px; color: var(--murekkep-3); } /* tablette olanlar, sahneyle birlikte ilerler (ekranlar.js). Geniş ekranda sol sütunun dibinde, tabletin alt kenarında biter; tabletin altındaki açıklama satırı yerine (ve "Tekrar oynat" onun içinde). Ekran kısaldıkça sıkışır: sütun boş kalmasın, tablet de küçülmesin */ .giris__akis { display: none; width: 100%; margin-top: auto; padding-top: 28px; } .giris__akis .tekrar { align-self: flex-start; margin-top: 16px; } .giris__akis-bas { padding-bottom: 10px; border-bottom: 1px solid var(--cizgi-koyu); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--murekkep-3); } .giris__akis ol { list-style: none; margin: 0; padding: 0; counter-reset: akis; } .giris__akis li { position: relative; display: flex; gap: 12px; padding: 8px 0 8px 2px; border-bottom: 1px solid var(--cizgi); font-size: 14px; line-height: 1.45; color: var(--murekkep-3); counter-increment: akis; transition: color 0.25s ease; } .giris__akis li::before { content: counter(akis); flex: none; width: 1.2em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--murekkep-3); transition: color 0.25s ease; } .giris__akis li.bitti { color: var(--murekkep-2); } .giris__akis li.simdi { color: var(--murekkep); font-weight: 700; } .giris__akis li.simdi::before { color: var(--kirmizi); } .giris__akis-simdi { display: none; } @media (min-width: 1101px) { .giris__akis { display: flex; flex-direction: column; } .giris__sahne .giris__not { display: none; } } /* kısa ekranda altı satır sığmaz: başlık ve "Tekrar oynat" bir satırda, altında altı parçalı ilerleme çizgisi, onun altında o anki adım (satırların yazısı ekran okuyucuya kalır) */ @media (min-width: 1101px) and (max-height: 820px) { /* --t: pencerenin 1100 px'i ne kadar geçtiği (0–400 px). Tablet genişlikle büyür, sol sütunun çoğu sabit kalır; 1500 px'in altında sütun tablete sığmaz. Bu yüzden oradan 1101 px'e doğru başlık, metin, aralıklar ve rozet azar azar küçülür (sıçramadan): "Tablette şimdi" her genişlikte tabletin alt kenarında biter */ .giris { --t: clamp(0px, 100vw - 1100px, 400px); } .giris__yazi { align-self: stretch; } .giris__akis { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(8px + var(--t) * 0.01) 16px; padding-top: calc(8px + var(--t) * 0.025); } .giris__akis-bas { grid-column: 1; grid-row: 1; padding: 0; border: 0; } .giris__akis .tekrar { grid-column: 2; grid-row: 1; margin: 0; min-height: calc(34px + var(--t) * 0.01); } .giris__akis ol { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 4px; } .giris__akis li { flex: 1; height: 3px; padding: 0; border: 0; border-radius: 2px; font-size: 0; line-height: 0; background: var(--cizgi-koyu); transition: background-color 0.25s ease; } .giris__akis li::before { display: none; } .giris__akis li.bitti { background: var(--murekkep-3); } .giris__akis li.simdi { background: var(--kirmizi); } .giris__akis-simdi { display: block; grid-column: 1 / -1; grid-row: 3; min-height: 1.45em; font-size: 14.5px; font-weight: 700; line-height: 1.45; color: var(--murekkep); } } @media (min-width: 1101px) and (max-height: 740px) { .giris__akis { padding-top: 6px; gap: 8px 16px; } .giris__akis .tekrar { min-height: 34px; } } /* menüde "Sayfaya yaz" yazılıyken girişte ikincisi yok (dar ekranda menüde yalnız simge var) */ .giris__eylem .dugme--cizgi { display: none; } /* cihaz ve altyazısı tek sütun: sütunun genişliği cihazınki (min-content); altyazı cihazın iki kenarına hizalı */ .giris__sahne { grid-area: sahne; margin: 0; min-width: 0; display: grid; grid-template-columns: min-content; justify-content: end; align-content: start; } .giris__not { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 14px; } .giris__not p { max-width: 40em; font-size: 14px; line-height: 1.5; color: var(--murekkep-2); text-wrap: pretty; } .tablet--giris { --k: 0.84; } .tel--giris { --k: 0.9; display: none; } /* kısa ve geniş ekran (dizüstü tarayıcıları, ör. 1536×730): başlık sol sütunda, tablet bütün yüksekliği kullanır. Başlığın büyük harf üstü tabletin üst kenarında (--baslik-ust, ölçülür); üstteki pay kalemin yuvası */ @media (min-width: 1101px) and (max-height: 820px) { .giris__ic { grid-template-columns: minmax(340px, 0.43fr) minmax(0, 0.57fr); grid-template-rows: auto 1fr; grid-template-areas: "baslik sahne" "yazi sahne"; } .giris__baslik { white-space: normal; text-wrap: balance; line-height: 1.02; /* üçüncü terim 1500 px'te 4.15vw'ye eşit, 1101 px'te 41 px (--t ile aynı aralık) */ font-size: clamp(40px, min(4.15vw, 8.8vh, 5.313vw - 17.44px), 66px); margin: var(--baslik-ust, 30px) 0 0 var(--baslik-sol, 0px); } .giris__yazi { align-self: stretch; } .giris__on { margin-top: calc(18px + var(--t) * 0.02); font-size: clamp(calc(17px + var(--t) * 0.0025), 1.35vw, 20.5px); } .giris__eylem { margin-top: calc(20px + var(--t) * 0.025); } .giris__eylem .play img { height: calc(44px + var(--t) * 0.02); } .giris__meta { margin-top: calc(10px + var(--t) * 0.015); } .giris__sahne { grid-row: 1 / 3; padding-top: 46px; } } /* "Tekrar oynat": yazılı, hafif */ .tekrar { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--cizgi-koyu); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: box-shadow 0.2s ease; } .tekrar:hover { box-shadow: inset 0 0 0 1.5px var(--murekkep); } /* dar ekranda ve dokunmatikte dokunma hedefi 44 px (kısa ve geniş düzendeki sıkı liste kendi ölçüsünde kalır) */ @media (max-width: 1100px), (pointer: coarse) { .tekrar { min-height: 44px; } } .tekrar .simge { width: 16px; height: 16px; } .yalniz-telefon { display: none; } /* çubuk tek bir uygulamanın (videonun) üstünde: yarı saydam zemini iki ayrı zemine bölünmesin */ /* ============================================================ UYGULAMALAR: KATMAN Kendi kendine oynayan sahne (bölüm ekrandayken; ekranlar.js › katmanKur): solda başlık, bölümler ve oynatma satırı, sağda 3B telefon. Telefonun katmanları (uygulama, cam, Kalem Kutusu) aynı 3B bağlamda kardeş öğeler (kırpan bir kutunun içinde olsalar düzleşirler). Etiketler 2B: katmanların ekrandaki yeri hesaplanıp yanlarına dizilir. Bölüm bir ekran boyu: sahne ekranın yüksekliğine göre. */ .katman { position: relative; padding: clamp(64px, 8.5vh, 112px) var(--kenar); background: var(--kagit); } .katman__kap { position: relative; max-width: var(--en); margin: 0 auto; display: grid; grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr); column-gap: clamp(24px, 4vw, 72px); align-items: center; } .katman__metin { display: flex; flex-direction: column; justify-content: center; } .katman__metin .etiket + .katman__baslik { margin-top: 12px; } .katman__sahne { position: relative; height: clamp(540px, calc(100vh - 150px), 840px); height: clamp(540px, calc(100svh - 150px), 840px); overflow: hidden; } .katman__baslik { font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -0.016em; text-wrap: balance; } .katman__on { margin-top: 18px; max-width: 31em; font-size: 16.5px; line-height: 1.7; color: var(--murekkep-2); text-wrap: pretty; } .katman__on b { color: var(--murekkep); font-weight: 800; } /* bölümler: dokununca sahne oradan oynar; şimdiki bölümün altında ilerleme çizgisi */ .katman__sira { margin: 30px 0 0; border-top: 1px solid var(--cizgi); } .katman__sira button { position: relative; display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 4px 16px; align-items: baseline; width: 100%; margin: 0; padding: 14px 0 14px 20px; border: 0; border-bottom: 1px solid var(--cizgi); background: none; text-align: left; color: var(--murekkep-3); transition: color 0.3s ease; } .katman__sira button::before { content: ""; position: absolute; left: 1px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--cizgi-koyu); transition: background-color 0.3s ease, box-shadow 0.3s ease; } .katman__sira button i { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--murekkep); transform-origin: 0 50%; transform: scaleX(var(--ilerleme, 0)); opacity: 0; transition: opacity 0.3s ease; } .katman__sira button:hover { color: var(--murekkep-2); } .katman__sira b { font-family: var(--serif); font-size: 19px; font-weight: 700; color: inherit; } .katman__sira span { font-size: 14.5px; line-height: 1.5; } .katman__sira [aria-current="step"] { color: var(--murekkep); } .katman__sira [aria-current="step"]::before { background: var(--kirmizi); box-shadow: 0 0 0 4px rgba(224, 64, 42, 0.14); } .katman__sira [aria-current="step"] i { opacity: 1; } .katman__oynat { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px; } .katman__simdi { font-size: 13.5px; color: var(--murekkep-3); } .katman__uzay { position: relative; height: 100%; margin: 0; } /* 3B telefon: tasarım pikseliyle (384×804); yer, dönüş ve ölçek JS'ten (perspektif dönüşümün içinde) */ .k3 { position: absolute; left: 0; top: 0; width: 384px; height: 804px; transform-style: preserve-3d; transform-origin: 0 0; will-change: transform; } .k3 > * { position: absolute; left: 0; top: 0; } .k3__tel { --k: 1; } .k3__tel .tel__govde { box-shadow: 0 0.6px 0.6px rgba(0, 0, 0, 0.34), 0 2px 4px -1px rgba(14, 16, 22, 0.2); } /* gövdenin kalınlığı: yan yatınca görünen dilimler; en alttaki gölgeyi taşır */ .k3__kat { width: 384px; height: 804px; border-radius: 56px; } .k3__kat--1 { transform: translateZ(-2.5px); background: #62656C; } .k3__kat--2 { transform: translateZ(-5px); background: #595C62; } .k3__kat--3 { transform: translateZ(-7.5px); background: #505359; } .k3__kat--4 { transform: translateZ(-10px); background: #47494F; box-shadow: 0 12px 24px -8px rgba(14, 16, 22, 0.24), 0 34px 70px -22px rgba(14, 16, 22, 0.34), 0 70px 120px -50px rgba(14, 16, 22, 0.3); } /* OSNote'un katmanı: ekranla aynı yerde, saydam; ayrılınca cam gibi görünür (--e: ayrılma, 0..1) */ /* ayrılınca: hafif mavimsi, yarı saydam bir cam; kenarı parlak, dışında ince koyu bir çizgi (beyaz sayfada da seçilsin) */ .k3__cam { left: 12px; top: 12px; width: 360px; height: 780px; border-radius: 44px; will-change: transform; } /* camın görünüşü sabit, ayrı bir katmanda; ayrılma yalnız saydamlığını değiştirir: kaydırırken her karede yeniden boyanmaz (--e renklerin içindeyken degrade ve 60 px'lik gölge her karede baştan boyanıyordu) */ .k3__cam::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: var(--e, 0); will-change: opacity; background: linear-gradient(155deg, rgba(236, 243, 252, 0.5) 0%, rgba(206, 221, 243, 0.26) 48%, rgba(240, 246, 253, 0.4) 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(56, 86, 132, 0.34), 0 34px 60px rgba(20, 30, 60, 0.12); } .k3__murekkep { position: absolute; inset: 0; width: 100%; height: 100%; } .k3__cubuk { width: 384px; height: 804px; pointer-events: none; will-change: transform; } /* uygulamalar yan yana; geçişte Android'deki gibi kayar */ .k-uyglar { position: absolute; inset: 0; background: #0B0B0C; } .k-uyglar > .uyg { will-change: transform; } /* etiketler: katmanın yanında, ince bir çizgiyle bağlı */ .katman__etiketler { position: absolute; inset: 0; pointer-events: none; } .katman__cizgiler { position: absolute; inset: 0; } /* çizgiler ve noktalar yalnız dönüşümle yer değiştirir (SVG'deyken bütün katman her karede baştan boyanıyordu): çizgi 1 px'lik bir kutunun döndürülüp uzatılması, nokta bir daire */ .k-hat, .k-nokta { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; } .k-hat { width: 1px; height: 1px; margin-top: -0.5px; background: var(--murekkep); transform-origin: 0 50%; } .k-nokta { width: 5.2px; height: 5.2px; margin: -2.6px 0 0 -2.6px; border-radius: 50%; background: var(--murekkep); } /* camdaki yazıdan alttaki uygulamadaki hedefine kesik bir iz */ /* iz: kesik çizgi (uzunluğu değişir, desen uzamasın diye genişliği), içi boş nokta; rengi kalemin rengi */ .k-hat--iz { height: 1.4px; margin-top: -0.7px; background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px); } .k-nokta--iz { width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 1.6px solid currentColor; background: none; box-sizing: border-box; } .k-etiket { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.35; color: var(--murekkep-2); white-space: nowrap; opacity: 0; will-change: transform, opacity; } .k-etiket b { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--murekkep); } .k-etiket span { transition: color 0.25s ease; } /* o anki moda göre: Çiz'de OSNote'un katmanı, Dokun'da uygulama */ .k-etiket--vurgu span { color: var(--murekkep); font-weight: 600; } /* Dokun: dokunuş camdan uygulamaya iner (halka, kesik çizgi, halka) */ .k-halka { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--murekkep), 0 0 0 4px rgba(17, 17, 17, 0.08); opacity: 0; will-change: transform, opacity; } .k-hat--dokun { height: 1.6px; margin-top: -0.8px; color: var(--murekkep); background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); } .k-aciklama { display: none; position: absolute; left: 0; right: 0; bottom: max(18px, 3vh); text-align: center; font-size: 14px; line-height: 1.5; color: var(--murekkep-2); opacity: 0; text-wrap: balance; } /* ============================================================ BÖLÜMLER */ .bolum { position: relative; padding: clamp(80px, 10vh, 124px) var(--kenar); } /* zeminler sırayla: giriş gri, uygulamalar beyaz, sonra gri / beyaz */ .bolum--cubuk { background: var(--kagit); } .bolum--sekil { background: var(--sayfa); } .bolum--sayfa { background: var(--kagit); } /* --- Hızlı Notlar: koyu sahne. Solda yatay tablette defter (üstünde kalemin yuvasına pay), sağda başlık, metin, sahnenin adımları, bilgiler ve düğmeler. Dar ekranda alt alta. Tabletin ölçeği sütununa ve ekranın yüksekliğine göre (ekranlar.js › defterKur) --- */ .bolum--defter { background: #0F0F11; color: #F3F3F5; } .bolum--defter .etiket { color: #FF8A73; } .bolum--defter .baslik { color: #fff; } .bolum--defter .bolum__on { color: rgba(255, 255, 255, 0.7); } .bolum--defter .bolum__on b { color: #fff; } .defter-sahne { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(290px, 0.78fr); gap: clamp(40px, 5vw, 96px); align-items: center; } .defter-sahne__cihaz { min-width: 0; margin: 0; padding-top: 24px; } .defter-sahne .tablet { --k: 0.8; } .defter-sahne__yazi { min-width: 0; } .defter-sahne__yazi .baslik { margin-top: 12px; } .defter-sahne__yazi .bolum__on { margin-top: 18px; } .olgular--koyu { border-top-color: rgba(255, 255, 255, 0.16); } .olgular--koyu dt { color: rgba(255, 255, 255, 0.55); } .olgular--koyu dd { color: #fff; } .defter-sahne__dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .bolum--defter .dugme--cizgi { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } .bolum--defter .dugme--cizgi:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); } /* defterin ekranı (uygulamadaki gibi tam ekran: durum çubuğu yok): beyaz, noktalı kâğıt (orta sıklık); sağ üstte yakınlaştırma ve kilit, sol altta sayfa göstergesi. Çubuk kutu.js'ten, kâğıdın üstünde (yaklaşık 57 px) */ .uyg--defter { background: #fff; } .n-kagit { position: absolute; left: 0; right: 0; top: 57px; bottom: 0; background-image: radial-gradient(circle, rgba(42, 36, 39, 0.24) 0 1.25px, transparent 1.7px); background-size: 28px 28px; background-position: 14px 12px; } .n-yakin, .n-kilit, .n-sayfa { position: absolute; z-index: 4; display: grid; place-items: center; font-family: var(--android); font-weight: 500; color: #fff; background: #2A2A2D; } .n-yakin { right: 14px; top: 70px; height: 27px; padding: 0 11px; border-radius: 14px; font-size: 13.5px; } .n-kilit { right: 14px; top: 104px; width: 42px; height: 42px; border-radius: 50%; } .n-kilit svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; } .n-sayfa { left: 12px; bottom: 12px; height: 27px; padding: 0 12px; border-radius: 14px; font-size: 13px; letter-spacing: 0.04em; } /* adımlar: alt alta; şimdiki beyaz, bitenler yeşil tikli */ .adimlar { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: adim; } .adimlar li { position: relative; display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; font-size: 16px; color: rgba(255, 255, 255, 0.58); counter-increment: adim; transition: color 0.2s ease; } .adimlar li::before { content: counter(adim); flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, 0.75); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .adimlar li b { color: #fff; } .adimlar li[data-durum="simdi"] { color: #fff; } .adimlar li[data-durum="simdi"]::before { background: #fff; color: #111; box-shadow: none; } .adimlar li[data-durum="tamam"]::before { content: "✓"; background: #2E9D55; color: #fff; box-shadow: none; } .simge--dolu { fill: currentColor; stroke: none; } /* metin içindeki simge: ⋯ (uygulamanın "daha fazla" düğmesi) ve → (yol: Ayarlar → Gizlilik). Yazı tiplerinde bu işaretler yok, sistem yazı tipine düşüyorlardı */ .simge--satir { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; } .simge--ok { width: 1em; height: 1em; vertical-align: -0.16em; stroke-width: 2; } /* ⊥ (dik), PDF'in içinde: Belge'de (Lora) yok */ .p-dik { display: inline-block; width: 0.84em; height: 0.84em; margin: 0 0.04em; vertical-align: -0.06em; fill: none; stroke: currentColor; stroke-width: 1.15; } /* --- kalem kutusu: solda başlık ve liste; sağda (yapışık) kutu ve seçilen parçanın kartı, altında açıklama --- Kutu ızgaralı bir sayfanın üstünde (uygulamanın Kareli sayfası gibi): kutunun yarı saydam gövdesi açık zeminde tabletteki gibi görünür. Geniş sahnede kutu üstte yatay, kart düğmesinin altında; dar sahnede kutu solda dik, kart yanında (ekranlar.js › anatomiKur yerleştirir, yüksekliği açık karta göre verir). */ .anatomi { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 88px); align-items: start; } .anatomi__sahne { position: sticky; top: 100px; } .anatomi__ekran { position: relative; min-height: 180px; padding: 0 clamp(16px, 2.4vw, 28px); border-radius: 28px; overflow: hidden; transition: height 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); background-color: #FDFDFD; background-image: linear-gradient(rgba(60, 60, 67, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 60, 67, 0.16) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1), 0 30px 60px -34px rgba(14, 16, 22, 0.3); } .anatomi__ekran .kk, .anatomi__ekran .kc { transition: left 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); } .kk--gizli { display: none; } /* kartı olmayan parçanın yeri: kutunun üstünde kehribar halka */ .anatomi__isik { position: absolute; z-index: 8; border-radius: 999px; box-shadow: 0 0 0 2px #FFB300, 0 0 0 7px rgba(255, 179, 0, 0.22); pointer-events: none; } /* seçilen düğmenin açıklaması kartın altında (iki satırlık yer tutar: değişince sayfa kaymasın) */ .anatomi__aciklama { margin-top: 16px; min-height: 3.2em; max-width: 38em; font-size: 15px; line-height: 1.6; color: var(--murekkep-2); text-wrap: pretty; } .anatomi__yazi .bolum__on { margin-top: 20px; } .anatomi__liste { display: grid; margin-top: 30px; border-top: 1px solid var(--cizgi-koyu); } .anatomi__liste button { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 16px 12px 16px 16px; border: 0; border-bottom: 1px solid var(--cizgi); background: none; text-align: left; transition: background-color 0.15s ease; } .anatomi__liste button:hover { background: rgba(17, 17, 17, 0.035); } .anatomi__liste b { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.3; } .anatomi__liste span { font-size: 15px; line-height: 1.55; color: var(--murekkep-2); } .anatomi__liste [aria-pressed="true"] { background: var(--sayfa); box-shadow: inset 3px 0 0 var(--kirmizi); } .anatomi__liste [aria-pressed="true"] span { color: var(--murekkep); } .cubuk__not { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cizgi); font-size: 14.5px; line-height: 1.7; color: var(--murekkep-2); } .cubuk__not b { color: var(--murekkep); } /* --- şekiller --- */ .sekil { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 88px); align-items: center; } .sekil__metin .bolum__on { margin-top: 20px; } /* uygulamadaki gibi: tam açılar koyu kenarlı sarı yazı */ .acilar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; } .acilar__ad { margin-right: 6px; font-size: 13px; font-weight: 700; color: var(--murekkep-2); } .acilar span:not(.acilar__ad) { padding: 4px 8px 3px; border-radius: 7px; background: #1A1A1E; color: #FFC107; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } .sekil__deneme { display: flex; align-items: flex-start; gap: 10px; margin: 28px 0 16px; font-size: 15.5px; font-weight: 700; } .sekil__deneme .simge { margin-top: 4px; color: var(--kirmizi); } .sekil__sahne { margin: 0; justify-self: center; } .sekil__sahne .tablet { --k: 0.72; } .tablet__murekkep[data-sekil-tuval] { pointer-events: auto; touch-action: none; } /* --- sayfa ve ekran görüntüsü --- */ /* solda yazı ve ekran görüntüsü kartı; sağda telefon ve Sayfa kartı (kart telefonun kenarına biner) */ .sayfa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 104px); align-items: center; } .sayfa__sahne { display: flex; align-items: flex-end; } .sayfa__tel { flex: none; } .sayfa__tel .tel { --k: 0.86; } /* uygulamada kart ekranın üstünde açılır; burada okunsun diye telefonun kenarından dışarı taşar (yalnız kenarına biner: yazının üstüne düşmesin) */ .sayfa__sahne .kc--sayfa { z-index: 2; flex: none; margin: 0 0 120px -44px; } .sayfa__yazi { max-width: 34rem; } .sayfa__yazi .bolum__on { margin-top: 20px; } .tel__kagit { --c: rgba(17, 17, 17, 0.14); position: absolute; inset: 0; z-index: 4; pointer-events: none; background-color: var(--zemin, #FAFAFA); opacity: var(--opak, 0.6); transition: opacity 0.15s linear, background-color 0.2s ease; } .tel__kagit--koyu { --c: rgba(255, 255, 255, 0.16); } .tel__kagit[data-desen="kareli"] { background-image: linear-gradient(var(--c) 1px, transparent 1px), linear-gradient(90deg, var(--c) 1px, transparent 1px); background-size: 30px 30px; } .tel__kagit[data-desen="cizgili"] { background-image: repeating-linear-gradient(180deg, transparent 0 33px, var(--c) 33px 34px); } .tel__kagit[data-desen="noktali"] { background-image: radial-gradient(circle at 15px 15px, var(--c) 1.6px, transparent 2px); background-size: 30px 30px; } .yakala { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--cizgi); } .yakala__baslik { font-family: var(--serif); font-size: 28px; font-weight: 800; } .yakala__metin { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--murekkep-2); } .yakala .kc--goruntu { margin-top: 18px; } /* çalışan kartlar (Sayfa, Ekran görüntüsü): uygulamadaki kartın kendisi, düğmeleri gerçek */ .kc--canli { --dp: 1.36px; position: relative; z-index: auto; pointer-events: auto; user-select: auto; -webkit-user-select: auto; } .kc--canli.kc--sayfa { --kc-en: 252; } .kc--canli.kc--goruntu { --kc-en: 240; } .kc--canli button { margin: 0; border: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .kc--canli button:focus-visible, .kc--canli input:focus-visible { outline: 2px solid #F2ECEF; outline-offset: 2px; } .kc__bolme > button { flex: 1; display: grid; place-items: center; min-width: 0; padding: 0; overflow: hidden; border-radius: 999px; background: none; font-size: calc(12.5 * var(--dp)); font-weight: 500; color: #A0969B; white-space: nowrap; transition: background-color 0.16s ease, color 0.16s ease; } .kc__bolme--desen > button { font-size: calc(11.5 * var(--dp)); } .kc__bolme > [aria-checked="true"] { background: #F2ECEF; color: #221E20; } .kc__bolme > button:hover:not([aria-checked="true"]) { color: #EDE6EA; } .kc__kagit-sec { display: flex; justify-content: space-between; margin-top: calc(10 * var(--dp)); } .kc__kagit-sec button { position: relative; width: calc(34 * var(--dp)); height: calc(34 * var(--dp)); padding: 0; border-radius: 50%; background: none; } .kc__kagit-sec button::before { content: ""; position: absolute; inset: calc(6 * var(--dp)); border-radius: 50%; background: var(--r); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .kc__kagit-sec [aria-checked="true"]::after { content: ""; position: absolute; inset: calc(1.75 * var(--dp)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--dp)) #EDE6EA; } .kc__kagit-sec [data-deger="#FAFAFA"] { --r: #FAFAFA; } .kc__kagit-sec [data-deger="#FDF6E3"] { --r: #FDF6E3; } .kc__kagit-sec [data-deger="#FDFBF7"] { --r: #FDFBF7; } .kc__kagit-sec [data-deger="#E9EEF5"] { --r: #E9EEF5; } .kc__kagit-sec [data-deger="#1E1E2E"] { --r: #1E1E2E; } .kc__kagit-sec [data-deger="#282C34"] { --r: #282C34; } .kc--canli .kc__secenek { width: 100%; text-align: left; transition: background-color 0.16s ease; } .kc--canli .kc__secenek:hover { background: #3A3436; } .kc--canli .kc__secenek:active { background: #F2ECEF; color: #221E20; } /* opaklık kaydırıcısı (DSlider): 4 dp ray, dolu kısmı açık, 20 dp başparmak; değeri sağda */ .kc__kaydir--canli input[type="range"] { flex: 1; min-width: 0; height: calc(30 * var(--dp)); margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; } .kc__kaydir--canli input[type="range"]::-webkit-slider-runnable-track { height: calc(4 * var(--dp)); border-radius: 999px; background: linear-gradient(90deg, #EDE6EA var(--y, 90%), rgba(255, 255, 255, 0.14) var(--y, 90%)); } .kc__kaydir--canli input[type="range"]::-webkit-slider-thumb { width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); margin-top: calc(-8 * var(--dp)); border-radius: 50%; background: #F2ECEF; box-shadow: 0 calc(1 * var(--dp)) calc(1.5 * var(--dp)) rgba(0, 0, 0, 0.28); -webkit-appearance: none; appearance: none; } .kc__kaydir--canli input[type="range"]::-moz-range-track { height: calc(4 * var(--dp)); border-radius: 999px; background: rgba(255, 255, 255, 0.14); } .kc__kaydir--canli input[type="range"]::-moz-range-progress { height: calc(4 * var(--dp)); border-radius: 999px; background: #EDE6EA; } .kc__kaydir--canli input[type="range"]::-moz-range-thumb { width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); border: 0; border-radius: 50%; background: #F2ECEF; } .kc__kaydir--canli output { flex: none; width: calc(44 * var(--dp)); font-size: calc(11 * var(--dp)); font-weight: 500; color: #A0969B; text-align: right; font-variant-numeric: tabular-nums; } /* sayfanın kaleminin kartlarındaki düğmeler (kalem.js): renk, kalınlık, şekil, satır, hızlı sıra, onay, kalem seçici */ .kc__onizleme { display: block; } .kc__renk-sec { display: flex; margin-top: calc(6 * var(--dp)); } .kc__renk-sec button { position: relative; flex: 1; height: calc(34 * var(--dp)); padding: 0; background: none; } .kc__renk-sec button::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(18 * var(--dp)); height: calc(18 * var(--dp)); margin: calc(-9 * var(--dp)) 0 0 calc(-9 * var(--dp)); border-radius: 50%; background: var(--r); } .kc__renk-sec [aria-checked="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(25.5 * var(--dp)); height: calc(25.5 * var(--dp)); margin: calc(-12.75 * var(--dp)) 0 0 calc(-12.75 * var(--dp)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--dp)) #EDE6EA; } .kc__renk-sec [data-deger="#1D1B1E"]::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .kc__renk-sec [data-deger="#1D1B1E"] { --r: #1D1B1E; } .kc__renk-sec [data-deger="#FFFFFF"] { --r: #FFFFFF; } .kc__renk-sec [data-deger="#E5484D"] { --r: #E5484D; } .kc__renk-sec [data-deger="#F76B15"] { --r: #F76B15; } .kc__renk-sec [data-deger="#FFC53D"] { --r: #FFC53D; } .kc__renk-sec [data-deger="#30A46C"] { --r: #30A46C; } .kc__renk-sec [data-deger="#0090FF"] { --r: #0090FF; } .kc__renk-sec [data-deger="#8E4EC6"] { --r: #8E4EC6; } .kc__boylar > button, .kc__sekiller > button { flex: 1; display: grid; place-items: center; height: calc(32 * var(--dp)); padding: 0; border-radius: 999px; background: #2E292B; transition: background-color 0.15s ease; } .kc__sekiller > button { height: calc(36 * var(--dp)); } .kc__boylar > [aria-checked="true"], .kc__sekiller > [aria-checked="true"] { background: #F2ECEF; } .kc__boylar > button:hover:not([aria-checked="true"]), .kc__sekiller > button:hover:not([aria-checked="true"]) { background: #3A3436; } .kc__sekiller svg { width: calc(18 * var(--dp)); height: calc(18 * var(--dp)); } button.kc__satir { width: 100%; border-radius: 999px; background: none; text-align: left; transition: background-color 0.15s ease; } button.kc__satir:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); } button.kc__satir:disabled, .kc__secenek:disabled, .kc__hizli button:disabled { opacity: 0.4; cursor: default; } .kc--menu .kc__satirlar > :first-child { margin-right: calc(32 * var(--dp)); } .kc--hizli .kc__satirlar > :first-child { margin-right: 0; } .kc__hizli { display: flex; gap: calc(6 * var(--dp)); margin-right: calc(36 * var(--dp)); } .kc__hizli button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--dp)); min-width: 0; height: calc(52 * var(--dp)); padding: 0 calc(2 * var(--dp)); border-radius: calc(14 * var(--dp)); background: #2E292B; } .kc__hizli .kc__simge { width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); } .kc__hizli span { max-width: 100%; overflow: hidden; font-size: calc(10.5 * var(--dp)); font-weight: 500; color: #A0969B; white-space: nowrap; text-overflow: ellipsis; } .kc__ayrac { display: block; height: 1px; margin: calc(6 * var(--dp)) 0 calc(4 * var(--dp)); background: rgba(255, 255, 255, 0.09); } .kc--hizli .kc__kapat { top: calc(20 * var(--dp)); } button.kc__kapat { padding: 0; border: 0; cursor: pointer; } button.kc__kapat:hover { background: #3A3436; } .kc__onay > button { flex: 1; display: grid; place-items: center; height: calc(38 * var(--dp)); padding: 0; border-radius: 999px; background: #2E292B; font-size: calc(13.5 * var(--dp)); font-weight: 500; } .kc__onay > .kc__tamam { background: #E5484D; color: #FFFFFF; font-weight: 600; } .kc__onay > button:hover { filter: brightness(1.12); } .kc__not--alt { margin-top: calc(8 * var(--dp)); } .kc__kalemler { display: flex; height: calc(52 * var(--dp)); padding: 0 calc(6 * var(--dp)); overflow: hidden; border-radius: 999px; background: #141113; } .kc__kalemler button { width: calc(36 * var(--dp)); height: 100%; padding: 0; background: none; } .kc__kalemler svg { display: block; width: 100%; height: 100%; } .yakala__not { margin-top: 12px; min-height: 1.5em; font-size: 13.5px; line-height: 1.5; color: var(--murekkep-3); } .yakala__not a { color: var(--kirmizi-yazi); font-weight: 800; } /* ============================================================ DENE */ .dene { position: relative; background: var(--sayfa); padding: clamp(96px, 12vh, 150px) var(--kenar); } /* defter solda iki satırı kaplar; sağda başlık, altında kütüphane */ .defter { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; gap: 28px clamp(24px, 3vw, 48px); align-items: start; } .dene__bas { grid-column: 2; grid-row: 1; } .dene__bas .bolum__on { margin-top: 16px; font-size: 16px; } .defter__sol { grid-column: 1; grid-row: 1 / 3; } .defter > .kutuphane { grid-column: 2; grid-row: 2; } .defter__sol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; } /* defterin kalem kutusu (Karma, kutu.js çizer): kâğıt renginde çubuk, üstünde görünmez düğmeler (defter.js); dar sütunda çubuk yana kayar. Açılır pencereler uygulamanınkiler gibi kâğıt renginde, kurşun kalem kenarlı. */ .defter__cubuk { position: sticky; top: 104px; z-index: 6; min-width: 0; } .defter__karma { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; border-radius: 14px; box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1), 0 14px 30px -10px rgba(17, 17, 26, 0.18); } .defter__karma-ic { position: relative; width: var(--karma-en, 100%); height: var(--karma-boy, 64px); } .defter__karma--sag { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); } .defter__karma--sol { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); } .defter__karma--sol.defter__karma--sag { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); } .defter__karma .kr { z-index: 0; } .defter__tus { position: absolute; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease; } .defter__tus:hover:not(:disabled) { background: rgba(42, 36, 39, 0.06); } .defter__tus:focus-visible { outline: 2px solid #C2405F; outline-offset: -2px; } .defter__tus:disabled { cursor: default; } .defter__secim-sil { position: absolute; right: 10px; top: calc(100% + 8px); z-index: 7; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1.5px solid #2A2427; border-radius: 999px; background: #FFFFFF; color: #C2405F; font-size: 13.5px; font-weight: 700; box-shadow: 0.6px 0.6px 0 rgba(42, 36, 39, 0.33), 0 10px 24px rgba(17, 17, 26, 0.14); } .defter__secim-sil[hidden] { display: none; } .defter__secim-sil .simge { width: 18px; height: 18px; } .defter__masa { position: relative; padding: clamp(14px, 2.4vw, 28px); border-radius: 20px; background: var(--masa); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.05); } .defter__sayfa { position: relative; width: 100%; max-width: min(560px, max(300px, calc((100vh - 250px) * 0.7075))); margin: 0 auto; aspect-ratio: 600 / 848; background: #fff; box-shadow: 0 18px 40px rgba(17, 17, 26, 0.16), 0 2px 6px rgba(17, 17, 26, 0.08); } .defter__sayfa canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .defter__murekkep { touch-action: none; cursor: crosshair; -webkit-tap-highlight-color: transparent; } .defter__sayfa[data-arac="kement"] .defter__murekkep { cursor: cell; } .defter__noscript { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--murekkep-2); } .defter__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; max-width: 560px; margin: 16px auto 0; } .defter__sayfalar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .defter__sayfalar > button:not(.defter__ekle) { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--kagit); color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--cizgi-koyu); } .defter__sayfalar > button:disabled { opacity: 0.35; } .defter__sayfalar span { min-width: 92px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .defter__ekle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--kagit); font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--cizgi-koyu); } .defter__ekle:disabled { opacity: 0.4; } .defter__ipucu { flex: 1 1 240px; font-size: 13.5px; line-height: 1.5; color: var(--murekkep-2); } .defter__acilir { position: absolute; top: calc(100% + 8px); left: var(--sol, 8px); z-index: 7; width: max-content; max-width: min(360px, calc(100% - 24px)); padding: 14px 16px 16px; border: 1.6px solid #2A2427; border-radius: 16px; background: #FFFFFF; color: #2A2427; box-shadow: 0.6px 0.6px 0 rgba(42, 36, 39, 0.33), 0 22px 44px rgba(17, 17, 26, 0.16); } .defter__acilir-baslik { font-size: 14px; font-weight: 800; } .defter__acilir-not { max-width: 32em; margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #6A6064; } /* ⋯ menüsü: simge + yazı satırları, kesik çizgili ayraç (KarmaPanels) */ .defter__acilir--menu { min-width: 220px; padding: 6px; } .defter__menu { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #2A2427; font-size: 15px; font-weight: 600; text-align: left; } .defter__menu:hover:not(:disabled) { background: rgba(42, 36, 39, 0.06); } .defter__menu:disabled { opacity: 0.4; } .defter__menu .simge { width: 20px; height: 20px; } .defter__menu-ayrac { display: block; margin: 4px 10px; border-top: 1.5px dashed rgba(42, 36, 39, 0.35); } .secici { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .secici button { min-height: 40px; min-width: 52px; padding: 0 14px; border-radius: 999px; border: 1.3px solid rgba(42, 36, 39, 0.45); background: #F6F2F3; color: #2A2427; font-size: 13.5px; font-weight: 700; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .secici button:hover { border-color: #2A2427; } .secici button[aria-checked="true"] { background: #F9E3EA; border-color: #C2405F; color: #C2405F; } .renkler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .renkler button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: var(--r, #fff); box-shadow: inset 0 0 0 1.2px rgba(42, 36, 39, 0.35); } .renkler button[aria-checked="true"] { box-shadow: inset 0 0 0 1.2px rgba(42, 36, 39, 0.35), 0 0 0 2px #FFFFFF, 0 0 0 4px #C2405F; } .defter__sekiller { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; margin-top: 10px; } .defter__sekiller button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 11px; background: #F6F2F3; color: #2A2427; } .defter__sekiller button:hover { background: #EFE8EA; } .defter__sekiller button[aria-checked="true"] { background: #F9E3EA; color: #C2405F; box-shadow: inset 0 0 0 1.6px #C2405F; } .defter__sekiller .simge { width: 21px; height: 21px; } .defter__klasik { display: grid; grid-template-columns: repeat(6, 32px); gap: 8px; margin-top: 10px; } .defter__klasik .renk { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--r); box-shadow: inset 0 0 0 1.2px rgba(42, 36, 39, 0.3); } .defter__klasik .renk[aria-checked="true"] { box-shadow: inset 0 0 0 1.2px rgba(42, 36, 39, 0.3), 0 0 0 2px #FFFFFF, 0 0 0 4px #C2405F; } .defter__boy { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; min-width: 220px; font-size: 13px; font-weight: 700; } .defter__boy input { grid-column: 1 / -1; width: 100%; accent-color: #C2405F; } .aktar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .aktar button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; padding: 12px; border: 1.3px solid rgba(42, 36, 39, 0.45); border-radius: 14px; background: #F6F2F3; color: #2A2427; } .aktar button:hover { background: #F9E3EA; border-color: #C2405F; } .aktar strong { font-size: 18px; font-weight: 800; } .aktar span { font-size: 12px; color: #6A6064; } .kutuphane { border-top: 2px solid var(--murekkep); padding-top: 14px; } .kutuphane__bas { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .kutuphane h3 { font-family: var(--serif); font-weight: 700; font-size: 23px; } .kutuphane__sayi { font-size: 12.5px; color: var(--murekkep-3); } .kutuphane__sekmeler { display: flex; gap: 4px; margin-top: 10px; padding: 4px; border-radius: 999px; background: var(--masa); } .kutuphane__sekmeler button { flex: 1; min-height: 38px; padding: 0 10px; border: 0; border-radius: 999px; background: none; font-size: 13px; font-weight: 700; color: var(--murekkep-2); } .kutuphane__sekmeler button[aria-selected="true"] { background: var(--kagit); color: var(--murekkep); box-shadow: 0 2px 8px rgba(17, 17, 26, 0.1); } .kutuphane__liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .kkart { min-width: 0; } .kkart__resim { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; padding: 6px; border: 0; border-radius: 12px; background: var(--kagit); box-shadow: inset 0 0 0 1px var(--cizgi); overflow: hidden; } .kkart__resim img { width: 100%; height: 100%; object-fit: contain; } button.kkart__resim:hover { box-shadow: inset 0 0 0 1.5px var(--murekkep); } .kkart--defter .kkart__resim { position: relative; padding: 0; background: #FBF7EE; } .kkart--defter .kkart__resim img { object-fit: cover; } .kkart--defter .kkart__resim::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)); } .kkart__ad { margin-top: 8px; font-size: 13px; font-weight: 800; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kkart__alt { font-size: 12px; line-height: 1.35; color: var(--murekkep-3); } .kkart__is { display: flex; gap: 2px; margin-top: 2px; } .kkart__is button { min-height: 36px; padding: 0 8px 0 0; border: 0; background: none; font-size: 12.5px; font-weight: 800; color: var(--kirmizi-yazi); text-decoration: underline; text-underline-offset: 0.2em; } .kkart__is button + button { color: var(--murekkep-2); padding-left: 8px; } .kutuphane__bos { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--murekkep-3); } .dene__not { margin-top: 28px; text-align: center; font-size: 13.5px; color: var(--murekkep-3); } /* ============================================================ GİZLİLİK */ .gizlilik { position: relative; color: #fff; background: var(--kara); padding: clamp(96px, 12vh, 150px) var(--kenar); } .gizlilik .etiket { color: #FF9C8C; } .gizlilik__ic { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; } .gizlilik__baslik { margin-top: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(38px, 5vw, 72px); line-height: 1.04; letter-spacing: -0.018em; text-wrap: balance; } .gizlilik__metin { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: rgba(255, 255, 255, 0.86); } .gizlilik__olgular { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; } .gizlilik__olgular dt { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .gizlilik__olgular dd { margin: 6px 0 0; font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.25; } .gizlilik__not { margin-top: 26px; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.64); } .gizlilik__not + .gizlilik__not { margin-top: 10px; } .gizlilik__not a { color: #FF9C8C; text-underline-offset: 0.2em; } .gizlilik__not a:hover { color: #fff; } /* ============================================================ İNDİR */ .indir { position: relative; background: var(--kagit); padding: clamp(88px, 11vh, 136px) var(--kenar) clamp(96px, 12vh, 150px); } /* solda başlık ve Play; sağda uygulamanın kartı */ .indir__ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(32px, 6vw, 96px); align-items: center; } .indir__baslik { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.022em; } .indir__on { margin-top: 18px; max-width: 34em; font-size: 17px; line-height: 1.7; color: var(--murekkep-2); } .indir__diller { margin-top: 12px; max-width: 34rem; font-size: 13.5px; line-height: 1.75; color: var(--murekkep-3); } .indir__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 28px; } .uygulama-kart { margin: 0; display: grid; justify-items: center; gap: 16px; padding: 26px 26px 22px; border-radius: 28px; background: var(--sayfa); box-shadow: inset 0 0 0 1px var(--cizgi); } .uygulama-kart__ust { display: flex; align-items: center; gap: 14px; justify-self: stretch; padding-bottom: 16px; border-bottom: 1px solid var(--cizgi-koyu); } .uygulama-kart__simge { width: 60px; height: 60px; border-radius: 15px; box-shadow: 0 6px 16px rgba(17, 17, 26, 0.18); } .uygulama-kart__ust p { display: grid; gap: 2px; } .uygulama-kart__ust b { font-family: var(--serif); font-weight: 800; font-size: 24px; line-height: 1.1; } .uygulama-kart__ust span { font-size: 13px; color: var(--murekkep-3); } .uygulama-kart__kod { width: 168px; height: 168px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--cizgi); } .uygulama-kart figcaption { max-width: 20em; text-align: center; font-size: 13px; line-height: 1.5; color: var(--murekkep-2); } /* ücretsiz ve Pro: yan yana iki kart, madde madde */ .pro { margin-top: clamp(56px, 7vw, 88px); } .pro__baslik { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.01em; } .pro__iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 22px; } .pro__kart { padding: 24px 26px 26px; border-radius: 22px; background: var(--sayfa); } .pro__kart--pro { background: var(--kara); color: #fff; } .pro h4 { font-family: var(--serif); font-weight: 700; font-size: 22px; } .pro__kart ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .pro__kart li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.55; color: var(--murekkep-2); } .pro__kart li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 12px; height: 7px; border-left: 2px solid var(--kirmizi); border-bottom: 2px solid var(--kirmizi); transform: rotate(-45deg); } .pro__kart--pro li { color: rgba(255, 255, 255, 0.8); } .pro__kart--pro li::before { border-color: #FFC107; } .pro__not { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: var(--murekkep-3); } .sorular { margin-top: clamp(64px, 8vw, 104px); padding-top: 26px; border-top: 2px solid var(--murekkep); } .sorular__baslik { font-family: var(--serif); font-weight: 800; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; } .sorular dl { margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); } .sorular div { padding: 18px 0; border-bottom: 1px solid var(--cizgi); } .sorular dt { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.35; } .sorular dd { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--murekkep-2); } /* ============================================================ ALT BİLGİ */ .alt { position: relative; background: var(--murekkep); padding: clamp(72px, 10vh, 120px) var(--kenar) clamp(40px, 6vh, 64px); color: rgba(255, 255, 255, 0.62); } .alt__ic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px 60px; } .alt__217 { display: inline-flex; min-height: 44px; } .alt__217 img { width: 120px; height: auto; filter: invert(1); } .alt__marka p { margin-top: 16px; font-family: var(--serif); font-weight: 500; font-size: 18px; color: rgba(255, 255, 255, 0.84); } .alt__baglar { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: 4px 30px; max-width: 580px; } .alt__baglar a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; transition: color 0.2s ease; } .alt__baglar a:hover { color: #fff; } .alt__kaynak { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.7; } .alt__kaynak p + p { margin-top: 6px; } .alt__kaynak a { color: rgba(255, 255, 255, 0.84); text-underline-offset: 0.2em; } .alt__meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 14px; } /* ekran dışındaki ağır bölümlerin boyaması yaklaşınca */ .gizlilik__ic, .sorular { content-visibility: auto; contain-intrinsic-size: auto 700px; } /* ============================================================ ekran boyları */ @media (max-width: 1180px) { .defter { grid-template-columns: minmax(0, 1fr) 260px; } .anatomi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 1100px) { .kapsul__baglar a { padding: 0 9px; } /* giriş alt alta: başlık, cihaz ve altyazısı, yazı. Tabletin üstünde kalemin yuvasına yer */ .giris { justify-content: flex-start; } .giris__ic { max-width: 1048px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "baslik" "sahne" "on" "eylem" "meta"; } .giris__yazi { display: contents; } .giris__baslik { margin: 0; white-space: normal; text-wrap: balance; font-size: clamp(40px, 6.4vw, 72px); } .giris__sahne { justify-content: center; margin-top: 56px; } .giris__on { grid-area: on; max-width: 34em; margin-top: 34px; } .giris__eylem { grid-area: eylem; } .giris__meta { grid-area: meta; } } @media (max-width: 980px) { .bolum__bas--iki, .gizlilik__ic { grid-template-columns: minmax(0, 1fr); } .kapsul__baglar { display: none; } .kapsul__menu { display: grid; } .kapsul { padding: 8px; } .marka { min-height: 64px; } /* dar ekranda kalem düğmesi yalnız simge; yazılısı girişte */ .kapsul__kalem { width: 44px; padding: 0; } .kapsul__kalem-yazi { display: none; } .giris__eylem .dugme--cizgi { display: inline-flex; } .kapsul--acik .kapsul__baglar { position: absolute; top: calc(100% + 10px); right: 0; display: flex; flex-direction: column; min-width: 230px; margin: 0; padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 18px 48px rgba(17, 17, 26, 0.18), inset 0 0 0 1px rgba(17, 17, 17, 0.08); } .kapsul--acik .kapsul__baglar a { padding: 0 14px; min-height: 48px; font-size: 16px; } .kapsul--acik .kapsul__baglar a[aria-current="true"]::after { left: auto; right: 16px; bottom: 50%; margin: 0 0 -2.5px; } .defter { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .dene__bas, .defter__sol, .defter > .kutuphane { grid-column: auto; grid-row: auto; } .defter__cubuk { top: 92px; } .kutuphane__liste { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } /* dar ekranda: başlık, açıklama, çubuk kartı, liste */ .anatomi { grid-template-columns: minmax(0, 1fr); } .anatomi__yazi { display: contents; } .anatomi__yazi > .baslik { order: 1; } .anatomi__yazi > .bolum__on { order: 2; margin-bottom: 8px; } .anatomi__sahne { order: 3; position: relative; top: auto; } .anatomi__liste { order: 4; margin-top: 8px; } .cubuk__not { order: 5; } .sekil { grid-template-columns: minmax(0, 1fr); } .sekil__metin { order: -1; } .sekil__sahne { justify-self: center; } /* dar ekranda: başlık, açıklama, telefon ve altında paneli, Yakala */ .sayfa { grid-template-columns: minmax(0, 1fr); gap: 0; } .sayfa__yazi { display: contents; } .sayfa__yazi > .baslik { order: 1; } .sayfa__yazi > .bolum__on, .sayfa__yazi > .olgular { order: 2; } .sayfa__sahne { order: 3; flex-direction: column; align-items: center; margin-top: 36px; } .sayfa__sahne .kc--sayfa { margin: 22px 0 0; } /* telefonun altındaki kalem kutusunu örtmesin */ .yakala { order: 4; } /* Hızlı Notlar: başlık ve metin, tablet, adımlar, bilgiler, düğmeler */ .defter-sahne { grid-template-columns: minmax(0, 1fr); gap: 0; } .defter-sahne__yazi { display: contents; } .defter-sahne__yazi > .etiket { order: 1; } .defter-sahne__yazi > .baslik { order: 2; } .defter-sahne__yazi > .bolum__on { order: 3; } .defter-sahne__cihaz { order: 4; display: flex; justify-content: center; margin-top: 30px; padding-top: 18px; } .adimlar { order: 5; } .olgular--koyu { order: 6; } .defter-sahne__dugmeler { order: 7; } .gizlilik__olgular { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { /* katman: metin üstte, sahne altında */ .katman__kap { display: block; } .katman__sahne { height: min(78vh, 680px); height: min(78svh, 680px); min-height: 480px; margin-top: 18px; } .katman__sira button { grid-template-columns: minmax(0, 1fr); padding: 12px 0 12px 20px; } } @media (max-width: 860px) { .indir__ic { grid-template-columns: minmax(0, 1fr); align-items: start; } .sorular dl { grid-template-columns: minmax(0, 1fr); } .pro__iki { grid-template-columns: minmax(0, 1fr); } /* telefonda kalemin dili yok: kalem menü kapsülünden açılır */ .kalem__sekme { display: none; } .kapsul__kalem { display: grid; } } @media (max-width: 700px) { .uygulama-kart__kod, .uygulama-kart figcaption { display: none; } .uygulama-kart__ust { padding-bottom: 0; border-bottom: 0; } .tablet--giris { display: none; } .tel--giris { display: block; } .giris__sahne { margin-top: 26px; } .giris__not { align-items: flex-start; } .yalniz-tablet { display: none; } .yalniz-telefon { display: inline; } } @media (max-width: 700px) { .alt__ic { grid-template-columns: minmax(0, 1fr); } .alt__baglar { justify-content: flex-start; } .anatomi__liste button { grid-template-columns: minmax(0, 1fr); padding: 14px 10px 14px 14px; } .anatomi__ekran { padding: 0 14px; border-radius: 22px; } } @media (max-width: 560px) { .ust { padding: 16px var(--kenar); } .marka { font-size: 24px; gap: 8px; min-height: 60px; } .marka__simge { width: 30px; height: 30px; border-radius: 8px; } .kapsul { top: 16px; } .kapsul__indir { height: 44px; padding: 0 18px; font-size: 14px; } .kapsul__menu { width: 44px; height: 44px; } .giris { padding-top: 96px; padding-bottom: 40px; } .giris__eylem { gap: 10px; } .giris__eylem .play img { height: 48px; } .giris__eylem .dugme { min-height: 50px; padding: 0 16px; } .giris__baslik { font-size: clamp(36px, 10.4vw, 52px); } .giris__sahne { margin-top: 22px; } .giris__on { font-size: 17.5px; margin-top: 28px; } .play img { height: 52px; } .gizlilik__olgular { grid-template-columns: minmax(0, 1fr); } .defter__masa { padding: 10px; border-radius: 16px; } .defter__cubuk { top: 80px; } .kutuphane__sekmeler button { min-height: 44px; } .defter__sekiller { grid-template-columns: repeat(5, 40px); } .defter__sekiller button { width: 40px; height: 40px; } .defter__klasik { grid-template-columns: repeat(6, 30px); } .defter__klasik .renk { width: 30px; height: 30px; } .sayfa__tel .tel { --k: 0.8; } .sekil__sahne .tablet { --k: 0.52; } } @media (max-width: 380px) { .sayfa__tel .tel { --k: 0.74; } .sekil__sahne .tablet { --k: 0.48; } } @media (max-width: 400px) { /* telefonda kartlar biraz küçük; seçenekler yine de parmakla basılacak kadar */ .kc--canli { --dp: 1.22px; } } @media (max-width: 340px) { .sekil__sahne .tablet { --k: 0.42; } .sayfa__tel .tel { --k: 0.7; } } @media (max-width: 600px) { /* dar ekranda katman etiketleri sığmaz: altta tek satır açıklama */ .k-etiket, .katman__cizgiler { display: none; } .k-aciklama { display: block; will-change: opacity; } } @media (prefers-reduced-motion: reduce) { /* katman: oynamaz, ayrık hâli durur */ .katman__oynat { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }