/* ========================================================================== MCALAB — paylaşılan tasarım sistemi · "Arcade Bold" Parlak sıcak palet · Bricolage Grotesque + Hanken Grotesk · sert ofset gölge. Tüm sayfalar (index, destek, sartlar) bu tek kaynağı kullanır. ========================================================================== */ :root { --paper: #FFF6EE; --paper-2: #FBE9D8; --ink: #1B130E; --ink-soft: #6A574A; --vermilion: #FF4A1C; --cobalt: #2138E8; --sunny: #FFC93C; --peach: #FFDFCB; --sky: #DBE1FF; --butter: #FFEFBB; --mint: #CFF3DC; /* Karanlık temada değişmesi gereken her renk buradan geçer. Aşağıdaki açık değerler, jetonlaştırmadan önceki sabitlerin BİREBİR kopyası: bu adım açık temayı piksel piksel aynı bırakır, o yüzden regresyon karanlık tema devreye girmeden yakalanır. */ --surface: #FFF6EE; /* kart/panel zemini */ --line: #1B130E; /* kenarlık — açıkta ink, karanlıkta ayrı ton */ --ink-card: #3A2C22; /* pastel kart üstü gövde metni */ --ink-body: #33261D; /* blog yazısı gövdesi */ --ink-warm: #4A3428; /* destek metni, alıntı, menü alt yazısı */ --ink-teaser: #4A3A20; --ink-studio: #3A2C14; --ink-box: #2F2A3A; --ink-box-muted: #33406B; --on-accent: #fff; /* vermilyon/kobalt zemin üstü metin */ --on-sunny: #1B130E; /* sarı zemin üstü metin — iki temada da koyu */ --contact-soft: #FFE4D9; --panel: #2A1F18; /* her zaman koyu yüzey (ürün şeridi) */ --panel-2: #1B130E; --panel-ink: #E8DCD0; --panel-title: #FFF6EE; /* koyu panel üstü başlık/kenarlık — karanlıkta DA açık: bu yüzden aşağıdaki karanlık blokta yeniden tanımlanmıyor */ --panel-line: #6B584A; --code-ink: #F3EDE6; --code-cm: #9C8C7D; --ad-bg: #2138E8; --ad-line: #1B130E; --ad-ink: #fff; --ad-ink-soft: #DDE2FF; --screen: #bfe3ff; --header-bg: rgba(255,246,238,.85); --stage-dot: rgba(27,19,14,.10); --chip-bg: rgba(255,255,255,.55); --code-line: rgba(27,19,14,.25); --zebra: rgba(255,255,255,.5); --shadow-color: #1B130E; --shadow: 5px 5px 0 var(--shadow-color); --shadow-lg: 8px 8px 0 var(--shadow-color); --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; --maxw: 1120px; } /* ==== Karanlık tema ======================================================== Üç durum: seçim yoksa sistem tercihi, kullanıcı seçtiyse data-theme kazanır. Jeton listesi iki kez yazılıyor (medya sorgusu + öznitelik) çünkü düz CSS'te bir bildirim bloğunu iki seçiciye paylaştırmanın başka yolu yok. Palet sıcak eksende: saf siyah ve nötr gri YOK — #15100C kırmızı-sarıya çekik, marka kimliği koyu zeminde de duruyor. Sert ofset gölge kaldırılmadı, rengi zeminden AÇIK bir tona çevrildi; siyah gölge karanlıkta görünmez oluyordu. */ :root[data-theme="dark"] { --paper: #15100C; --paper-2: #241A13; --surface: #20170F; --line: #92715C; --ink: #EFE3D7; --ink-soft: #B9A392; --ink-card: #E4D6C8; --ink-body: #E4D6C8; --ink-warm: #D8C6B6; --ink-teaser: #E4D6C8; --ink-studio: #3A2C14; --ink-box: #E4D6C8; --ink-box-muted: #C9D2FF; --vermilion: #FF8154; --cobalt: #93A6FF; --sunny: #FFD25E; --peach: #3B241A; --sky: #20264A; --butter: #3A2E12; --mint: #143221; --on-accent: #15100C; --on-sunny: #15100C; --contact-soft: #4A1E0C; --panel: #2A1F18; --panel-2: #241A13; --panel-ink: #E8DCD0; --panel-line: #826552; --code-ink: #F3EDE6; --code-cm: #A89684; --ad-bg: #26327E; --ad-line: #6D7CDB; --ad-ink: #fff; --ad-ink-soft: #C9D2FF; --header-bg: rgba(21,16,12,.85); --stage-dot: rgba(239,227,215,.10); --chip-bg: rgba(255,255,255,.10); --code-line: rgba(239,227,215,.22); --zebra: rgba(255,255,255,.05); --shadow-color: #46352A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #15100C; --paper-2: #241A13; --surface: #20170F; --line: #92715C; --ink: #EFE3D7; --ink-soft: #B9A392; --ink-card: #E4D6C8; --ink-body: #E4D6C8; --ink-warm: #D8C6B6; --ink-teaser: #E4D6C8; --ink-studio: #3A2C14; --ink-box: #E4D6C8; --ink-box-muted: #C9D2FF; --vermilion: #FF8154; --cobalt: #93A6FF; --sunny: #FFD25E; --peach: #3B241A; --sky: #20264A; --butter: #3A2E12; --mint: #143221; --on-accent: #15100C; --on-sunny: #15100C; --contact-soft: #4A1E0C; --panel: #2A1F18; --panel-2: #241A13; --panel-ink: #E8DCD0; --panel-line: #826552; --code-ink: #F3EDE6; --code-cm: #A89684; --ad-bg: #26327E; --ad-line: #6D7CDB; --ad-ink: #fff; --ad-ink-soft: #C9D2FF; --header-bg: rgba(21,16,12,.85); --stage-dot: rgba(239,227,215,.10); --chip-bg: rgba(255,255,255,.10); --code-line: rgba(239,227,215,.22); --zebra: rgba(255,255,255,.05); --shadow-color: #46352A; } } /* Tarayıcı form denetimleri ve kaydırma çubuğu da temayı izlesin. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* Tema düğmesi: yalnız ilgili simge görünür. */ .theme-toggle .ico-sun, .theme-toggle .ico-moon { display: none; } :root[data-theme="dark"] .theme-toggle .ico-sun { display: block; } :root[data-theme="light"] .theme-toggle .ico-moon { display: block; } :root:not([data-theme]) .theme-toggle .ico-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .ico-moon { display: none; } :root:not([data-theme]) .theme-toggle .ico-sun { display: block; } } .theme-toggle { padding: 9px 11px; } .theme-toggle svg { width: 18px; height: 18px; } /* SVG ikonlar: HTML'de sabit yazılmış stroke renkleri --------------------- */ /* `stroke="#1B130E"` bir SUNUM ÖZNİTELİĞİ; her CSS kuralı onu ezer. Bu yüzden 32 ayrı HTML noktasına dokunmak yerine tek yerden bağlıyoruz. Yapılmazsa karanlık temada bu ikonlar koyu üstüne koyu kalıp sessizce kaybolur — hata vermez, sadece görünmez olur. */ svg[stroke="#1B130E"] { stroke: currentColor; } /* İstisna: aksan zeminli çipler iki temada da açık kalıyor, ikon koyu olmalı. */ .chip.a svg[stroke] { stroke: var(--on-accent); } .chip.b svg[stroke] { stroke: var(--on-sunny); } /* .product-art içindeki stroke="#FFF6EE" her zaman koyu panelin üstünde — iki temada da doğru, dokunulmuyor. */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; background-image: radial-gradient(var(--paper-2) 1.2px, transparent 1.2px); background-size: 22px 22px; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; } a { color: inherit; text-decoration: none; } strong, b { font-weight: 700; } ::selection { background: var(--sunny); color: var(--on-sunny); } :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; } /* i18n toggle -------------------------------------------------------------- */ [data-lang] { display: none; } html[lang="tr"] [data-lang="tr"], html[lang="en"] [data-lang="en"] { display: revert; } /* ==== Header ============================================================== */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 2px solid var(--line); } .header-in { display: flex; align-items: center; justify-content: space-between; height: 66px; } .brand { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 10px; } .brand .sq { width: 34px; height: 34px; background: var(--vermilion); border: 2px solid var(--line); border-radius: 9px; transform: rotate(-8deg); flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: -.03em; color: var(--paper); box-shadow: 2px 2px 0 var(--shadow-color); } .brand .lab { color: var(--vermilion); } .header-cta { display: inline-flex; gap: 10px; align-items: center; } /* ==== Buttons ============================================================= */ .btn { font-family: var(--font-display); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; } .btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); color: var(--ink); } .btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--shadow-color); } .btn.primary { background: var(--vermilion); color: var(--on-accent); } .btn.primary:hover { color: var(--on-accent); } .btn.sm { padding: 9px 15px; font-size: 14px; box-shadow: 3px 3px 0 var(--shadow-color); } .btn.sm:hover { box-shadow: 5px 5px 0 var(--shadow-color); } .btn.ghost { box-shadow: none; background: transparent; } .btn.ghost:hover { transform: none; box-shadow: none; background: var(--ink); color: var(--paper); } .eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--butter); } .eyebrow .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--vermilion); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .28; } } .kicker { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--vermilion); margin-bottom: 10px; } /* ==== Hero =============================================================== */ .hero { padding: 60px 0 36px; } .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: center; } .hero h1 { font-size: clamp(42px, 6.6vw, 82px); margin: 22px 0 0; } .hero h1 .hl { position: relative; white-space: nowrap; color: var(--vermilion); } .hero h1 .hl::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: .06em; height: .34em; background: var(--sunny); z-index: -1; border-radius: 3px; transform: rotate(-1.2deg); } .hero .lead { font-size: clamp(16px, 1.9vw, 20px); color: var(--ink-soft); max-width: 48ch; margin-top: 24px; } .hero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .hero .meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14px; font-weight: 600; color: var(--ink-soft); } .hero .meta > span { display: inline-flex; align-items: center; gap: 8px; } .hero .meta .tick { color: var(--cobalt); flex: none; } /* Hero stage: phone on a bright panel */ .stage { position: relative; border: 2px solid var(--line); border-radius: 24px; background: var(--sky); box-shadow: var(--shadow-lg); padding: 40px 24px; display: grid; place-items: center; overflow: hidden; } .stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--stage-dot) 1.4px, transparent 1.4px); background-size: 18px 18px; } .chip { position: absolute; width: 52px; height: 52px; border: 2px solid var(--line); border-radius: 14px; display: grid; place-items: center; box-shadow: 4px 4px 0 var(--shadow-color); } .chip svg { width: 26px; height: 26px; } .chip.a { top: 26px; left: 26px; background: var(--vermilion); transform: rotate(-10deg); } .chip.b { bottom: 30px; right: 26px; background: var(--sunny); transform: rotate(9deg); } .chip.c { top: 42px; right: 34px; background: var(--paper); transform: rotate(6deg); width: 44px; height: 44px; } /* Phone showing Zıpla (cloud teması, canlı) */ .phone { position: relative; z-index: 1; width: 264px; border: 3px solid var(--line); border-radius: 38px; background: var(--ink); padding: 9px; box-shadow: var(--shadow-lg); } .phone.tilt { transform: rotate(-4deg); } .screen { background: var(--screen); color: var(--ink); border-radius: 30px; overflow: hidden; display: block; } .screen canvas { display: block; width: 100%; height: auto; } /* ==== Sections =========================================================== */ .section { padding: 54px 0; } .section-head { margin-bottom: 32px; } .section-head h2 { font-size: clamp(28px, 4vw, 44px); } /* Principles */ .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .pcard { border: 2px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; } .pcard:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); } .pcard:nth-child(1) { background: var(--peach); } .pcard:nth-child(2) { background: var(--sky); } .pcard:nth-child(3) { background: var(--mint); } .pcard:nth-child(4) { background: var(--butter); } .pcard .ic { width: 46px; height: 46px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); display: grid; place-items: center; margin-bottom: 16px; } .pcard .ic svg { width: 24px; height: 24px; } .pcard h3 { font-size: 19px; margin-bottom: 6px; } .pcard p { font-size: 14.5px; color: var(--ink-card); } /* ==== Product card (Zıpla — dark, featured) ============================== */ /* Ürün kartı iki temada da KOYU panel: sağ yarısı (.product-art) sabit koyu çiziliyor ve içindeki metinler --panel-ink gibi hep-açık jetonlar kullanıyor. Zemin --ink olduğu sürece karanlık temada kart kremleşip yazıyı yutuyordu. */ .product { border: 2px solid var(--line); border-radius: 26px; background: var(--panel-2); color: var(--panel-title); box-shadow: var(--shadow-lg); overflow: hidden; } .product-in { display: grid; grid-template-columns: 1.1fr 1fr; } .product-copy { padding: clamp(28px, 4vw, 48px); } .product-copy .tag { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sunny); } .product-copy h2 { font-size: clamp(40px, 6vw, 66px); color: var(--panel-title); margin: 8px 0 16px; } .product-copy p { color: var(--panel-ink); font-size: 15.5px; max-width: 46ch; } .product-copy .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .product-copy .btns .btn { border-color: var(--panel-title); box-shadow: 4px 4px 0 rgba(255,255,255,.22); } .product-copy .btns .btn:hover { box-shadow: 6px 6px 0 rgba(255,255,255,.32); color: var(--ink); } .product-copy .btns .btn.primary { border-color: var(--line); color: var(--on-accent); } .product-copy .btns .btn.ghost { border: none; box-shadow: none; color: var(--panel-ink); } .product-copy .btns .btn.ghost:hover { background: rgba(255,255,255,.12); color: #fff; } .pills { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .pill { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 7px 13px; border: 2px dashed var(--panel-line); border-radius: 999px; color: var(--panel-ink); } .pill b { color: var(--sunny); font-weight: 800; } .product-art { position: relative; background: repeating-linear-gradient(180deg, transparent 0 38px, rgba(255,255,255,.05) 38px 40px), linear-gradient(200deg, var(--panel), var(--panel-2)); border-left: 2px solid var(--line); display: grid; place-items: center; padding: 24px; } /* Zıpla giriş ekranı animasyonu — oyunun ana menü mini-oynanışının portu. Retro (varsayılan) tema: cam panel + kayan tarama çizgileri, pencere ±8° yatar. */ .menu-demo { position: relative; width: min(340px, 100%); height: 210px; border-radius: 18px; overflow: hidden; border: 2px solid rgba(255,255,255,.14); box-shadow: 5px 5px 0 rgba(0,0,0,.4); background: linear-gradient(180deg, rgba(44,232,218,.16), transparent 70%), rgba(255,255,255,.05); transition: transform .5s cubic-bezier(.45,.05,.2,1); transform-origin: 50% 62%; } .menu-demo .menu-bg { position: absolute; inset: -8px; background-image: repeating-linear-gradient(0deg, transparent 0 26px, rgba(243,240,255,.12) 26px 28px); animation: ziplaScroll 1s linear infinite; } @keyframes ziplaScroll { from { background-position: 0 0; } to { background-position: 0 28px; } } .menu-creature { position: absolute; left: 50%; top: 48%; width: 84px; height: 84px; margin: -42px 0 0 -42px; will-change: transform; z-index: 1; } .menu-fx { position: absolute; opacity: 0; transition: opacity .2s ease, transform .22s ease; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); z-index: 3; font-size: 34px; line-height: 1; } .menu-fx.show { opacity: 1; } .menu-fx.mic { left: 18px; top: 10px; } .menu-fx.tap { left: 50%; bottom: 10px; margin-left: -17px; } .menu-fx.tap.press { transform: translateY(-8px); } .menu-ring { position: absolute; left: 60px; top: 20px; width: 20px; height: 20px; border: 2.5px solid #FFD23F; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 2; } .menu-ring.tap { left: 50%; top: auto; bottom: 40px; margin-left: -10px; border-color: #2CE8DA; } .menu-ring.go { animation: ziplaRing .8s ease-out forwards; } @keyframes ziplaRing { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(2.7); opacity: 0; } } /* ==== Teaser strip (Uygulamalar — çok yakında) ========================== */ .teaser { margin-top: 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; border: 2px dashed var(--line); border-radius: 20px; padding: 22px 26px; background: var(--butter); } .teaser .tico { width: 54px; height: 54px; border: 2px solid var(--line); border-radius: 14px; background: var(--paper); display: grid; place-items: center; box-shadow: 4px 4px 0 var(--shadow-color); transform: rotate(-6deg); } .teaser .tico svg { width: 28px; height: 28px; } .teaser h3 { font-size: 22px; } .teaser p { font-size: 14.5px; color: var(--ink-teaser); margin-top: 4px; max-width: 52ch; } .teaser .tcta { flex: none; } /* ==== Studio ============================================================= */ .studio { border: 2px solid var(--line); border-radius: 26px; background: var(--sunny); color: var(--on-sunny); box-shadow: var(--shadow-lg); padding: clamp(30px, 5vw, 60px); } .studio .kicker { color: var(--on-sunny); } .studio h2 { font-size: clamp(28px, 4.4vw, 50px); max-width: 22ch; margin-bottom: 20px; } .studio p { font-size: 17px; color: var(--ink-studio); max-width: 64ch; margin-bottom: 14px; } .studio p:last-child { margin-bottom: 0; } /* ==== Contact ============================================================ */ .contact { text-align: center; border: 2px solid var(--line); border-radius: 26px; background: var(--vermilion); color: var(--on-accent); box-shadow: var(--shadow-lg); padding: clamp(40px, 6vw, 72px) 28px; } .contact h2 { font-size: clamp(30px, 5vw, 54px); margin-bottom: 14px; } .contact p { color: var(--contact-soft); max-width: 46ch; margin: 0 auto 28px; font-size: 17px; } .contact .btn { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: 6px 6px 0 rgba(0,0,0,.35); font-size: 17px; padding: 15px 26px; } .contact .btn:hover { box-shadow: 9px 9px 0 rgba(0,0,0,.4); color: var(--ink); } /* ==== Article (destek / sartlar) ======================================== */ .article { max-width: 760px; margin: 0 auto; padding: 46px 0 10px; } .article h1 { font-size: clamp(32px, 5.4vw, 52px); margin: 16px 0 8px; } .article .eff { color: var(--ink-soft); font-size: 14px; margin-bottom: 26px; font-weight: 600; } .article .lead { font-size: 18px; color: var(--ink-soft); margin: 8px 0 26px; max-width: 60ch; } .article h2 { font-size: 22px; margin: 34px 0 10px; display: flex; align-items: center; gap: 12px; } .article h2::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--line); border-radius: 5px; background: var(--vermilion); transform: rotate(-8deg); flex: none; } .article p, .article li { font-size: 16px; color: var(--ink-card); } .article a { color: var(--cobalt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } .article a:hover { color: var(--vermilion); } .article ul { margin: 10px 0 10px 4px; list-style: none; display: flex; flex-direction: column; gap: 8px; } .article li { padding-left: 26px; position: relative; } .article li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: var(--sunny); border: 2px solid var(--line); border-radius: 3px; } .article .q { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 17px; margin-top: 20px; } .article .muted { color: var(--ink-soft); font-size: 14.5px; } .article .nav-links { margin-top: 32px; padding-top: 22px; border-top: 2px solid var(--line); font-weight: 600; } .box { border: 2px solid var(--line); border-radius: 18px; background: var(--sky); box-shadow: var(--shadow); padding: 22px 24px; margin: 18px 0; } .box .muted { color: var(--ink-box-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } .box .mail { display: inline-block; margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); text-decoration: none; } .box .mail:hover { color: var(--vermilion); } .box p { color: var(--ink-box); } /* ==== Footer ============================================================= */ .site-footer { border-top: 2px solid var(--line); margin-top: 58px; padding: 40px 0; } .footer-in { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; } .footer-links a:hover { color: var(--vermilion); } .footer-fine { color: var(--ink-soft); font-size: 14px; } /* ==== Reveal (progressive enhancement) ================================== */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } .js .reveal.in { opacity: 1; transform: none; } /* ==== Responsive ========================================================= */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } .grid4 { grid-template-columns: repeat(2, 1fr); } .product-in { grid-template-columns: 1fr; } .product-art { border-left: none; border-top: 2px solid var(--panel-title); min-height: 300px; } .teaser { grid-template-columns: 1fr; text-align: left; } .teaser .tcta { justify-self: start; } } @media (max-width: 560px) { .wrap { padding: 0 20px; } .grid4 { grid-template-columns: 1fr; } .header-cta .btn.primary { display: none; } } /* Başlıkta artık üç düğme var (menü + tema + dil). 360px ve altında sığması için aralığı ve kenar boşluğunu kısıyoruz. */ @media (max-width: 400px) { .wrap { padding: 0 16px; } .header-cta { gap: 6px; } .btn.sm { padding: 9px 12px; } } /* ==== İndirme bloğu ====================================================== Doğrudan indirilen ürünler için (MCAPad). Mağaza bağlantısı olan ürünlerde kullanılmaz — orada indirme zaten mağaza butonu. Sayfanın en üstünde, başlığın hemen altında duruyor: kullanıcı tek satır okumadan ne yapacağını görmeli. Metnin arasına gömülü bir bağlantı bunu yapmıyordu. */ .dl { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; margin: 22px 0 8px; } /* .article a alt çizgi veriyor; makale içindeki bir BUTONA uygulanınca bağlantı gibi görünüyordu. */ .article .dl .btn { text-decoration: none; } .dl .btn.big { font-size: 19px; padding: 18px 30px; border-radius: 16px; box-shadow: var(--shadow-lg); } .dl .btn.big:hover { box-shadow: 11px 11px 0 var(--shadow-color); } .dl .btn.big svg { width: 22px; height: 22px; flex: none; } .dl-meta { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } .dl-meta b { color: var(--ink); } /* Başlık yapışkan (position: sticky) olduğu için #indir gibi bir bağlantıya atlayınca hedef başlığın ALTINDA kalıyordu: kullanıcı indirme butonunu göremiyor, sayfa ortasından başlamış gibi görünüyordu. */ :target, .dl { scroll-margin-top: 96px; } /* Güven şeridi: ücretsiz · Apple taramasından geçti · veri cihazda kalır. İndirme butonunun hemen altında, çünkü kullanıcı "bu dosya güvenli mi" sorusunu tam da indirmeye tıklamadan önce soruyor. */ .trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; } .trust span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--mint); } .trust svg { width: 15px; height: 15px; flex: none; } /* Destek çağrısı: bu uygulamalar ücretsiz, karşılığı diğer ürünleri indirmek. */ .support { border: 2px dashed var(--line); border-radius: 20px; background: var(--peach); padding: 20px 24px; margin: 26px 0 6px; } .support h3 { font-size: 20px; margin-bottom: 6px; } .support p { font-size: 15px; color: var(--ink-warm); margin-bottom: 14px; } .support .btns { display: flex; flex-wrap: wrap; gap: 10px; } /* .article a hem alt çizgi hem kobalt rengi veriyor; buton içine sızınca buton bağlantı gibi görünüyordu. */ .article .support .btn { text-decoration: none; color: var(--ink); } .article .support .btn:hover { color: var(--ink); } /* İndirme sonrası destek kutusu (mcalab.js üretiyor). Tarayıcının alert()'i yerine kendi kutumuz: sayfayı kilitlemiyor ve indirmeyi durdurmuyor. */ .mdl-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(27,19,14,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: mdlIn .16s ease-out; } .mdl { width: 100%; max-width: 460px; background: var(--paper); border: 2px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 28px 28px 22px; animation: mdlUp .18s ease-out; } .mdl h3 { font-family: var(--font-display); font-size: 23px; line-height: 1.2; margin-bottom: 10px; } .mdl p { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; } .mdl .btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .mdl .btns .btn { justify-content: center; text-decoration: none; color: var(--ink); } .mdl > .btn.ghost { display: flex; width: 100%; justify-content: center; } @keyframes mdlIn { from { opacity: 0; } } @keyframes mdlUp { from { opacity: 0; transform: translateY(10px); } } /* İkinci platform: eşit ağırlıkta değil — Mac indirmesiyle yarışmamalı. */ .dl-soon { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 10px 16px; border: 2px dashed var(--line); border-radius: 999px; background: var(--butter); } @media (max-width: 560px) { .dl { gap: 14px; } .dl .btn.big { width: 100%; justify-content: center; } } /* Not: Animasyonlar bilinçli olarak reduced-motion'da da çalışır (site sahibi isteği) — tüm tarayıcılarda (Brave/Chrome/Edge dâhil) tutarlı oynasın diye global kapatma yok. */ /* ========================================================================== Gezinme (nav) — 30 Ağu 2026 Google'ın yayıncı kalite yönergeleri açıkça "erişilebilir gezinme" istiyor (bkz. ADSENSE-RED-DUZELTME-PLANI.md A3). Önceden header'da yalnız logo + dil butonu + indirme CTA'sı vardı; siteyi gezmenin tek yolu footer'dı. ========================================================================== */ .site-nav { display: flex; align-items: center; gap: 4px; margin-left: 22px; } .site-nav a, .nav-drop > summary { font-family: var(--font-display); font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: 10px; border: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; } .nav-drop > summary::-webkit-details-marker { display: none; } .site-nav a:hover, .nav-drop > summary:hover { background: var(--butter); border-color: var(--line); } .site-nav a[aria-current="page"] { background: var(--sunny); color: var(--on-sunny); border-color: var(--line); box-shadow: 2px 2px 0 var(--shadow-color); } .site-nav .caret { width: 12px; height: 12px; transition: transform .15s ease; } .nav-drop[open] > summary .caret { transform: rotate(180deg); } /* Ürünler açılır menüsü:
ile — JS olmadan da açılır/kapanır. */ .nav-drop { position: relative; } .nav-drop .drop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 50; min-width: 230px; background: var(--paper); border: 2px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .nav-drop .drop a { font-size: 14.5px; padding: 9px 12px; border-radius: 9px; } .nav-drop .drop a small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--ink-soft); } .nav-drop .drop a:hover small { color: var(--ink-warm); } /* Mobil: hamburger. 860px altında nav başlığın altına düşen bir panele girer. */ .nav-toggle { display: none; } @media (max-width: 860px) { .nav-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; } .nav-toggle svg { width: 22px; height: 22px; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--paper); border-bottom: 2px solid var(--line); padding: 10px 20px 18px; box-shadow: 0 8px 0 rgba(27,19,14,.08); } .site-nav[hidden] { display: none; } .site-nav a, .nav-drop > summary { padding: 12px 14px; font-size: 17px; } .nav-drop .drop { position: static; box-shadow: none; border: none; border-left: 2px solid var(--line); border-radius: 0; margin: 4px 0 4px 14px; padding: 4px 0 4px 8px; min-width: 0; } } @media (min-width: 861px) { .site-nav[hidden] { display: flex; } } .site-header { position: sticky; } .header-in { position: relative; } /* ========================================================================== Blog — liste + yazı · content/blog/*.md → tools/build-blog.mjs üretir ========================================================================== */ .blog-head { padding: 46px 0 8px; } .blog-head h1 { font-size: clamp(34px, 5.6vw, 58px); margin: 16px 0 10px; } .blog-head .lead { font-size: 18px; color: var(--ink-soft); max-width: 62ch; } /* Etiket filtresi (JS yok — hepsi bağlantı; #hash ile CSS filtreler) */ .tag-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; } .tag-chip { font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 7px 13px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); } .tag-chip:hover { background: var(--butter); } .tag-chip.on { background: var(--sunny); color: var(--on-sunny); box-shadow: 2px 2px 0 var(--shadow-color); } .post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 22px 0 10px; } .post-card { display: flex; flex-direction: column; border: 2px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); padding: 24px 24px 20px; transition: transform .12s ease, box-shadow .12s ease; } .post-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); } .post-card:nth-child(4n+1) { background: var(--peach); } .post-card:nth-child(4n+2) { background: var(--sky); } .post-card:nth-child(4n+3) { background: var(--mint); } .post-card:nth-child(4n+4) { background: var(--butter); } .post-card h2 { font-size: 22px; margin: 10px 0 8px; } .post-card p { font-size: 15px; color: var(--ink-card); flex: 1; } .post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .post-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); } .post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .post-tags span { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; padding: 5px 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--chip-bg); } /* Yazı gövdesi ------------------------------------------------------------ */ .post { max-width: 760px; margin: 0 auto; padding: 40px 0 10px; } .post h1 { font-size: clamp(32px, 5.2vw, 50px); margin: 14px 0 14px; } .post .lead { font-size: 18.5px; color: var(--ink-soft); margin: 14px 0 24px; } .post .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 16px 0 0; border-top: 2px solid var(--line); margin-top: 24px; font-size: 14px; font-weight: 600; color: var(--ink-soft); } .post .byline .who { color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 15px; } .post h2 { font-size: 27px; margin: 44px 0 12px; } .post h3 { font-size: 20px; margin: 30px 0 8px; } .post p, .post li { font-size: 17px; color: var(--ink-body); line-height: 1.72; } .post p { margin: 14px 0; } .post a { color: var(--cobalt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } .post a:hover { color: var(--vermilion); } .post ul, .post ol { margin: 14px 0 14px 4px; display: flex; flex-direction: column; gap: 9px; } .post ul { list-style: none; } .post ul li { padding-left: 26px; position: relative; } .post ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; background: var(--sunny); border: 2px solid var(--line); border-radius: 3px; } .post ol { padding-left: 26px; } .post ol li::marker { font-family: var(--font-display); font-weight: 800; color: var(--vermilion); } .post hr { border: none; border-top: 2px dashed var(--line); margin: 40px 0; } /* Kod: oyunun/uygulamanın gerçek kaynağından alıntılar bu bloklarda duruyor. */ .post code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: .88em; background: var(--butter); border: 1.5px solid var(--code-line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; } .post pre { background: var(--panel-2); color: var(--code-ink); border: 2px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px; margin: 22px 0; overflow-x: auto; } .post pre code { background: none; border: none; padding: 0; font-size: 14px; line-height: 1.65; white-space: pre; color: inherit; } .post pre .cm { color: var(--code-cm); } .post blockquote { border-left: 6px solid var(--vermilion); background: var(--peach); border-radius: 0 16px 16px 0; padding: 16px 22px; margin: 22px 0; } .post blockquote p { margin: 6px 0; color: var(--ink-warm); } .post table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15.5px; } .post .table-scroll { overflow-x: auto; margin: 22px 0; } .post .table-scroll table { margin: 0; } .post th, .post td { border: 2px solid var(--line); padding: 10px 13px; text-align: left; vertical-align: top; } .post th { background: var(--sunny); color: var(--on-sunny); font-family: var(--font-display); font-weight: 800; } .post tbody tr:nth-child(even) td { background: var(--zebra); } /* Yazı sonu: sonraki/önceki + destek kutusu */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 44px 0 0; } .post-nav a { border: 2px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); background: var(--paper); transition: transform .12s ease, box-shadow .12s ease; } .post-nav a:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); color: var(--ink); } .post-nav .dir { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 4px; } .post-nav .ttl { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.25; } .post-nav a.next { text-align: right; } @media (max-width: 760px) { .post-list { grid-template-columns: 1fr; } .post-nav { grid-template-columns: 1fr; } .post-nav a.next { text-align: left; } .post p, .post li { font-size: 16.5px; } } /* ========================================================================== Reklam & iş birliği kutusu (ads@mcalab.com.tr) ========================================================================== */ .adbox { border: 2px solid var(--ad-line); border-radius: 22px; background: var(--ad-bg); color: var(--ad-ink); box-shadow: var(--shadow-lg); padding: 28px 30px; margin: 30px 0; } .adbox h2, .adbox h3 { color: var(--ad-ink); } .adbox h2::before { display: none; } .adbox p { color: var(--ad-ink-soft); font-size: 16px; margin: 10px 0 0; } .adbox .mail { display: inline-block; margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 3.4vw, 28px); color: var(--ad-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; text-decoration-color: var(--sunny); } .adbox .mail:hover { color: var(--sunny); } .adbox .kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .adbox .kinds span { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; padding: 6px 12px; border: 2px solid rgba(255,255,255,.45); border-radius: 999px; } /* Etiket çipi artık