/* Tessera — site stili * * Uygulamanın tasarım dilinden geliyor (Tessera/DesignSystem/Theme.swift): * tek doygun renk (gül), gerisi mürekkep, krem ve çizgi. Gradient yok — * derinlik tek bir ölçülü gölgeden ve 1px çizgiden. */ /* ═══════════ Token ═══════════ */ :root { --gul: #c8415f; --gul-yumusak:#f9e3e9; --gul-derin: #8b1c38; --krem: #fbf6ee; --yuzey: #ffffff; --koyu: #1e1917; --murekkep: #1e1917; --murekkep-2: #5a524f; --murekkep-3: #9a918d; --cizgi: #ece4db; --golge: 0 1px 2px rgba(30,25,23,.04), 0 8px 28px rgba(30,25,23,.07); --golge-hafif:0 1px 2px rgba(30,25,23,.03), 0 3px 12px rgba(30,25,23,.05); --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-xl: 30px; --kap: 1180px; --blm-bosluk: clamp(72px, 10vw, 132px); --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ═══════════ Temel ═══════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--krem); color: var(--murekkep); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.1; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, canvas, svg { display: block; max-width: 100%; } a { color: inherit; } em { font-style: italic; color: var(--gul); } .mono { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; } .kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 24px; } .sprite { position: absolute; width: 0; height: 0; } .atla { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gul); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-m) 0; } .atla:focus { left: 0; } :focus-visible { outline: 2px solid var(--gul); outline-offset: 3px; border-radius: 4px; } /* ═══════════ Görünürlük ═══════════ * * Kritik kural: gizleme YALNIZCA `.js` altında geçerli. 'deki tek * satır çalışmazsa — ya da açığa çıkarma kodu bir hata yüzünden hiç * koşmazsa — sayfa animasyonsuz ama TAM görünür kalır. * * Bir önceki sürüm bunun tersini yapıyordu: içerik varsayılan olarak * opacity:0 idi ve açığa çıkarma sınıfı hiç eklenmediği için sayfanın * tamamı bomboş göründü. Kural artık yapının kendisinde; main.js ayrıca * bir emniyet zamanlayıcısıyla her şeyi zorla açıyor. */ .js .gos { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .js .gos--ac { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .gos { opacity: 1; transform: none; transition: none; } } /* ═══════════ Düğmeler ═══════════ */ .dgm { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: .95rem; font-weight: 500; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; white-space: nowrap; } .dgm:active { transform: scale(.98); } .dgm--buyuk { padding: 15px 30px; font-size: 1rem; } .dgm--dolu { background: var(--gul); color: #fff; } .dgm--dolu:hover { background: var(--gul-derin); } .dgm--cizgi { background: transparent; color: var(--murekkep); border: 1px solid var(--cizgi); } .dgm--cizgi:hover { border-color: var(--murekkep-3); background: var(--yuzey); } .ok { transition: transform .18s ease; } .dgm--cizgi:hover .ok { transform: translateY(2px); } .cip { display: inline-block; font-family: var(--mono); font-size: .7rem; letter-spacing: .03em; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.13); color: rgba(255,255,255,.9); backdrop-filter: blur(8px); } /* ═══════════ Üst çubuk ═══════════ */ .ust { position: sticky; top: 0; z-index: 50; background: rgba(251, 246, 238, .82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s ease; } .ust--kaydi { border-bottom-color: var(--cizgi); } .ust__in { display: flex; align-items: center; gap: 28px; height: 68px; position: relative; } .marka { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.22rem; text-decoration: none; } .marka__im { width: 30px; height: 30px; } .ust__yol { display: flex; gap: 26px; margin-left: auto; } .ust__yol a { font-size: .92rem; color: var(--murekkep-2); text-decoration: none; transition: color .18s ease; } .ust__yol a:hover { color: var(--murekkep); } .ust__son { display: flex; align-items: center; gap: 12px; } .ust__ac { display: none; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--cizgi); border-radius: 10px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .ust__ac span { display: block; width: 16px; height: 1.5px; background: var(--murekkep); transition: transform .2s ease; } .ust__ac[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); } .ust__ac[aria-expanded="true"] span:last-child { transform: translateY(-3.2px) rotate(-45deg); } /* ═══════════ Hero ═══════════ */ .hero { padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 7vw, 88px); } .hero__in { text-align: center; display: flex; flex-direction: column; align-items: center; } .rozet { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep-2); background: var(--yuzey); border: 1px solid var(--cizgi); padding: 7px 15px; border-radius: 999px; box-shadow: var(--golge-hafif); } .rozet__nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--gul); } .hero__baslik { margin: 26px 0 0; font-size: clamp(2.9rem, 8.4vw, 5.6rem); letter-spacing: -.022em; max-width: 14ch; } .hero__giris { margin: 24px 0 0; max-width: 60ch; font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--murekkep-2); } .hero__eylem { margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Sahne */ .sahne { margin: clamp(48px, 6vw, 76px) auto 0; padding: 0 24px; max-width: calc(var(--kap) + 48px); } /* Arka plan hedef fotoğrafın 32 px'lik kopyası: mozaik kurulana kadar çerçeve boş bir koyu dikdörtgen olarak durmasın, fotoğraf oradaymış gibi açılsın. */ .sahne__cerceve { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden; background: var(--koyu) url("../assets/onizleme.jpg") center / cover no-repeat; box-shadow: var(--golge); } .sahne__tuval { width: 100%; height: 100%; display: block; } .sahne__hud { position: absolute; inset: 16px 16px auto; display: flex; justify-content: space-between; pointer-events: none; } .mercek { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 14px)); background: rgba(30, 25, 23, .9); backdrop-filter: blur(10px); color: #fff; padding: 9px 14px; border-radius: var(--r-m); pointer-events: none; display: flex; flex-direction: column; gap: 2px; max-width: 260px; box-shadow: 0 8px 22px rgba(0,0,0,.3); } .mercek__ad { font-size: .86rem; font-weight: 500; line-height: 1.3; } .mercek__alt { color: rgba(255,255,255,.6); font-size: .68rem; } .sahne__alt { margin: 18px auto 0; max-width: 56ch; text-align: center; font-size: .88rem; color: var(--murekkep-3); } /* ═══════════ Bölüm iskeleti ═══════════ */ .blm { padding: var(--blm-bosluk) 0; } .blm--koyu { background: var(--koyu); color: var(--krem); } .blm--koyu .blm__etiket { color: rgba(251,246,238,.5); } .blm--koyu .blm__giris { color: rgba(251,246,238,.68); } .blm--koyu em { color: #f0a8b8; } .blm__etiket { color: var(--murekkep-3); text-transform: uppercase; letter-spacing: .12em; } .blm__baslik { margin: 14px 0 0; font-size: clamp(2rem, 4.6vw, 3.2rem); letter-spacing: -.018em; max-width: 20ch; } .blm__giris { margin: 18px 0 0; max-width: 62ch; font-size: 1.04rem; color: var(--murekkep-2); } /* ═══════════ Adımlar ═══════════ */ .adimlar { margin-top: clamp(40px, 5vw, 60px); display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .adim { background: var(--yuzey); border-radius: var(--r-l); padding: 28px 26px 24px; box-shadow: var(--golge-hafif); display: flex; flex-direction: column; } .adim__no { color: var(--gul); font-size: 1.6rem; font-family: var(--serif); font-weight: 300; letter-spacing: 0; } .adim__baslik { margin-top: 12px; font-size: 1.3rem; } .adim__metin { margin-top: 12px; color: var(--murekkep-2); font-size: .95rem; flex: 1; } .adim__cip { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--cizgi); color: var(--murekkep-3); } /* ═══════════ İkiniz ═══════════ */ .ikili { margin-top: clamp(40px, 5vw, 60px); display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ozellik { background: rgba(255,255,255,.05); border: 1px solid rgba(251,246,238,.12); border-radius: var(--r-l); padding: 28px 26px; } .ozellik__baslik { font-size: 1.24rem; color: var(--krem); } .ozellik__metin { margin-top: 12px; color: rgba(251,246,238,.66); font-size: .95rem; } /* ═══════════ Sekmeler ═══════════ */ .sekme { margin-top: clamp(36px, 4.4vw, 52px); } .sekme__cubuk { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; } .sekme__cubuk::-webkit-scrollbar { display: none; } .sekme__dgm { flex: 0 0 auto; padding: 9px 17px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey); font-family: var(--sans); font-size: .89rem; color: var(--murekkep-2); cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .sekme__dgm:hover { border-color: var(--murekkep-3); } .sekme__dgm[aria-selected="true"] { background: var(--gul); border-color: var(--gul); color: #fff; } .sekme__govde { margin-top: 22px; } .deneyimListe { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .deneyimKart { background: var(--yuzey); border-radius: var(--r-m); padding: 20px 22px; box-shadow: var(--golge-hafif); } .deneyimKart__no { color: var(--gul); } .deneyimKart__baslik { margin-top: 6px; font-family: var(--sans); font-size: 1.02rem; font-weight: 500; } .deneyimKart__metin { margin-top: 8px; color: var(--murekkep-2); font-size: .92rem; } /* ═══════════ Fiyat ═══════════ */ .fiyat { margin-top: clamp(40px, 5vw, 60px); display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; } .plan { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l); padding: 32px 30px; } .plan--one { border-color: var(--gul); box-shadow: var(--golge); } .plan__ad { color: var(--murekkep-3); text-transform: uppercase; letter-spacing: .12em; } .plan__tutar { margin-top: 10px; font-family: var(--serif); font-size: 2.9rem; line-height: 1; } /* Newsreader'da ₺ (U+20BA) yok ve tarayıcı onu Ł'ye benzeyen bir şeyle değiştiriyor. Sembolü sans'a alıyoruz — Inter'de doğru glif var. */ .plan__sim { font-family: var(--sans); font-weight: 400; font-size: .78em; } .plan__birim { font-family: var(--sans); font-size: 1.05rem; color: var(--murekkep-3); } .plan__alt { margin-top: 8px; color: var(--murekkep-3); } .plan__liste { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; } .plan__liste li { position: relative; padding-left: 24px; font-size: .95rem; color: var(--murekkep-2); } .plan__liste li::before { content: ''; position: absolute; left: 0; top: .5em; width: 11px; height: 6px; border-left: 1.6px solid var(--gul); border-bottom: 1.6px solid var(--gul); transform: rotate(-45deg); } .plan__not { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cizgi); font-size: .86rem; color: var(--murekkep-3); } /* ═══════════ Gizlilik ═══════════ */ .gizlilik__in { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; max-width: 66ch; } .gizlilik__ana { font-size: 1.02rem; color: var(--murekkep-2); } .gizlilik__ana strong { color: var(--murekkep); font-weight: 500; } /* ═══════════ Son çağrı ═══════════ */ .son { padding: var(--blm-bosluk) 0; border-top: 1px solid var(--cizgi); } .son__in { text-align: center; display: flex; flex-direction: column; align-items: center; } .son__baslik { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.018em; } .son__metin { margin-top: 16px; max-width: 52ch; color: var(--murekkep-2); } .son__eylem { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .son__not { color: var(--murekkep-3); } /* ═══════════ Hukuki belgeler ═══════════ */ .belge { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 8vw, 104px); } .belge__kap { max-width: 74ch; } .belge__ust { padding-bottom: 28px; border-bottom: 1px solid var(--cizgi); } .belge__baslik { font-size: clamp(2.1rem, 5vw, 3.1rem); letter-spacing: -.018em; } .belge__tarih { margin-top: 12px; color: var(--murekkep-3); } .belge__ozet { margin-top: 28px; padding: 22px 24px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l); font-size: 1rem; } .belge__ozet strong { font-weight: 500; } .belge h2 { margin-top: 46px; font-size: 1.55rem; scroll-margin-top: 88px; } .belge h3 { margin-top: 28px; font-family: var(--sans); font-size: 1.04rem; font-weight: 600; } .belge p { margin-top: 14px; color: var(--murekkep-2); } .belge strong { color: var(--murekkep); font-weight: 500; } .belge ul { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; } .belge ul li { position: relative; padding-left: 20px; color: var(--murekkep-2); } .belge ul li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--gul); } .belge a { color: var(--gul-derin); text-underline-offset: 3px; } .belge__tablo { margin-top: 18px; width: 100%; border-collapse: collapse; font-size: .93rem; } .belge__tablo th, .belge__tablo td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: top; } .belge__tablo th { font-weight: 500; color: var(--murekkep); width: 32%; } .belge__tablo td { color: var(--murekkep-2); } .belge__geri { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px; font-size: .92rem; color: var(--murekkep-2); text-decoration: none; } .belge__geri:hover { color: var(--murekkep); } /* ═══════════ Dip ═══════════ */ .dip { background: var(--koyu); color: var(--krem); padding: clamp(48px, 6vw, 72px) 0 26px; } .dip__in { display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-between; } .dip__marka { display: flex; align-items: flex-start; gap: 14px; } .dip__im { width: 44px; height: 44px; } .dip__slogan { font-family: var(--serif); font-size: 1.28rem; line-height: 1.25; } .dip__kolonlar { display: flex; flex-wrap: wrap; gap: 44px; } .dip__kolon { display: flex; flex-direction: column; gap: 9px; } .dip__baslik { color: rgba(251,246,238,.42); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 3px; } .dip__kolon a { font-size: .92rem; color: rgba(251,246,238,.72); text-decoration: none; transition: color .18s ease; } .dip__kolon a:hover { color: var(--krem); } .dip__son { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(251,246,238,.12); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; color: rgba(251,246,238,.4); } /* ═══════════ Dar ekran ═══════════ */ @media (max-width: 860px) { .ust__ac { display: flex; } .ust__son .dgm { display: none; } .ust__yol { position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; gap: 0; background: var(--krem); border-bottom: 1px solid var(--cizgi); padding: 8px 24px 18px; display: none; } .ust__yol--acik { display: flex; } .ust__yol a { padding: 13px 0; border-bottom: 1px solid var(--cizgi); } .ust__yol a:last-child { border-bottom: 0; } /* En-boy oranı her ekranda katmanlarınkiyle (16:10) aynı kalıyor. Farklı bir oran, mozaiği kırpmayı ve hücre ızgarasını kaydırmayı gerektirirdi — merceğin yanlış anıyı göstermesinin en kolay yolu bu. */ .sahne__cerceve { border-radius: var(--r-l); } .mercek { max-width: 200px; } .dip__in { flex-direction: column; gap: 32px; } } @media (max-width: 520px) { .hero__eylem .dgm { width: 100%; } .sahne { padding: 0 16px; } .kap { padding: 0 18px; } .plan { padding: 26px 22px; } }