/* ============================================================ dhyana — ortak tasarım sistemi (studio · soul · shop) Kurumsal kimlik: kimlik.pdf / logo.svg (vektör) ============================================================ */ :root { /* Marka paleti (strateji dokümanı): işlevsel YEŞİL (Studio), terracotta (Soul), doğal TAŞ (Shop), KREM zemin. İsimler uygulamanın sözlüğüyle BİREBİR aynıdır (Tasarım kurulu, Faz 5): eski --indigo/--lilac/--pink/--salmon adları kalktı; iki yüzeyde iki ayrı sözlük tutmak, Faz 2'deki "tanımsız sınıf" hatasının kaynağıydı. */ --forest: #2a5b45; /* Studio */ --terracotta: #c26e45; /* Soul */ --stone: #8a8069; /* Shop */ --cream: #faf7f0; --bg: #faf7f0; --surface: #ffffff; --border: #e7e2d6; --text: #2b332b; --muted: #736b5a; --accent: #2a5b45; /* butonlar/metin — tüm pillarlarda ortak (bütünlük) */ --accent-soft: #e6eee8; /* Pillar accent (eyebrow, vurgu, hero parıltısı) — pillar sınıfıyla değişir */ --accent2: var(--forest); --hero-glow: radial-gradient(560px 340px at 26% 26%, rgba(42,91,69,.20), transparent 70%), radial-gradient(560px 340px at 74% 22%, rgba(138,128,105,.22), transparent 70%), radial-gradient(680px 380px at 50% 0%, rgba(43,51,43,.06), transparent 72%); --green: #3f7a55; /* onay */ --green-soft: #e9f0ea; --amber: #b07d3c; /* uyarı */ --amber-soft: #faf4ea; --radius: 10px; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Playfair Display", Georgia, serif; } /* Pillar temalandırma — vb. Studio varsayılan paletle aynıdır ama sınıfı AÇIKÇA tanımlanır: studio.html `pillar-studio` yazıyordu ve karşılığı yoktu — sessizce hiçbir şey yapmayan bir sınıf, Faz 2'deki `btn-sm` hatasının aynısıdır (Tasarım kurulu, Faz 5). */ body.pillar-studio { --accent2: var(--forest); } body.pillar-soul { --accent2: #c26e45; --hero-glow: radial-gradient(560px 340px at 26% 24%, rgba(194,110,69,.24), transparent 70%), radial-gradient(560px 340px at 76% 20%, rgba(42,91,69,.20), transparent 70%), radial-gradient(680px 380px at 50% 0%, rgba(43,51,43,.05), transparent 72%); } body.pillar-shop { --accent2: #8a8069; --hero-glow: radial-gradient(560px 340px at 24% 26%, rgba(138,128,105,.30), transparent 70%), radial-gradient(560px 340px at 78% 20%, rgba(194,110,69,.18), transparent 70%), radial-gradient(680px 380px at 50% 0%, rgba(43,51,43,.05), transparent 72%); } body.pillar-hub { --hero-glow: radial-gradient(520px 320px at 20% 24%, rgba(42,91,69,.22), transparent 70%), radial-gradient(520px 320px at 50% 14%, rgba(194,110,69,.20), transparent 70%), radial-gradient(520px 320px at 80% 24%, rgba(138,128,105,.24), transparent 70%); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* ---------- Marka logosu (vektör) ---------- */ /* logo.svg kimlik dosyasından çıkarıldı — PNG kırpması torinin tepesini ve harflerin üstünü kesiyordu. Maske tekniği: tek dosya CSS'ten boyanıyor, bu yüzden koyu zemin için ayrı görsele ya da invert filtresine gerek yok. --h artık TÜM logonun yüksekliği (tori dahil); harfler bunun ~%73'ü, eski ölçülerle aynı optik boyut için değerler 1.35x büyütüldü. */ .brand-logo { --h: 40px; --logo: var(--accent); display: inline-block; vertical-align: middle; height: var(--h); width: calc(var(--h) * 840 / 185); background-color: var(--logo); -webkit-mask: url(logo.svg) no-repeat center / contain; mask: url(logo.svg) no-repeat center / contain; } .brand-logo.sm { --h: 23px; } .brand-logo.inv { --logo: #fff5ec; } /* koyu zemin - saf beyaz degil, kirik beyaz */ /* ---------- Topbar + pillar switcher ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 240, 0.94); border-bottom: 1px solid var(--border); } .topbar-in { display: flex; align-items: center; gap: 24px; height: 64px; } .pillars { display: flex; align-items: center; gap: 2px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; } .pillars a { padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: lowercase; transition: color .15s, background .15s; } .pillars a:hover { color: var(--text); } .pillars a.active { background: var(--accent-soft); color: var(--text); } .pillars a.active[data-p="soul"] { color: #c26e45; background: #f2e9df; } .pillars a.active[data-p="shop"] { color: #8a8069; background: #ece8df; } .topbar-cta { display: flex; align-items: center; gap: 10px; } .topbar .brand { display: inline-flex; } /* ---------- Butonlar ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; font-size: 15px; padding: 11px 22px; cursor: pointer; border: 1px solid transparent; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; } .btn.primary { background: var(--accent); color: #fff; } .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(43,51,43,.22); } .btn.ghost { border-color: var(--border); background: var(--surface); color: var(--text); } .btn.ghost:hover { background: var(--accent-soft); } .btn.small { padding: 8px 16px; font-size: 14px; } /* ---------- Hero ---------- */ .hero { padding: 88px 0 40px; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -40% -20% auto; height: 620px; pointer-events: none; background: var(--hero-glow); } .hero > .wrap { position: relative; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--green-soft); color: var(--green); border: 1px solid rgba(63,122,85,.22); font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 6px 14px; border-radius: 999px; margin-bottom: 24px; } .hero h1 { font-size: clamp(36px, 5.6vw, 62px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; max-width: 820px; margin: 0 auto 20px; } .hero h1 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent2); letter-spacing: 0; } .hero p.sub { font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 660px; margin: 0 auto 32px; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } .hero-note { font-size: 13px; color: var(--muted); } /* ---------- Bölüm başlıkları ---------- */ section { padding: 88px 0; } .sec-head { text-align: center; max-width: 660px; margin: 0 auto 56px; } .sec-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent2); margin-bottom: 12px; } .sec-head h2 { font-size: clamp(27px, 3.7vw, 40px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; margin-bottom: 14px; } .sec-head h2 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent2); } .sec-head p { color: var(--muted); font-size: 17px; } /* ---------- Değer şeridi ---------- */ .strip { padding: 40px 0 0; } .strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .strip-item { background: var(--surface); padding: 24px 20px; text-align: center; } .strip-item .big { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .strip-item .small { font-size: 13.5px; color: var(--muted); margin-top: 2px; } /* ---------- Özellik / içerik kartları ---------- */ .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .features-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .fcard { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px 20px; transition: transform .18s, box-shadow .18s; } .fcard:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px rgba(43,51,43,.16); } .fcard .ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); margin-bottom: 14px; } .fcard .ico svg { width: 20px; height: 20px; stroke: var(--text); } .fcard.tint .ico { background: color-mix(in srgb, var(--accent2) 16%, #fff); } .fcard.tint .ico svg { stroke: var(--accent2); } .fcard h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 6px; } .fcard p { font-size: 13.5px; color: var(--muted); line-height: 1.55; } /* ---------- Derin bloklar ---------- */ .deep { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .deep + .deep { margin-top: 96px; } .deep.rev .deep-visual { order: 2; } .deep-text .sec-eyebrow { margin-bottom: 10px; } .deep-text h3 { font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 14px; } .deep-text h3 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent2); } .deep-text > p { color: var(--muted); margin-bottom: 20px; } .deep-list { list-style: none; display: grid; gap: 12px; } .deep-list li { display: flex; gap: 12px; font-size: 15px; } .deep-list li svg { flex: none; width: 20px; height: 20px; margin-top: 2px; } .deep-list li b { font-weight: 600; } .deep-list li span { color: var(--muted); } /* Derin blokta listeden sonra gelen düğme (ör. mağaza bağlantısı) listeye yapışmasın. */ .deep-text .btn { margin-top: 24px; } .deep-visual { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: 0 18px 50px -18px rgba(43,51,43,.14); } /* ---------- Ürün mockup (studio paneli) ---------- */ .mockup-stage { padding: 48px 0 0; position: relative; } .mockup { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(43,51,43,.18), 0 4px 16px rgba(43,51,43,.05); overflow: hidden; max-width: 980px; margin: 0 auto; text-align: left; } .mockup-bar { display: flex; align-items: center; gap: 20px; padding: 0 20px; height: 48px; border-bottom: 1px solid var(--border); background: var(--surface); } .mockup-bar .dots { display: flex; gap: 6px; } .mockup-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: block; } .mockup-bar nav { display: flex; gap: 2px; font-size: 12px; color: var(--muted); font-weight: 500; } .mockup-bar nav span { padding: 4px 10px; border-radius: 999px; } .mockup-bar nav span.on { background: var(--accent-soft); color: var(--text); font-weight: 600; } .mockup-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; padding: 20px; background: var(--bg); } .mcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .mcard h4 { font-size: 13px; font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; } .mcard h4 .tag { font-size: 11px; color: var(--muted); font-weight: 500; } .mrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; } .mrow + .mrow { margin-top: 6px; } .mrow .saat { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); width: 44px; } .mrow .ders { font-weight: 600; } .mrow .kim { color: var(--muted); } .mrow .doluluk { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; } .mrow:nth-child(2) { background: var(--green-soft); } .mrow:nth-child(2) .doluluk { background: rgba(63,122,85,.14); color: var(--green); } .mrow:nth-child(3) { background: var(--accent-soft); } .mrow:nth-child(3) .doluluk { background: rgba(43,51,43,.08); color: var(--text); } .mrow:nth-child(4) { background: var(--amber-soft); } .mrow:nth-child(4) .doluluk { background: rgba(217,118,126,.15); color: var(--amber); } .mstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .mstat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .mstat .n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .mstat .l { font-size: 11.5px; color: var(--muted); } .mstat .d { font-size: 11px; font-weight: 600; color: var(--green); } .mbars { display: flex; align-items: flex-end; gap: 8px; height: 74px; padding-top: 8px; } .mbars i { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--accent-soft); display: block; } .mbars i.g { background: color-mix(in srgb, var(--accent2) 40%, #fff); } .mbars i:last-child { background: var(--accent2); } /* ---------- Telefon mockup ---------- */ .phone { width: 250px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: 28px; padding: 14px; box-shadow: inset 0 0 0 4px var(--surface); } .phone .p-head { display: flex; justify-content: center; padding: 8px 0 12px; } .phone .p-head .brand-logo { --h: 20px; } .p-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 8px; font-size: 11.5px; } .p-card .t { font-weight: 600; font-size: 12px; } .p-card .m { color: var(--muted); font-size: 11px; } .p-btn { display: block; text-align: center; background: var(--accent); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 600; padding: 7px; margin-top: 8px; } .p-pill { display: inline-block; background: var(--green-soft); color: var(--green); border-radius: 999px; font-size: 10px; font-weight: 700; padding: 2px 8px; } .p-pill.amber { background: var(--amber-soft); color: var(--amber); } /* Soul: meditasyon oynatıcı mockup */ .player { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; } .player .cover { aspect-ratio: 16/10; border-radius: 12px; margin-bottom: 16px; background: radial-gradient(120px 120px at 30% 30%, rgba(255,255,255,.5), transparent 60%), linear-gradient(135deg, var(--forest), var(--terracotta) 55%, var(--stone)); display: flex; align-items: center; justify-content: center; } .player .cover svg { width: 44px; height: 44px; stroke: #fff; opacity: .95; } .player .ptitle { font-weight: 700; font-size: 16px; } .player .pmeta { color: var(--muted); font-size: 13px; margin-bottom: 14px; } .player .bar { height: 6px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; } .player .bar > i { display: block; height: 100%; width: 38%; background: var(--accent2); border-radius: 999px; } .player .times { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; } .player .controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 14px; } .player .controls .cbtn { width: 26px; height: 26px; stroke: var(--muted); } .player .controls .play { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; } .player .controls .play svg { width: 22px; height: 22px; fill: #fff; } /* Genel liste satırı (soul dersleri / shop bilgileri) */ .lrow { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; font-size: 13px; } .lrow .lico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; } .lrow b { display: block; font-size: 13.5px; } .lrow span { color: var(--muted); font-size: 12.5px; } /* ---------- Fiyat / plan kartları ---------- */ .pricing { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; } .plans.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; } .plan { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; position: relative; } .plan.featured { background: var(--surface); border-color: var(--text); box-shadow: 0 20px 50px -20px rgba(43,51,43,.22); } .plan .pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 4px 14px; white-space: nowrap; } .plan h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; } .plan .hedef { font-size: 13px; color: var(--muted); min-height: 60px; margin-bottom: 14px; } .plan .price { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; } .plan .price small { font-size: 14px; font-weight: 500; color: var(--muted); } /* Fiyat yerine "Teklife göre" yazan kart — rakam kadar yer kaplamasın diye bir kademe küçük, ama kartların dikey ritmi bozulmasın diye kendi dolgusu var. (Sürüm fiyatları 31 Tem 2026'da şimdilik gizlendi; özgün değerler studio.html'de yorum içinde duruyor.) */ .plan .price.teklif { font-size: 24px; padding: 6px 0; } .plan .limits { font-size: 12.5px; color: var(--muted); margin: 4px 0 18px; } .plan ul { list-style: none; display: grid; gap: 9px; font-size: 13.5px; margin-bottom: 24px; } .plan ul li { display: flex; gap: 9px; align-items: flex-start; } .plan ul li svg { flex: none; width: 16px; height: 16px; margin-top: 3px; } .plan ul li.inherit { color: var(--muted); font-weight: 600; font-size: 12.5px; } .plan .btn { margin-top: auto; } .pricing-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 28px; } /* ---------- Finans tablo ---------- */ .fin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .fin-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11.5px; padding: 8px 10px; border-bottom: 1px solid var(--border); } .fin-table td { padding: 10px; border-bottom: 1px solid var(--border); } .fin-table tr:last-child td { border-bottom: none; } .fin-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .badge { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; } .badge.paid { background: var(--green-soft); color: var(--green); } .badge.wait { background: var(--amber-soft); color: var(--amber); } /* ---------- Shop ürün kartları ---------- */ .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; } .pcard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -14px rgba(43,51,43,.18); } .pcard .pimg { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative; } .pcard .pimg svg { width: 56px; height: 56px; stroke: rgba(43,51,43,.55); } .pcard .pimg .dbadge { position: absolute; top: 10px; left: 10px; background: rgba(43,51,43,.85); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; } .pcard .pbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pcard .ptag { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .pcard h3 { font-size: 14.5px; font-weight: 600; line-height: 1.35; } .pcard .prow { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; } .pcard .pprice { font-weight: 700; font-size: 16px; } .pcard .pprice s { color: var(--muted); font-weight: 500; font-size: 12px; margin-right: 6px; } .pcard .padd { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .pcard .padd svg { width: 16px; height: 16px; } /* Ürün görsel arka planları (fotoğraf yerine marka tonlu döşemeler) */ .img-cream { background: linear-gradient(135deg, #faf5ec, #f3ece0); } /* ---------- Koleksiyon / kategori şeridi ---------- */ .cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cat { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: flex-end; padding: 18px; border: 1px solid var(--border); } .cat h3 { font-size: 16px; font-weight: 700; position: relative; } .cat span { position: relative; font-size: 12px; color: var(--muted); } .cat .cat-in { position: relative; } /* ---------- Hub pillar kartları ---------- */ .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pillar-card { --accent2: var(--forest); position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px 26px 26px; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; } .pillar-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -22px rgba(43,51,43,.22); } .pillar-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 130px; pointer-events: none; background: radial-gradient(240px 150px at 78% 0%, color-mix(in srgb, var(--accent2) 26%, transparent), transparent 70%); } .pillar-card.studio { --accent2: var(--forest); } .pillar-card.soul { --accent2: #c26e45; } .pillar-card.shop { --accent2: #8a8069; } .pillar-card > * { position: relative; } .pc-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: lowercase; color: var(--accent2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .pc-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); } .pillar-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; } .pillar-card h3 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent2); } .pillar-card > p { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; } .pillar-card ul { list-style: none; display: grid; gap: 8px; margin-bottom: 22px; } .pillar-card ul li { display: flex; gap: 9px; font-size: 13.5px; align-items: flex-start; } .pillar-card ul li svg { flex: none; width: 16px; height: 16px; margin-top: 3px; stroke: var(--accent2); } .pc-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--text); } .pc-link svg { width: 18px; height: 18px; transition: transform .15s; } .pillar-card:hover .pc-link svg { transform: translateX(4px); } /* ---------- Alıntı / felsefe ---------- */ .quote { text-align: center; max-width: 760px; margin: 0 auto; } .quote p { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.4; color: var(--text); } .quote .who { font-family: var(--font-ui); font-style: normal; font-size: 14px; color: var(--muted); margin-top: 16px; } /* ---------- SSS ---------- */ .faq { max-width: 720px; margin: 0 auto; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 22px; margin-bottom: 10px; } .faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 20px; color: var(--muted); font-weight: 400; transition: transform .2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { color: var(--muted); font-size: 14.5px; padding-bottom: 18px; } /* ---------- Final CTA ---------- */ .final { text-align: center; } .final-card { background: var(--forest); color: #fff; border-radius: 24px; padding: 72px 32px; position: relative; overflow: hidden; } .final-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(460px 300px at 18% 0%, rgba(42,91,69,.55), transparent 70%), radial-gradient(500px 320px at 88% 108%, rgba(194,110,69,.5), transparent 70%), radial-gradient(420px 260px at 60% 120%, rgba(138,128,105,.35), transparent 72%); } .final-card > * { position: relative; } .final-card .brand-logo { margin: 0 auto 18px; } .final-card h2 { font-size: clamp(25px, 3.5vw, 38px); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; } .final-card h2 em { font-family: var(--font-display); font-style: italic; font-weight: 500; } .final-card p { color: rgba(255,255,255,.78); max-width: 500px; margin: 0 auto 28px; } .final-card .btn.primary { background: #fff; color: var(--forest); } .final-card .btn.primary:hover { box-shadow: 0 8px 24px rgba(0,0,0,.3); } /* Bülten formu */ .news { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } .news input { flex: 1; min-width: 220px; border: none; border-radius: 999px; padding: 13px 20px; font-family: inherit; font-size: 15px; color: var(--text); } .news input::placeholder { color: var(--muted); } /* ---------- Footer ---------- */ footer { padding: 56px 0 40px; } .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--border); } .foot-brand .brand-logo { --h: 30px; margin-bottom: 14px; } .foot-brand p { color: var(--muted); font-size: 13.5px; max-width: 280px; } .foot-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 14px; } .foot-col a { display: block; font-size: 14px; color: var(--text); margin-bottom: 9px; } .foot-col a:hover { color: var(--accent2); } .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; color: var(--muted); } .foot-bottom .links { display: flex; gap: 18px; } .foot-bottom a:hover { color: var(--text); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .features-grid, .features-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } .plans, .plans.cols-3 { grid-template-columns: repeat(2, 1fr); } .shop-grid { grid-template-columns: repeat(2, 1fr); } .cats { grid-template-columns: repeat(2, 1fr); } .strip-in { grid-template-columns: repeat(2, 1fr); } .pillars-grid { grid-template-columns: 1fr; } .deep { grid-template-columns: 1fr; gap: 32px; } .deep.rev .deep-visual { order: 0; } .mockup-body { grid-template-columns: 1fr; } .foot-top { grid-template-columns: 1fr 1fr; } } /* ÜST BAR — dar ekranda İKİ SATIR. Tek satırda marka (182px) + kapı anahtarı (226px) + düğmeler (231px) + iki boşluk (48px) = 687px eder. 1200'lük wrap'in yan boşluğu düşünce bu, ~710px ekranda taşıyordu: "Demo talep et" sağdan 53px dışarı çıkıyor, yani sayfanın BİRİNCİL çağrısı tabletlerde kırpılıyordu. (Aynı taşma 375px telefonda "Giriş yap"ı 104px dışarıda bırakıyordu.) Çözüm daraltmak değil satır bölmek — marka+düğmeler üstte, kapı anahtarı altta ortalanır. Hiçbir öğe gizlenmez. EŞİK 800px, 640 DEĞİL: taşma 640'ın çok üstünde, ~700px'te başlıyor. Bu blok YALNIZ üst barı taşır; ızgaraları tek sütuna indiren kurallar 640'ta kalır, yoksa tablette özellik kartları gereksiz yere tek sütuna düşerdi. */ @media (max-width: 800px) { .topbar-in { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand cta" "pillars pillars"; align-items: center; gap: 10px; height: auto; padding-block: 10px; } .topbar .brand { grid-area: brand; } .topbar-cta { grid-area: cta; justify-self: end; } .pillars { grid-area: pillars; justify-self: center; margin: 0; gap: 0; padding: 3px; } .pillars a { padding: 6px 11px; font-size: 13px; letter-spacing: .04em; } /* "Giriş yap" artık gizlenmiyor: stüdyo sahibi telefondan da giriyor. Gizleme, sığmama sorununu çözmüyordu — sadece görünmez kılıyordu. */ .topbar-cta .hide-sm { display: inline-flex; } .topbar-cta .btn.small { padding: 7px 13px; font-size: 13.5px; } .brand-logo { --h: 32px; } } @media (max-width: 640px) { section { padding: 64px 0; } .features-grid, .features-grid.cols-3, .plans, .plans.cols-3, .shop-grid, .cats { grid-template-columns: 1fr; } .plan .hedef { min-height: 0; } .hero { padding-top: 56px; } .mockup-bar nav { display: none; } .foot-top { grid-template-columns: 1fr; gap: 24px; } } /* Çok dar telefonlar (SE sınıfı). 320px'te logo + iki düğme üst satıra sığmıyor, 23px taşıyordu: kenar boşluğu daralır, logo ve düğmeler küçülür. Öğe gizlemek yerine ölçü küçültülür — "Giriş yap" görünür kalmalı. */ @media (max-width: 380px) { .topbar-in { padding-inline: 14px; } .brand-logo { --h: 27px; } .topbar-cta { gap: 6px; } .topbar-cta .btn.small { padding: 6px 10px; font-size: 12.5px; } } /* ===== Kapı durumu: öne çıkan kart + rozet ===== */ .pillars-grid { grid-template-columns: 1.25fr 1fr 1fr; } .pillar-card.featured { border-color: color-mix(in srgb, var(--accent2) 42%, var(--border)); box-shadow: 0 18px 44px -26px rgba(43,51,43,.28); } .pc-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); } .pc-badge.live { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } @media (max-width: 980px) { .pillars-grid { grid-template-columns: 1fr; } } /* Online ders maketi — görünümü satır içi stilde taşınıyordu, sınıf boştu (Tasarım kurulu, Faz 5). */ .zoom-card { display: grid; gap: 8px; } /* ============================================================ EKRAN GÖRÜNTÜLERİ (tanitim/ekran/*.webp) ============================================================ */ .shot { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px -18px rgba(43,51,43,.16); } .shot-bar { display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 38px; border-bottom: 1px solid var(--border); background: var(--cream); } .shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); display: block; } .shot-bar .adres { margin-left: 10px; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shot img { display: block; width: 100%; height: auto; } /* Hero'daki büyük panel görseli — mockup ile aynı ölçüde durur. */ .shot.hero-shot { max-width: 980px; margin: 0 auto; } /* Telefon çerçevesi içinde gerçek portal ekranı. `.phone`dan ayrıdır: orada kartlar HTML'di, burada tek bir görsel var. */ .phone-shot { width: 250px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: 28px; padding: 10px; box-shadow: inset 0 0 0 4px var(--surface); } .phone-shot img { display: block; width: 100%; height: auto; border-radius: 20px; } /* Ekran görselini taşıyan derin blokta çerçeve iki kez çizilmesin. */ .deep-visual.bare { background: none; border: 0; padding: 0; box-shadow: none; } /* ============================================================ EK MODÜLLER — sürümlerin üstüne tek tek açılan modüller. Fiyat YAZILMAZ (31 Tem 2026 kararı): sürüm fiyatları da "teklife göre". ============================================================ */ .modul-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .modul { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; } .modul h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; } .modul p { font-size: 13.5px; color: var(--muted); line-height: 1.55; } .modul .rozet { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-bottom: 9px; background: var(--accent-soft); color: var(--accent2); } .modul .rozet.ucretsiz { background: var(--green-soft); color: var(--green); } @media (max-width: 960px) { .modul-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .modul-grid { grid-template-columns: 1fr; } .shot-bar .adres { display: none; } }