/* ============================================================ SUPERCUT — site3 · "Bıçak İzi — Kesik Wordmark Kimliği" ------------------------------------------------------------ Kimlik kuralı (devredilebilir logo tarifi): - Her SUPERCUT ve section statement'ının ilk kelimesi iki özdeş span'dan oluşur; üst span %62'ye kadar görünür ve -0.06em kayar, alt span %62'den sonrasını gösterir ve +0.06em kayar. - Kesikte görünen şey ZEMİNDİR — çizgi asla çizilmez. - Kesim aksının sağ ucunda tek 8×8px #E8006B kare (kesim noktası). - Magenta disiplini: SADECE birincil CTA dolgusu + kesim noktası karesi + hover/focus. Sayfa yüzeyinin %3'ünü geçmez. ============================================================ */ /* ---------- 1. Değişkenler ---------- */ :root { /* Renk */ --zemin: #F4F4F2; /* soğuk mat alüminyum beyazı */ --murekkep: #101013; /* metin + display + inverse bant zemini */ --bicak: #E8006B; /* bıçak izi (dieline) magenta — kıt kullan */ --pasif: #C7C9CC; /* spec tablo zeminleri, pasif etiketler */ --ucuncul: #6E7075; /* üçüncül metin */ --beyaz: #FFFFFF; /* Tipografi rolleri */ --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --font-govde: 'Hanken Grotesk', 'Segoe UI', sans-serif; --font-mono: 'Martian Mono', 'Courier New', monospace; /* Kimlik parametreleri — logo kuralının tamamı bu iki değerdir */ --kesim: 62%; /* kesim aksı: üstten %62 */ --kayma: 0.06em; /* yatay mikro-kayma */ /* Ölçüler */ --ust-yuk: 4rem; /* header yüksekliği */ } /* ---------- 2. Sıfırlama + taban ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { overflow-x: clip; } body { background: var(--zemin); color: var(--murekkep); font: 400 1rem/1.65 var(--font-govde); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--bicak); } ::selection { background: var(--bicak); color: var(--beyaz); } :focus-visible { outline: 2px solid var(--bicak); outline-offset: 2px; } /* Menü açıkken gövde kaydırması kilitlenir */ body.kilitli { overflow: hidden; } /* ---------- 3. Yardımcılar ---------- */ .kap { width: min(1200px, 100% - 3rem); margin-inline: auto; } .mono { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } /* Pasif etiket — mono metin, gri blok */ .etiket-pasif { display: inline-block; background: var(--pasif); color: var(--murekkep); padding: 0.35rem 0.65rem; } /* Scroll reveal kalıbı: JS 'e .js ekler; eklemezse her şey görünür */ .gizli { transition: opacity 0.55s ease; } .js .gizli { opacity: 0; } .js .gizli.gorunur-yap { opacity: 1; } /* ---------- 4. İMZA — kesik öğe ---------- */ /* Kullanım: METİN */ .kesik { position: relative; display: inline-block; white-space: nowrap; } .kesik__ust { position: absolute; inset: 0; clip-path: inset(0 0 calc(100% - var(--kesim)) 0); /* üst %62 görünür */ transform: translateX(calc(var(--kayma) * -1)); transition: transform 300ms ease-out; } .kesik__alt { display: inline-block; vertical-align: top; /* üst span'la aynı dikey hizaya sabitler */ clip-path: inset(var(--kesim) 0 0 0); /* alt %38 görünür */ transform: translateX(var(--kayma)); transition: transform 300ms ease-out; } /* Kesim noktası: kesim aksının sağ ucunda tek 8×8px kare */ .kesik--nokta { margin-right: 0.22em; } .kesik--nokta::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--bicak); left: calc(100% + 0.1em); top: calc(var(--kesim) - 4px); } /* Kayık durum: sayfa yüklenirken / viewport dışında iki yarı açıktır, görününce 300ms ease-out ile imza konumuna OTURUR. */ .js .kesik--nokta.kayik .kesik__ust, .js .gizli .kesik--nokta .kesik__ust { transform: translateX(-0.45em); } .js .kesik--nokta.kayik .kesik__alt, .js .gizli .kesik--nokta .kesik__alt { transform: translateX(0.45em); } .js .gizli.gorunur-yap .kesik--nokta .kesik__ust { transform: translateX(calc(var(--kayma) * -1)); } .js .gizli.gorunur-yap .kesik--nokta .kesik__alt { transform: translateX(var(--kayma)); } /* Ters kesik (CTA aşısı): dururken hizalı, hover/focus'ta ters yönde aynı parametrelerle mikro-ayrılır. Kare yok. */ .kesik--ters .kesik__ust { transform: none; } .kesik--ters .kesik__alt { transform: none; } .dugme:hover .kesik--ters .kesik__ust, .dugme:focus-visible .kesik--ters .kesik__ust { transform: translateX(var(--kayma)); } .dugme:hover .kesik--ters .kesik__alt, .dugme:focus-visible .kesik--ters .kesik__alt { transform: translateX(calc(var(--kayma) * -1)); } /* ---------- 5. Tipografi rolleri ---------- */ .baslik, h1, h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92; } h2, .baslik { font-size: clamp(2.4rem, 5.5vw, 4.4rem); } h3 { font-family: var(--font-govde); font-weight: 600; font-size: 1.05rem; line-height: 1.3; } .govde-genis { font-size: 1.1rem; max-width: 34em; } /* ---------- 6. Header / nav ---------- */ .ust { position: sticky; top: 0; z-index: 50; background: var(--zemin); border-bottom: 1px solid var(--pasif); } .ust__ic { height: var(--ust-yuk); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .marka { font-family: var(--font-display); font-weight: 900; font-size: 1.55rem; letter-spacing: -0.02em; text-transform: uppercase; text-decoration: none; line-height: 1; } .marka:hover { color: inherit; } /* wordmark magenta'ya dönmez — disiplin */ .ust nav { display: flex; align-items: center; gap: 1.75rem; } .ust nav a { font-weight: 600; font-size: 0.9rem; text-decoration: none; } /* Aktif sayfa: kesim noktası karesi ile işaretlenir */ .ust nav a.aktif { position: relative; padding-right: 0.9rem; } .ust nav a.aktif::after { content: ""; position: absolute; right: 0; top: calc(var(--kesim) - 4px); width: 8px; height: 8px; background: var(--bicak); } .dil { display: flex; align-items: baseline; gap: 0.6rem; } .dil span, .dil a { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; } .dil a { color: var(--ucuncul); text-decoration: none; } /* .ust nav a genel kuralı (.9rem/600) dil linklerini ezmesin — span ile aynı ölçüde kalsınlar */ .ust nav .dil a { font-size: 0.68rem; font-weight: 400; } .menu-dugme { display: none; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; background: none; border: 1px solid var(--murekkep); color: var(--murekkep); padding: 0.5rem 0.9rem; cursor: pointer; } /* ---------- 7. Düğmeler ---------- */ .dugme { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-govde); font-weight: 600; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 2rem; border: 0; border-radius: 0; /* bıçak kenarı: köşe yumuşatma yok */ cursor: pointer; text-decoration: none; } .dugme--birincil { background: var(--bicak); color: var(--beyaz); } .dugme--birincil:hover { color: var(--beyaz); } .dugme--ikincil { background: transparent; border: 1px solid var(--murekkep); color: var(--murekkep); } .dugme--ikincil:hover { border-color: var(--bicak); color: var(--bicak); } .dugme--kucuk { padding: 0.55rem 1.1rem; font-size: 0.78rem; } /* ---------- 8. Kahraman (hero) ---------- */ .kahraman { min-height: calc(100svh - var(--ust-yuk)); display: flex; flex-direction: column; } .kahraman__ustsoz { text-align: center; color: var(--ucuncul); padding-top: 1.6rem; } .kahraman__marka { text-align: center; margin-block: auto; /* dikeyde ortalar */ padding-block: 1rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.8; font-size: clamp(4.5rem, 27.5vw, 29rem); /* kenardan kenara */ } .kahraman__orta h1 { font-size: clamp(1.8rem, 3.6vw, 3rem); } .kahraman__orta p { margin-top: 0.9rem; max-width: 34em; font-size: 1.05rem; } .kahraman__alt { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: 2.4rem; padding-bottom: 2.2rem; } .kahraman__spec { list-style: none; display: grid; gap: 0.55rem; color: var(--murekkep); } .kahraman__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; } /* Hero tabanı: tam genişlik inverse şerit */ .kahraman__serit { background: var(--murekkep); color: var(--zemin); } .kahraman__serit .kap { display: flex; flex-wrap: wrap; gap: 0.4rem 2.2rem; justify-content: center; padding-block: 0.95rem; } /* ---------- 9. Bölüm iskeleti ---------- */ .bolum { padding-block: clamp(4rem, 9vw, 7rem); } /* Inverse bant: tam genişlik koyu bölüm */ .bolum--ters { background: var(--murekkep); color: var(--zemin); } .bolum--ters a { color: var(--zemin); } .bolum--ters a:hover { color: var(--bicak); } .bolum--ters .bolum__no { color: var(--pasif); } .bolum__bas { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); } .bolum__no { display: block; color: var(--ucuncul); margin-bottom: 1rem; } .bolum__bas .govde-genis { margin-top: 1.1rem; } /* ---------- 10. Kıyas tablosu (02 — rulo / yaprak) ---------- */ .tablo-sarici { overflow-x: auto; } .kiyas { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 3px; /* aralıklarda görünen şey zemindir */ } .kiyas th, .kiyas td { text-align: left; vertical-align: top; padding: 1.1rem 1.25rem; } .kiyas thead th { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding-block: 0.7rem; } .kiyas tbody th { font-family: var(--font-mono); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ucuncul); width: 7.5rem; padding-left: 0; } .kiyas td { font-size: 0.95rem; line-height: 1.5; } .kiyas td.rulo { background: var(--pasif); color: #45474B; } .kiyas td.yaprak { background: var(--murekkep); color: var(--zemin); } /* ---------- 11. Fotoğraf kartları (kullanım / HORECA) ---------- */ .kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: clamp(2.2rem, 5vw, 3.4rem); } .kart { margin: 0; } .kart__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.04); /* alüminyum soğukluğu — tek renk disiplini */ } .kart figcaption { margin-top: 0.7rem; color: var(--ucuncul); } /* ---------- 12. İstatistikler ---------- */ .statlar { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 4.5rem); } .stat__deger { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 0.9; letter-spacing: -0.02em; } .stat__ad { margin-top: 0.6rem; color: var(--ucuncul); } .bolum--ters .stat__ad { color: var(--pasif); } /* ---------- 13. Spec tablosu ---------- */ .spec { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 2px; /* kesik aralıklar — zemin görünür */ } .spec th, .spec td { text-align: left; padding: 0.85rem 1.1rem; } .spec thead th { background: var(--murekkep); color: var(--zemin); font-family: var(--font-mono); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .spec tbody td { background: var(--pasif); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; white-space: nowrap; } .spec tbody tr.one-cikan td { background: var(--beyaz); } .spec .tablo-etiket { display: inline-block; margin-left: 0.7rem; font-size: 0.6rem; letter-spacing: 0.14em; color: var(--ucuncul); } .spec-not { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ucuncul); } /* ---------- 14. Belge satırları (inverse bant içinde) ---------- */ .belgeler { display: grid; gap: 3px; margin-top: clamp(2rem, 4vw, 3rem); } .belge-satir { display: grid; grid-template-columns: minmax(11rem, 1fr) 2fr auto; align-items: baseline; gap: 1.5rem; background: #1A1A1F; /* banttan bir ton açık blok; aralıkta bant görünür */ padding: 1.5rem 1.6rem; } .belge-satir__ad { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; } .belge-satir__aciklama { color: var(--pasif); font-size: 0.95rem; } .belge-satir__not { color: var(--zemin); } /* ---------- 15. İhracat sütunları + MOQ şeridi ---------- */ .ihracat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } .ihracat__yan > p { margin-top: 1rem; max-width: 30em; } .ihracat__yan .statlar { margin-top: 1.8rem; } .moq-serit { margin-top: clamp(2.4rem, 5vw, 3.6rem); background: var(--pasif); padding: 1rem 1.4rem; } /* ---------- 16. Numune bandı (06) ---------- */ .bant-numune .baslik { font-size: clamp(2.6rem, 6.5vw, 5.2rem); } .bant-numune__soz { margin-top: 1.2rem; max-width: 34em; color: var(--pasif); } .bant-numune .dugme { margin-top: 2rem; } .bolum--ters .dugme--ikincil { border-color: var(--zemin); color: var(--zemin); } .bolum--ters .dugme--ikincil:hover { border-color: var(--bicak); color: var(--bicak); } /* ---------- 17. Form ---------- */ .form-kutu { max-width: 780px; display: grid; gap: 1.2rem; } .form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .form-alan { display: grid; gap: 0.4rem; } .form-alan label { font-weight: 600; font-size: 0.85rem; } .form-alan input, .form-alan select, .form-alan textarea { font: 400 1rem var(--font-govde); color: var(--murekkep); background: var(--beyaz); border: 1px solid var(--pasif); border-radius: 0; padding: 0.8rem 1rem; width: 100%; } .form-alan textarea { min-height: 7.5rem; resize: vertical; } .form-alan input:focus-visible, .form-alan select:focus-visible, .form-alan textarea:focus-visible { outline: 2px solid var(--bicak); outline-offset: 0; border-color: var(--bicak); } .form-kutu .dugme { justify-self: start; margin-top: 0.4rem; } /* Başarı durumu — tasarlanmış, gizli başlar */ .form-mesaj { display: none; background: var(--murekkep); color: var(--zemin); padding: 1.8rem 1.8rem 2rem; } .form-mesaj.gorunur-yap { display: block; } .form-mesaj__baslik { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; } .form-mesaj p { margin-top: 0.8rem; color: var(--pasif); } /* ---------- 18. Footer ---------- */ .alt { background: var(--murekkep); color: var(--zemin); padding-block: clamp(3.5rem, 7vw, 5.5rem) 1.6rem; } .alt a { color: var(--zemin); text-decoration: none; } .alt a:hover { color: var(--bicak); } .alt__marka { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.02em; text-transform: uppercase; line-height: 0.85; } .alt__izgara { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-top: 2.6rem; } .alt__slogan { color: var(--pasif); max-width: 22em; font-size: 0.95rem; } .alt h4 { font-family: var(--font-mono); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pasif); margin-bottom: 1rem; } .alt ul { list-style: none; display: grid; gap: 0.55rem; font-size: 0.95rem; } .alt__dip { margin-top: 3.2rem; padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; color: var(--pasif); } /* ---------- 19. Hareket azaltma ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } /* Her şey görünür; kesik hep imza konumunda statik durur */ .js .gizli { opacity: 1; } .js .gizli .kesik--nokta .kesik__ust, .js .kesik--nokta.kayik .kesik__ust { transform: translateX(calc(var(--kayma) * -1)); } .js .gizli .kesik--nokta .kesik__alt, .js .kesik--nokta.kayik .kesik__alt { transform: translateX(var(--kayma)); } } /* ---------- 20. Responsive kırılımlar ---------- */ @media (max-width: 900px) { /* Mobil menü: header altında tam ekran inverse panel */ .menu-dugme { display: block; } .ust nav { position: fixed; top: var(--ust-yuk); left: 0; right: 0; bottom: 0; background: var(--murekkep); display: none; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem; padding: 2rem 1.5rem 3rem; } .ust nav.acik { display: flex; } .ust nav a { color: var(--zemin); font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; text-transform: uppercase; letter-spacing: -0.02em; } .ust nav a.aktif { padding-right: 1.2rem; } .dil { order: 9; } .dil span { color: var(--zemin); } .ust nav .dugme--birincil { font-size: 0.92rem; padding: 1rem 2rem; } .alt__izgara { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .kahraman__alt { flex-direction: column; align-items: stretch; } .kahraman__cta { justify-content: flex-start; } .kahraman__cta .dugme { flex: 1 1 auto; } .ihracat { grid-template-columns: 1fr; } .belge-satir { grid-template-columns: 1fr; gap: 0.5rem; } } @media (max-width: 640px) { .kartlar { grid-template-columns: 1fr; } .form-satir { grid-template-columns: 1fr; } .alt__izgara { grid-template-columns: 1fr; } }