/* ===================================================================== YAZI TİPLERİ — kendi sunucumuzdan Google Fonts'tan çekilmiyor: 5 dosya / 397 KB / iki dış bağlantı yerine 3 dosya / 21 KB. Dosyalar Türkçe için gereken 199 karaktere indirgenmiş değişken (variable) sürümler; tek dosya bütün kalınlıkları karşılıyor. Dışarıya istek gitmediği için ziyaretçinin IP adresi de üçüncü bir tarafa ulaşmıyor (KVKK açısından temiz). font-display: swap → yazı tipi inene kadar metin görünmez olmaz. ===================================================================== */ @font-face { font-family: "Inter"; src: url("../yazitipi/inter-degisken.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../yazitipi/serif-degisken.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../yazitipi/serif-italik-degisken.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; } @charset "UTF-8"; /* ===================================================================== KAPIKÖY GÜMRÜK MÜŞAVİRLİĞİ — TASARIM SİSTEMİ Renk dili: gece laciverti zemin + mühür bronzu vurgu + sinyal mavisi. Gümrük işi resmî bir iştir; tasarım ciddi durmalı ama 2010'ların kurumsal sitelerine benzememeli. Bu yüzden koyu zemin, ince çizgiler, bol boşluk ve tek bir sıcak vurgu rengi kullanıldı. İÇİNDEKİLER 01 Değişkenler ve tema 02 Sıfırlama ve tipografi 03 Düzen yardımcıları 04 Düğmeler 05 Üst çubuk ve menü 06 Hero 07 Bölüm başlıkları 08 Kartlar 09 Şerit (kayan yazı) 10 Sayılar 11 Süreç hattı 12 Hizmet detay 13 Form 14 SSS 15 Tablo 16 Alt bilgi 17 Yüzen düğmeler ve alt çubuk 18 Belirme animasyonları 19 Telefon ===================================================================== */ /* --------------------------------------------------------------------- 01 — DEĞİŞKENLER --------------------------------------------------------------------- */ :root { --zemin: #070a12; --zemin-2: #0a0f1a; --yuzey: #0e1522; --yuzey-2: #131c2c; --yuzey-3: #1a2537; --cizgi: #1c2637; --cizgi-2: #26334a; --cizgi-vurgu:#3d4f6d; --metin: #e9eef6; --metin-2: #a9b6c9; --metin-3: #6f7f96; --vurgu: #d9a441; /* mühür bronzu */ --vurgu-acik: #eec272; --vurgu-koyu: #a97c26; --sinyal: #4d9fd6; /* sinyal mavisi */ --basari: #46b17b; --uyari: #e0a83c; --hata: #e06a72; --r: 14px; --r-lg: 22px; --r-xl: 30px; --golge: 0 24px 60px rgba(0, 0, 0, .45); --golge-sm: 0 10px 26px rgba(0, 0, 0, .32); --ust-y: 76px; --serif: "Source Serif 4", "Georgia", "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gecis: .32s cubic-bezier(.22, .61, .36, 1); color-scheme: dark; } /* Aydınlık tema — .acik sınıfı üzerine gelir */ html.acik { --zemin: #f5f7fa; --zemin-2: #eef1f6; --yuzey: #ffffff; --yuzey-2: #f3f6fa; --yuzey-3: #e8edf4; --cizgi: #dde4ee; --cizgi-2: #cbd5e3; --cizgi-vurgu:#9fb0c8; --metin: #0b1220; --metin-2: #46566d; --metin-3: #7386a0; --vurgu: #9a6f18; --vurgu-acik: #b98c2c; --vurgu-koyu: #7d5810; --sinyal: #1d6fa5; --golge: 0 20px 46px rgba(16, 32, 56, .12); --golge-sm: 0 8px 20px rgba(16, 32, 56, .09); color-scheme: light; } /* --------------------------------------------------------------------- 02 — SIFIRLAMA VE TİPOGRAFİ --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-y) + 18px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--zemin); color: var(--metin); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.18; letter-spacing: -.015em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } img, svg, video { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--vurgu); color: #10141c; } :focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 4px; } .gorsel-yok { /* içerik var ama görsel yoksa: teknik doku */ background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px), linear-gradient(150deg, var(--yuzey-3), var(--yuzey)); } /* Ekran okuyucuya özel */ .gizli-metin { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .atla { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 20px; background: var(--vurgu); color: #10141c; font-weight: 600; border-radius: 0 0 10px 0; } .atla:focus { left: 0; } /* Serif başlık */ .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; } /* Küçük büyük harf etiketi */ .etiket { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--metin-3); } .etiket::before { content: ""; width: 22px; height: 1px; background: var(--vurgu); opacity: .8; } .etiket--sade::before { display: none; } /* --------------------------------------------------------------------- 03 — DÜZEN --------------------------------------------------------------------- */ .kapsam { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: 20px; } @media (min-width: 640px) { .kapsam { padding-inline: 32px; } } @media (min-width: 1024px) { .kapsam { padding-inline: 40px; } } .bolum { padding-block: clamp(64px, 9vw, 118px); position: relative; } .bolum--dar { padding-block: clamp(48px, 6vw, 80px); } .bolum--zemin2 { background: var(--zemin-2); } /* Blueprint dokusu: gümrük = belge, ölçü, sınır çizgisi */ .bolum--izgara::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--cizgi) 1px, transparent 1px), linear-gradient(90deg, var(--cizgi) 1px, transparent 1px); background-size: 64px 64px; opacity: .3; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); pointer-events: none; } .izgara { display: grid; gap: 18px; } .izgara--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .izgara--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .izgara--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } @media (min-width: 900px) { .izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .satir { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .arasi { justify-content: space-between; } /* --------------------------------------------------------------------- 04 — DÜĞMELER --------------------------------------------------------------------- */ .dugme { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-size: 14.5px; font-weight: 600; letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: background var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis); } .dugme:active { transform: translateY(1px); } .dugme svg { width: 17px; height: 17px; flex-shrink: 0; } .dugme--ana { background: var(--vurgu); color: #10141c; box-shadow: 0 10px 28px rgba(217, 164, 65, .22); } .dugme--ana:hover { background: var(--vurgu-acik); } .dugme--hat { border-color: var(--cizgi-2); color: var(--metin); background: transparent; } .dugme--hat:hover { border-color: var(--vurgu); color: var(--vurgu); } .dugme--dolu { background: var(--yuzey-2); color: var(--metin); border-color: var(--cizgi); } .dugme--dolu:hover { background: var(--yuzey-3); border-color: var(--cizgi-2); } .dugme--kucuk { min-height: 40px; padding: 0 16px; font-size: 13px; } .dugme--blok { width: 100%; } /* Metin bağlantısı — altı çizgisi hover'da soldan açılır */ .bag { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--vurgu); position: relative; } .bag::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: currentColor; transition: width .4s cubic-bezier(.22,.61,.36,1); } .bag:hover::after { width: 100%; } .bag svg { width: 15px; height: 15px; transition: transform var(--gecis); } .bag:hover svg { transform: translateX(3px); } /* --------------------------------------------------------------------- 05 — ÜST ÇUBUK --------------------------------------------------------------------- */ .ust-bant { background: var(--zemin-2); border-bottom: 1px solid var(--cizgi); font-size: 12.5px; color: var(--metin-3); } .ust-bant .kapsam { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; flex-wrap: wrap; } .ust-bant a { display: inline-flex; align-items: center; gap: 6px; } .ust-bant a:hover { color: var(--vurgu); } .ust-bant svg { width: 14px; height: 14px; } .ust { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--zemin) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--cizgi); } @supports not (backdrop-filter: blur(1px)) { .ust { background: var(--zemin); } } .ust .kapsam { display: flex; align-items: center; gap: 20px; min-height: var(--ust-y); } .marka { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .marka-im { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, var(--vurgu), var(--vurgu-koyu)); color: #10141c; } .marka-im svg { width: 22px; height: 22px; } /* Panelden logo yüklenmişse rozet+yazı yerine logo görünür. Yükseklik sabit, genişlik oranla: hangi ölçüde yüklenirse yüklensin üst çubuğun yüksekliği değişmez. */ /* Harita çerçevesi — oran korunur, mobilde de bozulmaz */ .harita-kutu { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--cizgi); background: var(--zemin-2); aspect-ratio: 4 / 3; min-height: 320px; } .harita-kutu iframe { width: 100%; height: 100%; border: 0; display: block; } @media (min-width: 900px) { .harita-kutu { aspect-ratio: auto; height: 420px; } } .marka-logo { height: 42px; width: auto; max-width: 240px; object-fit: contain; display: block; } @media (max-width: 767px) { .marka-logo { height: 34px; max-width: 180px; } } .marka-ad { display: flex; flex-direction: column; line-height: 1.15; } .marka-ad b { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -.01em; } .marka-ad small { font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--metin-3); } .menu { display: none; margin-left: auto; } @media (min-width: 1080px) { .menu { display: flex; align-items: center; gap: 4px; } } .menu a { position: relative; padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--metin-2); transition: color var(--gecis), background var(--gecis); } .menu a:hover { color: var(--metin); background: var(--yuzey-2); } .menu a[aria-current="page"] { color: var(--vurgu); } .ust-sag { display: flex; align-items: center; gap: 8px; margin-left: auto; } @media (min-width: 1080px) { .ust-sag { margin-left: 0; } } .ikon-dugme { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey); color: var(--metin-2); cursor: pointer; transition: border-color var(--gecis), color var(--gecis), background var(--gecis); } .ikon-dugme:hover { border-color: var(--cizgi-vurgu); color: var(--metin); } .ikon-dugme svg { width: 19px; height: 19px; } .menu-ac { display: grid; } @media (min-width: 1080px) { .menu-ac { display: none; } } .ust .dugme--ana { display: none; } @media (min-width: 760px) { .ust .dugme--ana { display: inline-flex; } } /* Açılır menü paneli */ .panel-perde { position: fixed; inset: 0; z-index: 90; background: rgba(4, 7, 13, .72); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--gecis), visibility var(--gecis); } .panel-perde.acik { opacity: 1; visibility: visible; } .yan-panel { position: fixed; inset: 0 0 0 auto; z-index: 100; width: min(400px, 88vw); background: var(--zemin-2); border-left: 1px solid var(--cizgi); transform: translateX(102%); transition: transform .42s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } .yan-panel.acik { transform: none; } .yan-panel-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--cizgi); } .yan-menu { padding: 12px 12px 20px; } .yan-menu a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px; border-radius: 12px; font-size: 15.5px; font-weight: 500; color: var(--metin); } .yan-menu a:hover { background: var(--yuzey-2); } .yan-menu a[aria-current="page"] { color: var(--vurgu); } .yan-menu svg { width: 16px; height: 16px; color: var(--metin-3); } .yan-panel-alt { margin-top: auto; padding: 20px; border-top: 1px solid var(--cizgi); } /* Sayfa okuma ilerlemesi */ .ilerleme { position: fixed; inset: 0 0 auto 0; z-index: 70; height: 2px; pointer-events: none; } .ilerleme i { display: block; height: 100%; width: 100%; background: var(--vurgu); transform-origin: left; transform: scaleX(0); will-change: transform; } /* --------------------------------------------------------------------- 06 — HERO --------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 92px) clamp(56px, 8vw, 104px); } .hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%; background: radial-gradient(ellipse at 50% 0%, rgba(217, 164, 65, .16) 0%, rgba(77, 159, 214, .08) 38%, transparent 70%); pointer-events: none; } .hero-ic { position: relative; display: grid; gap: clamp(30px, 5vw, 56px); align-items: center; } @media (min-width: 1000px) { .hero-ic { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } } .hero h1 { font-family: var(--serif); font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 400; line-height: 1.06; margin-block: 16px 20px; } .hero h1 em { font-style: italic; background: linear-gradient(96deg, var(--vurgu-acik), var(--vurgu) 55%, var(--sinyal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-lede { font-size: clamp(.98rem, 1.5vw, 1.1rem); color: var(--metin-2); max-width: 56ch; margin-bottom: 28px; } .hero-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; } /* Hero yanındaki bilgi kartı */ .hero-kart { position: relative; background: linear-gradient(160deg, var(--yuzey-2), var(--yuzey)); border: 1px solid var(--cizgi-2); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--golge); } .hero-kart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(217,164,65,.5), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .hero-kart h2 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 9px; margin-bottom: 18px; } .hero-kart h2 svg { width: 18px; height: 18px; color: var(--vurgu); } .kapi-satir { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--cizgi); font-size: 13.5px; } .kapi-satir:last-child { border-bottom: 0; padding-bottom: 0; } .kapi-satir span { color: var(--metin-3); } .kapi-satir b { font-weight: 600; } .rozet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--cizgi-2); background: var(--yuzey-3); } .rozet i { width: 7px; height: 7px; border-radius: 50%; background: var(--basari); } .rozet--acik i { background: var(--basari); } .rozet--yogun i { background: var(--uyari); } .rozet--kapali i { background: var(--metin-3); } /* Hero altındaki güven şeridi */ .guven-serit { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(34px, 5vw, 56px); } @media (min-width: 640px) { .guven-serit { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .guven-serit { grid-template-columns: repeat(4, 1fr); } } .guven-oge { display: flex; align-items: flex-start; gap: 13px; padding: 20px 22px; background: var(--zemin); } .guven-oge svg { width: 21px; height: 21px; color: var(--vurgu); flex-shrink: 0; margin-top: 2px; } .guven-oge b { display: block; font-size: 14px; font-weight: 600; } .guven-oge small { display: block; font-size: 12.5px; color: var(--metin-3); margin-top: 2px; } /* --------------------------------------------------------------------- 07 — BÖLÜM BAŞLIĞI --------------------------------------------------------------------- */ .bas { max-width: 720px; } .bas--orta { margin-inline: auto; text-align: center; } .bas--orta .etiket { justify-content: center; } .bas h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.1; margin-block: 14px 0; } .bas p { margin-top: 15px; color: var(--metin-2); font-size: 15px; max-width: 62ch; } .bas--orta p { margin-inline: auto; } .bas-no { font-family: var(--serif); font-size: 13px; color: var(--vurgu); letter-spacing: .1em; } /* --------------------------------------------------------------------- 08 — KARTLAR --------------------------------------------------------------------- */ .kart { position: relative; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis); } .kart:hover { border-color: var(--cizgi-vurgu); transform: translateY(-3px); box-shadow: var(--golge-sm); } /* Hizmet kartı */ .hizmet-kart { display: flex; flex-direction: column; height: 100%; } .hizmet-gorsel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--yuzey-2); } .hizmet-gorsel img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7) contrast(1.05) brightness(.82); transition: transform .9s cubic-bezier(.22,.61,.36,1), filter .6s ease; } .hizmet-kart:hover .hizmet-gorsel img { transform: scale(1.06); filter: grayscale(.15) contrast(1.06) brightness(.95); } .hizmet-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--yuzey), transparent 62%); } .hizmet-ikon { position: absolute; left: 18px; top: 18px; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgba(8, 12, 20, .62); border: 1px solid rgba(255, 255, 255, .13); backdrop-filter: blur(6px); color: var(--vurgu-acik); } .hizmet-ikon svg { width: 20px; height: 20px; } .hizmet-govde { padding: 22px; display: flex; flex-direction: column; flex: 1; } .hizmet-govde h3 { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; } .hizmet-govde p { margin-top: 9px; font-size: 13.8px; color: var(--metin-2); } .hizmet-madde { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; flex: 1; } .hizmet-madde li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--metin-3); } .hizmet-madde svg { width: 14px; height: 14px; color: var(--vurgu); flex-shrink: 0; margin-top: 3px; } .hizmet-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cizgi); } .one-cikan-rozet { position: absolute; right: 16px; top: 16px; z-index: 2; padding: 4px 11px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--vurgu); color: #10141c; } /* --------------------------------------------------------------------- 09 — ŞERİT --------------------------------------------------------------------- */ .serit { border-block: 1px solid var(--cizgi); background: var(--zemin-2); padding-block: 18px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .serit-ray { display: flex; width: max-content; animation: kay 42s linear infinite; } .serit:hover .serit-ray { animation-play-state: paused; } .serit-grup { display: flex; align-items: center; gap: 40px; padding-right: 40px; } .serit-grup span { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.5rem); color: var(--metin-3); white-space: nowrap; } .serit-grup span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vurgu); opacity: .6; } @keyframes kay { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .serit-ray { animation: none; } } /* --------------------------------------------------------------------- 10 — SAYILAR --------------------------------------------------------------------- */ .sayilar { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(2, 1fr); } @media (min-width: 860px) { .sayilar { grid-template-columns: repeat(4, 1fr); } } .sayi-kutu { background: var(--zemin); padding: 26px 18px; text-align: center; } .sayi-kutu b { display: block; font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 600; line-height: 1; color: var(--metin); font-variant-numeric: tabular-nums; } .sayi-kutu small { display: block; margin-top: 9px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--metin-3); } /* --------------------------------------------------------------------- 11 — SÜREÇ HATTI --------------------------------------------------------------------- */ .surec { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; } @media (min-width: 900px) { .surec { grid-template-columns: repeat(4, 1fr); } } .surec-adim { position: relative; padding: 24px 22px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg); transition: border-color var(--gecis), transform var(--gecis); } .surec-adim:hover { border-color: var(--cizgi-vurgu); transform: translateY(-3px); } .surec-no { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--cizgi-2); transition: color var(--gecis); } .surec-adim:hover .surec-no { color: var(--vurgu); } .surec-adim h3 { margin-top: 16px; font-size: 15.5px; font-weight: 600; } .surec-adim p { margin-top: 8px; font-size: 13.2px; color: var(--metin-2); } .surec-adim::after { content: ""; display: block; height: 1px; width: 0; background: var(--vurgu); margin-top: 18px; transition: width .55s cubic-bezier(.22,.61,.36,1); } .surec-adim:hover::after { width: 56px; } /* --------------------------------------------------------------------- 12 — HİZMET DETAY / İÇERİK --------------------------------------------------------------------- */ .sayfa-bas { position: relative; padding-block: clamp(38px, 5vw, 62px) clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--cizgi); background: var(--zemin-2); } .kirinti { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--metin-3); } .kirinti a:hover { color: var(--vurgu); } .kirinti svg { width: 12px; height: 12px; opacity: .5; } .sayfa-bas h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.85rem, 4.4vw, 3rem); margin-top: 14px; } .sayfa-bas p { margin-top: 14px; color: var(--metin-2); max-width: 68ch; font-size: 15.5px; } .icerik { font-size: 15.5px; line-height: 1.78; color: var(--metin-2); } .icerik > *:first-child { margin-top: 0; } .icerik h2, .icerik h3 { font-family: var(--serif); font-weight: 600; color: var(--metin); margin: 1.9em 0 .6em; line-height: 1.25; } .icerik h2 { font-size: 1.5rem; } .icerik h3 { font-size: 1.22rem; } .icerik p { margin: 0 0 1.15em; } .icerik a { color: var(--vurgu); text-decoration: underline; text-underline-offset: 3px; } .icerik ul, .icerik ol { margin: 0 0 1.3em; padding-left: 1.35em; } .icerik li { margin-bottom: .5em; } .icerik li::marker { color: var(--vurgu); } .icerik img { border-radius: var(--r); margin-block: 1.5em; } .icerik blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--vurgu); color: var(--metin); font-family: var(--serif); font-size: 1.14rem; font-style: italic; } .icerik table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14px; } .icerik th, .icerik td { padding: 11px 13px; border: 1px solid var(--cizgi); text-align: left; } .icerik th { background: var(--yuzey-2); font-weight: 600; color: var(--metin); } .icerik hr { border: 0; border-top: 1px solid var(--cizgi); margin: 2em 0; } .yan-kutu { position: sticky; top: calc(var(--ust-y) + 20px); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 22px; } .yan-kutu h3 { font-size: 15px; font-weight: 600; margin-bottom: 14px; } /* --------------------------------------------------------------------- 13 — FORM --------------------------------------------------------------------- */ .alan { margin-bottom: 16px; } .alan label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--metin-2); } .alan .zorunlu { color: var(--vurgu); } .girdi { width: 100%; min-height: 50px; padding: 13px 15px; background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: var(--r); font-size: 16px; /* 16px altı iOS'ta sayfayı yakınlaştırır */ color: var(--metin); transition: border-color var(--gecis), background var(--gecis); } .girdi::placeholder { color: var(--metin-3); } .girdi:focus { outline: none; border-color: var(--vurgu); background: var(--yuzey-3); } textarea.girdi { min-height: 130px; resize: vertical; line-height: 1.6; } select.girdi { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7f96' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 42px; } .ipucu { display: block; margin-top: 6px; font-size: 12px; color: var(--metin-3); } /* Hata: renge güvenmiyoruz — kalın kenarlık ve yazı da var */ .girdi[aria-invalid="true"] { border-color: var(--hata); border-width: 2px; } .alan-hata { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--hata); } .alan-ikili { display: grid; gap: 0 16px; grid-template-columns: 1fr; } @media (min-width: 620px) { .alan-ikili { grid-template-columns: 1fr 1fr; } } .onay { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--metin-2); } .onay input { width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0; accent-color: var(--vurgu); } .onay a { color: var(--vurgu); text-decoration: underline; } .uyari { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--cizgi-2); background: var(--yuzey-2); font-size: 14px; margin-bottom: 20px; } .uyari svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } .uyari--ok { border-color: rgba(70,177,123,.4); background: rgba(70,177,123,.09); color: var(--basari); } .uyari--hata { border-color: rgba(224,106,114,.4); background: rgba(224,106,114,.09); color: var(--hata); } .uyari--bilgi { border-color: rgba(77,159,214,.35); background: rgba(77,159,214,.08); color: var(--sinyal); } /* Bal küpü: robotlar doldurur, insanlar görmez */ .tuzak { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* --------------------------------------------------------------------- 14 — SSS --------------------------------------------------------------------- */ .sss-liste { border-top: 1px solid var(--cizgi); } .sss-oge { border-bottom: 1px solid var(--cizgi); } .sss-soru { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; background: none; border: 0; text-align: left; cursor: pointer; font-size: 15.5px; font-weight: 500; color: var(--metin); transition: color var(--gecis); } .sss-soru:hover { color: var(--vurgu); } .sss-im { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--cizgi-2); border-radius: 50%; color: var(--vurgu); transition: transform var(--gecis), border-color var(--gecis); } .sss-soru[aria-expanded="true"] .sss-im { transform: rotate(45deg); border-color: var(--vurgu); } .sss-cevap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22,.61,.36,1); } .sss-cevap.acik { grid-template-rows: 1fr; } .sss-cevap > div { overflow: hidden; } .sss-cevap p { padding: 0 52px 22px 0; font-size: 14.2px; color: var(--metin-2); margin: 0; } /* --------------------------------------------------------------------- 15 — TABLO (site tarafı) --------------------------------------------------------------------- */ .tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); } .tablo { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; } .tablo th, .tablo td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--cizgi); } .tablo th { background: var(--yuzey-2); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--metin-3); } .tablo tbody tr:hover { background: var(--yuzey); } /* --------------------------------------------------------------------- 16 — ALT BİLGİ --------------------------------------------------------------------- */ .dip { border-top: 1px solid var(--cizgi); background: var(--zemin-2); } .dip-ic { display: grid; gap: 34px; padding-block: clamp(44px, 6vw, 68px); } @media (min-width: 780px) { .dip-ic { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } } .dip h4 { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--metin-3); margin-bottom: 16px; } .dip-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .dip-liste a { font-size: 14px; color: var(--metin-2); } .dip-liste a:hover { color: var(--vurgu); } .dip-metin { font-size: 14px; color: var(--metin-2); max-width: 40ch; } .dip-iletisim { display: grid; gap: 12px; font-size: 14px; color: var(--metin-2); } .dip-iletisim div { display: flex; align-items: flex-start; gap: 10px; } .dip-iletisim svg { width: 16px; height: 16px; color: var(--vurgu); flex-shrink: 0; margin-top: 3px; } .dip-alt { border-top: 1px solid var(--cizgi); padding-block: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--metin-3); } .sosyal { display: flex; gap: 9px; } .sosyal a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--cizgi); border-radius: 10px; color: var(--metin-2); transition: border-color var(--gecis), color var(--gecis); } .sosyal a:hover { border-color: var(--vurgu); color: var(--vurgu); } .sosyal svg { width: 17px; height: 17px; } /* --------------------------------------------------------------------- 17 — YÜZEN DÜĞMELER VE TELEFON ALT ÇUBUĞU --------------------------------------------------------------------- */ .yukari { position: fixed; right: 18px; bottom: 18px; z-index: 55; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--cizgi-2); border-radius: 50%; background: var(--yuzey); color: var(--metin-2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--gecis), visibility var(--gecis), transform var(--gecis); cursor: pointer; } .yukari.gorunur { opacity: .95; visibility: visible; transform: none; } .yukari svg { width: 18px; height: 18px; } .alt-cubuk { display: none; } @media (max-width: 760px) { .alt-cubuk { position: fixed; inset: auto 0 0 0; z-index: 58; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--zemin-2) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--cizgi); } .alt-cubuk a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; min-width: 0; padding: 6px 2px; border-radius: 12px; font-size: clamp(.55rem, 2.4vw, .68rem); font-weight: 600; color: var(--metin-3); white-space: nowrap; overflow: hidden; } .alt-cubuk a svg { width: 20px; height: 20px; } .alt-cubuk a[aria-current="page"] { color: var(--vurgu); } .alt-cubuk a.vurgu { background: var(--vurgu); color: #10141c; } body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } .yukari { bottom: calc(80px + env(safe-area-inset-bottom)); } } /* --------------------------------------------------------------------- 18 — BELİRME Gizleme YALNIZCA html.js-canli varken uygulanır. Betik çalışmazsa içerik olduğu gibi görünür; hiçbir koşulda kaybolmaz. --------------------------------------------------------------------- */ html.js-canli [data-belir], html.js-canli [data-kademe] > * { opacity: 0; transform: translateY(20px); transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); } html.js-canli [data-belir].gorunur, html.js-canli [data-kademe].gorunur > * { opacity: 1; transform: none; } html.js-canli [data-kademe].gorunur > *:nth-child(1) { transition-delay: 0s; } html.js-canli [data-kademe].gorunur > *:nth-child(2) { transition-delay: .07s; } html.js-canli [data-kademe].gorunur > *:nth-child(3) { transition-delay: .14s; } html.js-canli [data-kademe].gorunur > *:nth-child(4) { transition-delay: .21s; } html.js-canli [data-kademe].gorunur > *:nth-child(5) { transition-delay: .28s; } html.js-canli [data-kademe].gorunur > *:nth-child(6) { transition-delay: .35s; } html.js-canli [data-kademe].gorunur > *:nth-child(7) { transition-delay: .42s; } html.js-canli [data-kademe].gorunur > *:nth-child(8) { transition-delay: .49s; } html.js-canli [data-kademe].gorunur > *:nth-child(n+9) { transition-delay: .56s; } @media (prefers-reduced-motion: reduce) { html [data-belir], html [data-kademe] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .kart:hover, .surec-adim:hover { transform: none; } } /* --------------------------------------------------------------------- 19 — TELEFON İNCELTMELERİ --------------------------------------------------------------------- */ @media (max-width: 620px) { :root { --ust-y: 66px; } .ust-bant { display: none; } .hero-kart { padding: 20px; } .bas p { font-size: 14.2px; } .icerik { font-size: 15px; } .sss-cevap p { padding-right: 8px; } .dugme { width: 100%; } .hero-dugmeler .dugme { width: 100%; } .dip-alt { justify-content: flex-start; } } @media (max-width: 380px) { .marka-ad b { font-size: 16px; } .marka-im { width: 38px; height: 38px; } } /* Yatay tutulan telefon */ @media (max-height: 480px) and (max-width: 940px) { .hero { padding-block: 30px; } .yan-panel { overflow-y: auto; } } /* Yazdırma */ @media print { .ust, .ust-bant, .alt-cubuk, .yukari, .yan-panel, .panel-perde, .ilerleme { display: none !important; } body { background: #fff; color: #000; } .kart, .surec-adim { border-color: #ccc; } } /* Güvenlik ağı: hiçbir bölüm yatay kaydırma üretmesin */ html, body { max-width: 100%; } img, video, iframe, table, pre { max-width: 100%; } /* ===================================================================== 20 — VİDEO ARKA PLANLI HERO Video panelden verilir (Site Ayarları → Hero Arka Plan Videosu). Adres boşsa bu sınıflar hiç basılmaz ve hero eski hâliyle çalışır. Okunabilirlik: videonun üzerine iki katman geliyor — · düz koyu perde (yoğunluğu panelden ayarlanır) · alttan yukarı gradyan (metin bloğunun arkasını koyulaştırır) Renge güvenmiyoruz; başlık her hâlükârda zemine karşı okunur kalıyor. ===================================================================== */ .hero--video { position: relative; isolation: isolate; } /* Video varken üstteki ışık halesi fazla geliyor */ .hero--video::before { opacity: .45; } .hero-video { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--zemin); /* video inene kadar boşluk görünmesin */ /* --poster PHP tarafından basılır; tanımlı değilse "none" olur ve sade zemin kalır. Video oynamadığı her durumda (mobil, hareket kısıtlaması, dosya inmedi) bu kare görünür. */ background-image: var(--poster, none); background-size: cover; background-position: center; } .hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Perde köşegen kurulur, düz değil. Nedeni: hero'da metin SOL ÜSTTE, görselin ilgi çekici yeri (uçak, motor parıltısı) SAĞ ALTTA. Her yeri eşit karartınca yazı okunsun diye koyulttukça görsel kayboluyordu. Köşegen perde ikisini ayırıyor: yazının arkası koyu, görselin arkası açık. */ .hero-perde { position: absolute; inset: 0; background: /* 1) Köşegen: sol üst koyu → sağ alt şeffaf */ linear-gradient(158deg, color-mix(in srgb, var(--zemin) 90%, transparent) 0%, color-mix(in srgb, var(--zemin) 68%, transparent) 46%, color-mix(in srgb, var(--zemin) 22%, transparent) 72%, transparent 100%), /* 2) En alt: bir sonraki bölüme yumuşak geçiş */ linear-gradient(to top, var(--zemin) 0%, transparent 14%), /* 3) Genel perde — panelden ayarlanır (0 = yalnızca köşegen) */ color-mix(in srgb, var(--zemin) var(--perde, 10%), transparent); } /* Telefonda köşegen işe yaramıyor: dar ekranda metin tüm genişliği kaplıyor, köşegenin açık köşesi de yazının altına giriyor. Bu yüzden mobilde perde dikey: üst (yazı) koyu, alt (düğmeler ve altı) daha açık. Görsel odak noktası değil, derinlik katıyor — 375 px'lik bir ekranda yatay bir videodan zaten çok az şey görünür, okunurluk önce gelir. background-position da kaydırılıyor: dar kadrajda motor parıltısı görünür bölgeye denk gelsin. */ @media (max-width: 760px) { .hero-video { background-position: 64% center; } .hero-perde { background: linear-gradient(to bottom, color-mix(in srgb, var(--zemin) 90%, transparent) 0%, color-mix(in srgb, var(--zemin) 78%, transparent) 46%, color-mix(in srgb, var(--zemin) 46%, transparent) 78%, color-mix(in srgb, var(--zemin) 30%, transparent) 100%), linear-gradient(to top, var(--zemin) 0%, transparent 12%), color-mix(in srgb, var(--zemin) var(--perde, 10%), transparent); } .hero-perde::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--zemin) 20%, transparent); } } /* Aydınlık temada video fazla parlak kalıyor: biraz daha karart ve metni koyu tuttuğumuz için perdeyi açık renge çevir. */ html.acik .hero-perde { background: linear-gradient(158deg, color-mix(in srgb, var(--zemin) 92%, transparent) 0%, color-mix(in srgb, var(--zemin) 74%, transparent) 46%, color-mix(in srgb, var(--zemin) 30%, transparent) 72%, color-mix(in srgb, var(--zemin) 10%, transparent) 100%), linear-gradient(to top, var(--zemin) 0%, transparent 14%), color-mix(in srgb, var(--zemin) var(--perde, 18%), transparent); } /* Telefonda otomatik oynayan video pil yakar ve veri harcar; ayrıca dikey ekranda yatay videodan zaten çok az şey görünüyor. */ /* Telefonda video indirilmez: mobil veriyi tüketmesin. Yerine poster karesi durur, görsel bütünlük bozulmaz. Poster tanımlı değilse zaten sade zemin görünür. */ @media (max-width: 760px) { .hero-video video { display: none; } } /* Hareket kısıtlaması açıksa video oynatılmaz; poster kalır. */ @media (prefers-reduced-motion: reduce) { .hero-video video { display: none; } } /* ===================================================================== BÖLÜM 21 — SİNEMATİK KAYDIRMA İki hâli var: A) JavaScript kapalı / hareket kısıtlaması açık → normal bir bölüm. Üç perde alt alta dizilir, arka planda ilk kare durur. Kimse içerik kaybetmez. B) JavaScript açık (.sin--canli) → 500vh'lik ray + yapışkan sahne. Kaydırdıkça kareler ilerler, perdeler sırayla belirir. Kural: B hâlini yalnızca JS ekler. Yani bir hata olursa site A hâlinde kalır, asla boş ekran çıkmaz. ===================================================================== */ .sin { position: relative; background: #dfe5ec; } .sin-sabit { position: relative; } .sin-zemin { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .sin-tuval { width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .35s ease; } .sin--kare-hazir .sin-tuval { opacity: 1; } .sin-katman { position: relative; z-index: 1; } /* ---------- Perdeler: durgun hâl (JS yok) ---------- Her perde filmin ayrı bir anını arka plan alır; böylece 3. perdenin beyaz yazısı koyu deniz karesinin üzerine düşer. */ .sin-perde { position: relative; padding: clamp(70px, 12vh, 130px) 0; background-image: var(--kare); background-size: cover; background-position: center; } .sin-perde::before { content: ""; position: absolute; inset: 0; background: rgba(233, 238, 244, .34); } .sin-perde--3::before { background: rgba(9, 16, 28, .34); } .sin-perde > * { position: relative; } .sin-ic { width: min(1200px, calc(100% - 40px)); margin-inline: auto; max-width: 1200px; } @media (min-width: 1024px) { .sin-ic { width: min(1200px, calc(100% - 128px)); } } .sin-ic--orta { text-align: center; max-width: 900px; } .sin-ic--sag { margin-left: auto; margin-right: auto; } @media (min-width: 1024px) { .sin-ic--sag { max-width: 680px; margin-right: 0; } } /* ---------- Yazı ---------- */ .sin-baslik { font-family: var(--serif); font-size: clamp(2rem, 5vw, 4.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -.015em; color: #16233a; margin: 0; } .sin-baslik--ak { color: #fff; } .sin-alt { margin: 18px 0 0; font-size: clamp(.72rem, 1.1vw, .85rem); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: rgba(22, 35, 58, .78); } .sin-buyuk { font-family: var(--serif); font-size: clamp(1.5rem, 4.2vw, 3.6rem); font-weight: 300; line-height: 1.3; letter-spacing: -.01em; margin: 0; } .sin-buyuk .sin-kat { display: inline; } .sin-kat--1 { color: #16233a; } .sin-kat--2 { color: rgba(22, 35, 58, .72); } .sin-kat--3 { color: rgba(22, 35, 58, .44); } .sin-buyuk .sin-kat + .sin-kat::before { content: " "; } .sin-ust { margin: 0 0 14px; font-size: clamp(.95rem, 1.6vw, 1.15rem); letter-spacing: .04em; color: rgba(255, 255, 255, .66); } /* ---------- Yuvarlak düğme ---------- */ .sin-yuvarlak { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(22, 35, 58, .45); color: #16233a; margin-top: 32px; transition: opacity .25s, transform .25s, border-color .25s; } .sin-yuvarlak svg { width: 18px; height: 18px; } .sin-yuvarlak:hover { opacity: .7; } .sin-cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 30px; font-size: clamp(.72rem, 1.1vw, .82rem); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, .85); } .sin-yuvarlak--dolu { width: 42px; height: 42px; margin-top: 0; flex-shrink: 0; background: #fff; border-color: #fff; color: #16233a; } .sin-yuvarlak--dolu svg { width: 16px; height: 16px; } .sin-cta:hover .sin-yuvarlak--dolu { transform: scale(1.1); } .sin-nokta { display: flex; justify-content: center; gap: 9px; margin-top: 34px; } .sin-nokta i { width: 7px; height: 7px; border-radius: 50%; background: rgba(22, 35, 58, .38); } .sin-nokta i:first-child { width: 9px; height: 9px; background: #16233a; } /* ===================================================================== CANLI HÂL — yalnızca JavaScript ekler ===================================================================== */ .sin--canli { height: 500vh; background: transparent; } .sin--canli .sin-sabit { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; } .sin--canli .sin-katman { position: absolute; inset: 0; } .sin--canli .sin-perde { position: absolute; inset: 0; padding: 0; background-image: none; display: flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity .1s ease-out; } .sin--canli .sin-perde::before { display: none; } .sin--canli .sin-perde--2 { justify-content: center; } .sin--canli .sin-perde--3 { justify-content: flex-end; } .sin--canli .sin-perde.sin-gorunur { pointer-events: auto; } /* Perde çocukları sırayla belirir */ .sin--canli [data-sin-gec] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1) var(--gec, 0ms), transform .8s cubic-bezier(.16, 1, .3, 1) var(--gec, 0ms); } .sin--canli .sin-gorunur [data-sin-gec] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sin--canli [data-sin-gec] { opacity: 1; transform: none; transition: none; } } /* Telefonda 500vh çok uzun; ray kısalır, yazılar büyür */ @media (max-width: 767px) { .sin--canli { height: 340vh; } .sin--canli .sin-perde { padding-inline: 20px; } .sin--canli .sin-perde--3 { justify-content: flex-start; } .sin-ic--sag { max-width: none; } }