@charset "UTF-8";
/* ============================================================================
SEVEN TOWERS — Ana Stil Dosyası
Kimya Lojistik Liman Hizmetleri Depolama San. ve Tic. Ltd. Şti.
----------------------------------------------------------------------------
Hazırlayan : UI/UX Tasarımcı · Tarih: 2026-09-02
Teknoloji : Saf, elle yazılmış modern CSS. Build adımı YOK.
Tailwind / SCSS / PostCSS / npm KULLANILMAZ.
Bağımlılık : Yalnızca Google Fonts sarmalayıcılar DOM'da kalıyor. Kural sınıfa bağlıyken tarayıcı
varsayılanına (İTALİK) düşüyordu — "kırılım değişince başlık italik oldu". */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word > i { display: inline-block; font-style: inherit; }
.js .reveal-words .word > i { transform: translate3d(0, 105%, 0); }
/* Satır bazlı maske girişi */
.reveal-lines .line { display: block; overflow: hidden; }
.js .reveal-lines .line > span { display: block; transform: translate3d(0, 105%, 0); }
/* Parallax katmanı — GSAP yPercent devralır */
.parallax { will-change: transform; }
.parallax-media > img { transform: scale(1.14); transform-origin: center; }
/* Sayaç — JS 0dan başlatır; JS yoksa nihai değer HTMLde yazılı kalır */
.counter { font-variant-numeric: tabular-nums; }
/* Animasyon bitince GSAP bu sınıfı ekler, will-change kalkar */
.anim-done { will-change: auto; }
/* ==========================================================================
06 — BUTONLAR
--------------------------------------------------------------------------
Turuncu zeminde KOYU metin kullanılır (beyaz metin AA geçmez: 3.26:1).
.btn--primary : turuncu zemin + koyu metin (5.46:1) -> ana aksiyon
.btn--dark : antrasit zemin + kırık beyaz (17.05:1) -> koyu bölümlerde
.btn--ghost : şeffaf + gri kenarlık -> ikincil
.btn--link : ok animasyonlu metin bağlantısı -> "Tümünü incele"
========================================================================== */
.btn {
--btn-bg: var(--c-orange-500);
--btn-fg: var(--text-on-accent);
--btn-bd: transparent;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
padding: 0.875rem 1.625rem;
min-height: 48px; /* dokunma hedefi >= 44px */
border: 1px solid var(--btn-bd);
border-radius: var(--r-sm);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: .01em;
line-height: 1.2;
text-align: center;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition:
background-color var(--t) var(--e-out),
border-color var(--t) var(--e-out),
color var(--t) var(--e-out),
transform var(--t) var(--e-out),
box-shadow var(--t) var(--e-out);
}
/* Hover parlaması — soldan sağa geçen açık katman */
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: currentColor;
opacity: 0;
transform: translateX(-101%);
transition: transform var(--t-slow) var(--e-out), opacity var(--t) var(--e-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: var(--t-fast); }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] {
cursor: not-allowed;
opacity: .5;
transform: none;
box-shadow: none;
pointer-events: none;
}
/* Ok ikonu — hover ileri kayar */
.btn__arrow { flex: none; width: 16px; height: 16px; transition: transform var(--t) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
/* --- Varyantlar --------------------------------------------------------- */
.btn--primary { box-shadow: var(--sh-accent); }
.btn--primary:hover { --btn-bg: var(--c-orange-400); box-shadow: 0 14px 30px -8px rgba(222,112,27,.55); }
.btn--primary:active { --btn-bg: var(--c-orange-700); --btn-fg: #FFFFFF; } /* beyaz/orange-700 = 6.25:1 (orange-600 ile 4.33:1, AA geçmezdi) */
.btn--dark { --btn-bg: var(--c-ink-900); --btn-fg: var(--text-on-dark); box-shadow: var(--sh-2); }
.btn--dark:hover { --btn-bg: var(--c-ink-700); }
.btn--dark:active { --btn-bg: var(--c-ink-900); }
.btn--ghost {
--btn-bg: transparent;
--btn-fg: var(--text-strong);
--btn-bd: var(--c-gray-400);
}
.btn--ghost:hover { --btn-bd: var(--c-ink-900); --btn-bg: rgba(22,24,26,.04); }
.btn--ghost:active { --btn-bg: rgba(22,24,26,.08); }
/* Koyu zeminde ghost */
.on-dark .btn--ghost, .btn--ghost-light {
--btn-fg: var(--text-on-dark);
--btn-bd: rgba(251,250,247,.35);
}
.on-dark .btn--ghost:hover, .btn--ghost-light:hover {
--btn-bd: var(--text-on-dark);
--btn-bg: rgba(251,250,247,.10);
}
/* Ölçüler */
.btn--sm { padding: .625rem 1.125rem; min-height: 40px; font-size: var(--fs-xs); }
.btn--lg { padding: 1.0625rem 2.125rem; min-height: 56px; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }
/* Metin bağlantısı + kayan ok (kart altı "Tüm Ürünleri İnceleyin") */
.btn--link {
--btn-bg: transparent;
--btn-fg: var(--text-accent);
padding: 0;
min-height: 0;
border: 0;
border-radius: 0;
font-weight: 600;
font-size: var(--fs-sm);
box-shadow: none;
overflow: visible;
}
.btn--link::before { display: none; }
.btn--link::after {
content: "";
position: absolute;
left: 0; right: 22px; bottom: -6px;
height: 2px;
background: var(--c-orange-500);
transform-origin: left;
transform: scaleX(0);
transition: transform var(--t-slow) var(--e-out);
}
.btn--link:hover { transform: none; --btn-fg: var(--c-orange-800); }
.btn--link:hover::after { transform: scaleX(1); }
.on-dark .btn--link { --btn-fg: var(--c-orange-400); }
.on-dark .btn--link:hover { --btn-fg: var(--c-orange-300); }
/* Telefon butonu (CTA yanındaki) */
.btn--tel {
--btn-bg: transparent;
--btn-fg: inherit;
padding: 0;
min-height: 0;
border: 0;
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: 700;
letter-spacing: var(--ls-tight);
box-shadow: none;
overflow: visible;
}
.btn--tel::before { display: none; }
.btn--tel:hover { transform: none; color: var(--c-orange-400); }
/* Gönderim durumu — spinner */
.btn.is-loading { pointer-events: none; color: transparent; }
.btn.is-loading::after {
content: "";
position: absolute;
width: 20px; height: 20px;
border: 2px solid rgba(22,24,26,.28);
border-top-color: var(--c-ink-900);
border-radius: 50%;
animation: st-spin .7s linear infinite;
}
.btn--dark.is-loading::after { border-color: rgba(251,250,247,.3); border-top-color: var(--text-on-dark); }
@keyframes st-spin { to { transform: rotate(360deg); } }
/* İkon butonu (kapatma, şerit okları) */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: var(--r-sm);
border: 1px solid var(--border-soft);
background: var(--bg-surface);
color: var(--text-strong);
transition: background-color var(--t) var(--e-out), border-color var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.btn-icon:hover { border-color: var(--c-ink-900); transform: translateY(-2px); }
.btn-icon:active { transform: translateY(0); }
.btn-icon[disabled] { opacity: .4; pointer-events: none; }
.btn-icon svg { width: 18px; height: 18px; }
/* ==========================================================================
07 — SCROLL İLERLEME ÇUBUĞU
========================================================================== */
.scroll-progress {
position: fixed;
inset: 0 0 auto 0;
height: 2px;
z-index: var(--z-progress);
background: transparent;
pointer-events: none;
}
.scroll-progress__bar {
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--c-orange-600), var(--c-orange-400));
transform: scaleX(0);
transform-origin: 0 50%;
will-change: transform;
}
/* ==========================================================================
08 — HEADER · MASAÜSTÜ MENÜ · DROPDOWN
========================================================================== */
.st-header {
position: fixed;
inset: 0 0 auto 0;
z-index: var(--z-header);
height: var(--header-h);
display: flex;
align-items: center;
background: transparent;
border-bottom: 1px solid transparent;
transition:
height var(--t-slow) var(--e-out),
background-color var(--t-slow) var(--e-out),
border-color var(--t-slow) var(--e-out),
box-shadow var(--t-slow) var(--e-out);
}
/* Scrollda küçülen + cam efektli yapışkan hâl (JS .is-stuck ekler) */
.st-header.is-stuck {
height: var(--header-h-shrunk);
background: rgba(252, 251, 249, .93);
border-bottom-color: var(--border-hair);
box-shadow: var(--sh-1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.st-header.is-stuck {
background: rgba(252, 251, 249, .86);
-webkit-backdrop-filter: saturate(150%) blur(14px);
backdrop-filter: saturate(150%) blur(14px);
}
}
/* Hero üstünde (şeffaf durumda) header içeriği açık renkte durur */
.st-header--over-hero:not(.is-stuck) { color: var(--text-on-dark); }
.st-header--over-hero:not(.is-stuck) .st-nav__link { color: var(--text-on-dark); }
.st-header--over-hero:not(.is-stuck) .st-header__tel { color: var(--text-on-dark); }
/* Banner/iç sayfa: header baştan opak */
.st-header--solid { background: var(--bg-page); border-bottom-color: var(--border-hair); }
.st-header__inner {
width: 100%;
max-width: var(--container-wide);
margin-inline: auto;
padding-inline: var(--gutter);
display: flex;
align-items: center;
gap: var(--sp-6);
}
/* Logo */
.st-logo { display: flex; align-items: center; flex: none; }
.st-logo img, .st-logo svg {
height: 48px; width: auto;
transition: height var(--t-slow) var(--e-out);
}
.is-stuck .st-logo img, .is-stuck .st-logo svg { height: 38px; }
/* Açık/koyu logo değişimi — hero üstünde açık sürüm */
.st-logo__light { display: none; }
.st-header--over-hero:not(.is-stuck) .st-logo__dark { display: none; }
.st-header--over-hero:not(.is-stuck) .st-logo__light { display: block; }
/* Masaüstü menü */
.st-nav { display: none; margin-inline: auto; }
.st-nav__list { display: flex; align-items: center; gap: var(--sp-1); }
.st-nav__item { position: relative; }
.st-nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-body);
border-radius: var(--r-xs);
transition: color var(--t) var(--e-out);
}
.st-nav__link::after {
content: "";
position: absolute;
left: var(--sp-4); right: var(--sp-4);
bottom: 6px;
height: 2px;
background: var(--c-orange-500);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-slow) var(--e-out);
}
.st-nav__link:hover { color: var(--text-strong); }
.st-nav__link:hover::after,
.st-nav__item.is-active .st-nav__link::after,
.st-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.st-nav__link[aria-current="page"] { color: var(--text-strong); font-weight: 600; }
.st-header--over-hero:not(.is-stuck) .st-nav__link:hover,
.st-header--over-hero:not(.is-stuck) .st-nav__link[aria-current="page"] { color: #FFFFFF; }
/* Dropdown oku */
.st-nav__caret { width: 10px; height: 10px; opacity: .6; transition: transform var(--t) var(--e-out); }
.st-nav__item:hover .st-nav__caret,
.st-nav__item:focus-within .st-nav__caret { transform: rotate(180deg); }
/* Açılır alt menü (ürünler / hizmetler) */
.st-dropdown {
position: absolute;
top: calc(100% + 10px);
left: 50%;
z-index: var(--z-dropdown);
min-width: 290px;
padding: var(--sp-3);
background: var(--bg-surface);
border: 1px solid var(--border-hair);
border-radius: var(--r-md);
box-shadow: var(--sh-3);
opacity: 0;
visibility: hidden;
transform: translate(-50%, -8px);
transition:
opacity var(--t) var(--e-out),
transform var(--t) var(--e-out),
visibility 0s linear var(--t);
}
/* Fare köprüsü — menü ile panel arasında boşluk olsa da hover kopmaz */
.st-nav__item::after { content: ""; position: absolute; inset: 100% 0 auto 0; height: 12px; }
.st-nav__item:hover > .st-dropdown,
.st-nav__item:focus-within > .st-dropdown {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
transition-delay: 0s;
}
.st-dropdown__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-xs);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-body);
transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.st-dropdown__link small { display: block; font-size: var(--fs-2xs); color: var(--text-muted); font-weight: 400; }
.st-dropdown__link:hover,
.st-dropdown__link:focus-visible {
background: var(--c-orange-50);
color: var(--text-accent);
}
/* Hover'da ONCEDEN padding-left buyuyordu; panel `width: max-content` oldugu
icin acilir listenin genisligi hover ile degisiyordu (2026-09-08 talebi).
Kayma artik ic ogeye transform ile veriliyor: genislik sabit kalir. */
/* Kayma YALNIZ metinde: ikon da otelenince acilir listede ikonlar hoverdan
hovera zipliyordu (2026-09-08 talebi). Ikon sabit, metin yumusak kayar. */
.st-dropdown__link > span { transition: transform var(--t) var(--e-out); }
.st-dropdown__link:hover > span,
.st-dropdown__link:focus-visible > span { transform: translateX(4px); }
.st-dropdown__link:hover small { color: var(--c-orange-800); }
.st-dropdown__foot {
margin-top: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--border-hair);
}
/* Header sağ blok */
.st-header__actions { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; flex: none; }
.st-header__tel {
display: none;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: var(--ls-tight);
color: var(--text-strong);
transition: color var(--t) var(--e-out);
}
.st-header__tel:hover { color: var(--text-accent); }
.st-header__tel svg { width: 16px; height: 16px; color: var(--c-orange-500); }
.st-header__cta { display: none; }
/* ==========================================================================
09 — MOBİL MENÜ (hamburger + tam ekran panel)
========================================================================== */
.st-burger {
position: relative;
z-index: calc(var(--z-drawer) + 1);
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 46px; height: 46px;
padding: 0 11px;
border-radius: var(--r-sm);
flex: none;
}
.st-burger span {
display: block;
height: 2px;
width: 100%;
background: currentColor;
border-radius: 2px;
transition: transform var(--t-slow) var(--e-out), opacity var(--t) var(--e-out), width var(--t) var(--e-out);
}
.st-burger span:nth-child(2) { width: 70%; }
.st-burger:hover span:nth-child(2) { width: 100%; }
.st-burger[aria-expanded="true"] { color: var(--text-on-dark); }
.st-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.st-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.st-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.st-drawer {
position: fixed;
inset: 0;
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
background: var(--c-ink-900);
color: var(--text-on-dark);
padding: calc(var(--header-h) + var(--sp-4)) var(--gutter) var(--sp-10);
overflow-y: auto;
overscroll-behavior: contain;
clip-path: circle(0% at calc(100% - 44px) 42px);
visibility: hidden;
transition: clip-path var(--t-slower) var(--e-inout), visibility 0s linear var(--t-slower);
}
.st-drawer.is-open {
clip-path: circle(155% at calc(100% - 44px) 42px);
visibility: visible;
transition-delay: 0s;
}
.st-drawer__list { display: flex; flex-direction: column; }
.st-drawer__item { border-bottom: 1px solid var(--border-dark); }
.st-drawer__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-5) 0;
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: var(--ls-tight);
color: var(--text-on-dark);
transition: color var(--t) var(--e-out), padding-left var(--t) var(--e-out);
}
.st-drawer__link:hover,
.st-drawer__link[aria-current="page"] { color: var(--c-orange-400); padding-left: var(--sp-3); }
/* Alt liste — tıklamayla açılır akordeon */
.st-drawer__toggle { flex: none; padding: var(--sp-2); color: var(--c-orange-400); }
.st-drawer__toggle svg { width: 18px; height: 18px; transition: transform var(--t) var(--e-out); }
.st-drawer__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.st-drawer__sub {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--t-slow) var(--e-inout);
}
.st-drawer__sub > div { overflow: hidden; }
.st-drawer__sub.is-open { grid-template-rows: 1fr; }
.st-drawer__sub a {
display: block;
padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
font-size: var(--fs-sm);
color: var(--text-on-dark-muted);
border-left: 2px solid var(--border-dark);
transition: color var(--t) var(--e-out), border-color var(--t) var(--e-out);
}
.st-drawer__sub a:hover { color: var(--text-on-dark); border-left-color: var(--c-orange-500); }
.st-drawer__foot { margin-top: auto; padding-top: var(--sp-10); display: grid; gap: var(--sp-4); }
.st-drawer__meta { font-size: var(--fs-sm); color: var(--text-on-dark-muted); line-height: var(--lh-snug); }
.st-drawer__meta strong { display: block; color: var(--text-on-dark); font-weight: 600; }
/* ==========================================================================
10 — ÖZEL İMLEÇ (custom cursor)
--------------------------------------------------------------------------
Plan 3. bölüm: "imleç takip eden BÜYÜK daireler kapsam dışı".
Bu yüzden ölçülü bir çözüm: 6px nokta + 30px ince halka.
YALNIZCA pointer:fine + hover destekli cihazlarda ve reduced-motion kapalıysa.
========================================================================== */
.st-cursor, .st-cursor-dot { display: none; }
@media (pointer: fine) and (hover: hover) {
html.has-cursor .st-cursor,
html.has-cursor .st-cursor-dot {
display: block;
position: fixed;
top: 0; left: 0;
z-index: var(--z-cursor);
pointer-events: none;
will-change: transform;
}
html.has-cursor .st-cursor {
width: 30px; height: 30px;
margin: -15px 0 0 -15px;
border: 1px solid var(--c-orange-500);
border-radius: 50%;
transition: width var(--t) var(--e-out), height var(--t) var(--e-out),
margin var(--t) var(--e-out), background-color var(--t) var(--e-out),
border-color var(--t) var(--e-out), opacity var(--t) var(--e-out);
}
html.has-cursor .st-cursor-dot {
width: 6px; height: 6px;
margin: -3px 0 0 -3px;
background: var(--c-orange-500);
border-radius: 50%;
}
/* Bağlantı/buton üstünde: halka büyür ve dolar */
html.has-cursor.cursor-hover .st-cursor {
width: 56px; height: 56px;
margin: -28px 0 0 -28px;
background: rgba(222, 112, 27, .16);
border-color: transparent;
}
html.has-cursor.cursor-hover .st-cursor-dot { opacity: 0; }
/* Etiketli hâl (kart üstünde "Detay") */
html.has-cursor .st-cursor__label {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-orange-900);
opacity: 0;
transition: opacity var(--t) var(--e-out);
}
html.has-cursor.cursor-label .st-cursor__label { opacity: 1; }
/* Metin seçimi sırasında imleç gizlenmez, yalnızca soluklaşır */
html.has-cursor.cursor-text .st-cursor { opacity: .25; }
}
/* --------------------------------------------------------------------------
10.b Sayfa geçiş örtüsü (page transition veil)
JS yoksa hiç görünmez: başlangıç scaleY(0). GSAP giriş/çıkışta sürer.
-------------------------------------------------------------------------- */
.page-veil {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
background: var(--c-ink-900);
pointer-events: none;
transform: scaleY(0);
transform-origin: top;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .page-veil { display: none; } }
/* ==========================================================================
11 — HERO
========================================================================== */
.st-hero {
position: relative;
isolation: isolate;
min-height: 92svh;
min-height: 92vh;
display: flex;
align-items: flex-end;
padding-top: calc(var(--header-h) + var(--sp-10));
padding-bottom: clamp(3rem, 1.5rem + 6vw, 6.5rem);
color: var(--text-on-dark);
background: var(--c-ink-900);
overflow: hidden;
}
.st-hero__bg { position: absolute; inset: -8% 0 -8% 0; z-index: 0; }
.st-hero__bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 55%; /* envanter: hero-1 */
}
.st-hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--ov-hero); pointer-events: none; }
/* İnce endüstriyel ızgara dokusu — turuncu tint DEĞİL, nötr */
.st-hero__grid {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: .16;
background-image:
linear-gradient(to right, rgba(251,250,247,.25) 1px, transparent 1px),
linear-gradient(to bottom, rgba(251,250,247,.25) 1px, transparent 1px);
background-size: 96px 96px;
mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
-webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
}
.st-hero__inner { position: relative; z-index: 3; width: 100%; }
.st-hero__eyebrow { color: var(--c-orange-400); margin-bottom: var(--sp-5); }
.st-hero__eyebrow::before { background: var(--c-orange-500); }
.st-hero__title {
font-size: var(--fs-5xl);
font-weight: 800;
line-height: var(--lh-tight);
letter-spacing: var(--ls-mega);
color: #FFFFFF;
max-width: 17ch;
text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
/* Slogandaki TEK vurgu kelime turuncu (envanter notu 2) */
.st-hero__title .accent { color: var(--c-orange-400); }
.st-hero__sub {
margin-top: var(--sp-6);
max-width: 62ch;
font-size: var(--fs-md);
line-height: var(--lh-loose);
color: rgba(251, 250, 247, .92);
}
.st-hero__actions { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-4); }
/* Aşağı ok göstergesi */
.st-hero__scroll {
position: absolute;
left: 50%; bottom: var(--sp-6);
z-index: 4;
transform: translateX(-50%);
display: none;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-2xs);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: rgba(251, 250, 247, .7);
}
.st-hero__scroll-line {
width: 1px; height: 46px;
background: linear-gradient(to bottom, rgba(251,250,247,.05), var(--c-orange-500));
transform-origin: top;
}
/* Hero altı hızlı erişim şeridi — iki iş kolu */
.st-hero-split {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--border-hair);
border-block: 1px solid var(--border-hair);
}
.st-hero-split__item {
display: flex;
align-items: center;
gap: var(--sp-5);
padding: var(--sp-8) var(--sp-6);
background: var(--bg-page);
transition: background-color var(--t) var(--e-out);
}
.st-hero-split__item:hover { background: var(--bg-surface); }
.st-hero-split__icon {
flex: none;
width: 52px; height: 52px;
display: grid; place-items: center;
border-radius: var(--r-sm);
background: var(--c-orange-50);
color: var(--c-orange-700);
}
.st-hero-split__icon svg { width: 26px; height: 26px; }
.st-hero-split__item h3 { font-size: var(--fs-md); margin-bottom: 2px; }
.st-hero-split__item p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); }
/* ==========================================================================
12 — BÖLÜM BAŞLIĞI
========================================================================== */
.section-head { margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
.section-head__title { margin-top: var(--sp-4); max-width: 20ch; }
.section-head__desc {
margin-top: var(--sp-5);
max-width: 62ch;
font-size: var(--fs-md);
line-height: var(--lh-loose);
color: var(--text-muted);
}
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-head__title,
.section-head--center .section-head__desc { margin-inline: auto; }
/* Başlık solda, açıklama + buton sağda */
.section-head--split { display: grid; gap: var(--sp-6); align-items: end; }
.section-head--split .section-head__desc { margin-top: 0; }
/* ==========================================================================
13 — ÜRÜN KARTI
--------------------------------------------------------------------------
Envanter notu 3 + 7: başlık görselin ÜZERİNE değil ALTINA gelir.
Ürün görseli kimyasalı değil KULLANIM ALANINI gösterir; bu yüzden
kısa açıklama başlığın hemen altında, aynı okuma bloğunda durur.
========================================================================== */
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: 1px solid var(--border-hair);
border-radius: var(--r-md);
overflow: hidden;
transition: transform var(--t-slow) var(--e-out),
box-shadow var(--t-slow) var(--e-out),
border-color var(--t) var(--e-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--border-soft); }
.card:focus-within { border-color: var(--c-orange-500); }
/* Kartın tamamını tıklanabilir yapan görünmez katman */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--focus-glow);
}
.card__media { position: relative; overflow: hidden; background: var(--c-sand-200); }
.card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--t-slower) var(--e-out);
}
.card:hover .card__media img { transform: scale(1.06); }
/* Üst turuncu şerit — hover soldan sağa büyür */
.card__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: var(--c-orange-500);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-slow) var(--e-out);
z-index: 1;
}
.card:hover .card__media::after { transform: scaleX(1); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-6); gap: var(--sp-3); }
.card__title { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.card__title-en {
display: block;
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-muted);
margin-top: 4px;
}
.card__text {
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--text-muted);
/* 3 satırda kes — "Neden Biz" dışındaki kısa açıklamalarda taşma olmaz */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card__foot {
margin-top: auto;
padding-top: var(--sp-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
border-top: 1px solid var(--border-hair);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text-accent);
}
.card__foot svg { width: 16px; height: 16px; transition: transform var(--t) var(--e-out); }
.card:hover .card__foot svg { transform: translateX(4px); }
/* Ürün kartı — 4:3 görsel (envanter: product-*.jpg 1200x900) */
.card--product .card__media { aspect-ratio: 4 / 3; }
/* Hizmet kartı — 8:5 görsel + ikon rozeti */
.card--service .card__media { aspect-ratio: 8 / 5; }
.card--service .card__icon {
position: absolute;
left: var(--sp-5); bottom: var(--sp-5);
z-index: 2;
width: 48px; height: 48px;
display: grid; place-items: center;
border-radius: var(--r-sm);
background: var(--c-orange-500);
color: var(--text-on-accent);
box-shadow: var(--sh-2);
transition: transform var(--t-slow) var(--e-spring);
}
.card--service:hover .card__icon { transform: translateY(-4px) rotate(-6deg); }
.card--service .card__icon svg { width: 24px; height: 24px; }
.card--service .card__text { -webkit-line-clamp: 4; }
/* Sadeleştirilmiş kart (görselsiz — 404, ilgili linkler) */
.card--plain { padding: var(--sp-6); }
.card--plain .card__body { padding: 0; }
/* ==========================================================================
14 — HİZMET / DEĞER İKONU ORTAK KUTUSU
========================================================================== */
.icon-box {
flex: none;
display: grid;
place-items: center;
width: 56px; height: 56px;
border-radius: var(--r-sm);
background: var(--c-orange-50);
color: var(--c-orange-700);
transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out), transform var(--t-slow) var(--e-spring);
}
.icon-box svg { width: 26px; height: 26px; stroke-width: 1.6; }
.icon-box--sm { width: 40px; height: 40px; }
.icon-box--sm svg { width: 20px; height: 20px; }
.icon-box--solid { background: var(--c-orange-500); color: var(--text-on-accent); }
.icon-box--dark { background: rgba(222,112,27,.14); color: var(--c-orange-400); }
/* Çizgi ikon dili — inline SVG, stroke tabanlı */
.icon-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* ==========================================================================
15 — "NEDEN BİZ" LİSTESİ
--------------------------------------------------------------------------
7 madde. Metin uzunlukları eşit DEĞİL (4. madde 168 karakter, 7. madde 74).
Bu yüzden ızgara + eşit yükseklik kartı KULLANILMAZ; numaralı akış listesi
kullanılır ve yükseklik içeriğe göre serbest kalır. Taşma imkânsız.
========================================================================== */
.why {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 0;
counter-reset: why;
}
/* Sol kenardaki dikey ilerleme çizgisi — GSAP scaleY ile boyar */
.why__track {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--border-hair);
}
.why__track-fill {
position: absolute;
inset: 0;
background: var(--c-orange-500);
transform: scaleY(0);
transform-origin: top;
will-change: transform;
}
.why__item {
position: relative;
counter-increment: why;
padding: var(--sp-8) 0 var(--sp-8) clamp(3.25rem, 2rem + 5vw, 6rem);
border-bottom: 1px solid var(--border-hair);
}
.why__item:last-child { border-bottom: 0; }
.why__item::before {
content: counter(why, decimal-leading-zero);
position: absolute;
left: var(--sp-5); top: var(--sp-8);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: var(--ls-wide);
color: var(--text-accent);
transition: color var(--t) var(--e-out);
}
.why__item::after {
content: "";
position: absolute;
left: -4px; top: calc(var(--sp-8) + .35em);
width: 10px; height: 10px;
border-radius: 50%;
background: var(--bg-page);
border: 2px solid var(--c-gray-300);
transition: border-color var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.why__item.is-active::after,
.why__item:hover::after { border-color: var(--c-orange-500); transform: scale(1.25); }
.why__title { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.why__text { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--text-body); max-width: 68ch; }
/* ==========================================================================
16 — DEĞER KARTI (Hakkımızda / Değerlerimiz — 6 madde)
========================================================================== */
.value-card {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-7);
background: var(--bg-surface);
border: 1px solid var(--border-hair);
border-radius: var(--r-md);
border-top: 3px solid transparent;
transition: border-color var(--t) var(--e-out),
box-shadow var(--t-slow) var(--e-out);
}
.value-card:hover {
border-top-color: var(--c-orange-500);
transform: translateY(-4px);
box-shadow: var(--sh-2);
}
.value-card:hover .icon-box { background: var(--c-orange-500); color: var(--text-on-accent); transform: rotate(-8deg) scale(1.05); }
.value-card__title { font-size: var(--fs-md); }
.value-card__text { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-muted); }
/* ==========================================================================
18 — İMZA AN #2: YEDİ KULE SAHNESİ (hakkımızda)
--------------------------------------------------------------------------
Kaynak cümle paragrafta BİREBİR kalır; burası aynı 7 ifadenin görsel
dağılımıdır. Yeni metin yazılmaz.
========================================================================== */
.towers { position: relative; background: var(--c-ink-900); color: var(--text-on-dark); overflow: hidden; }
.towers::before {
content: "";
position: absolute;
inset: 0;
opacity: .10;
background-image:
linear-gradient(to right, rgba(251,250,247,.28) 1px, transparent 1px),
linear-gradient(to bottom, rgba(251,250,247,.18) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to top, #000, transparent 70%);
-webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
pointer-events: none;
}
.towers__inner { position: relative; z-index: 1; }
.towers__stage {
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: end;
gap: clamp(.375rem, .2rem + .8vw, 1rem);
min-height: clamp(240px, 34vw, 420px);
margin-top: clamp(2rem, 1.2rem + 3vw, 4rem);
padding-bottom: var(--sp-6);
border-bottom: 1px solid var(--border-dark);
}
.tower {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 100%;
}
.tower__bar {
width: 100%;
border-radius: 3px 3px 0 0;
background: linear-gradient(to top, var(--c-ink-700), var(--c-ink-600));
transform-origin: bottom;
position: relative;
}
/* 7 kule kademeli yükselir — "yedi kule" motifi */
.tower:nth-child(1) .tower__bar { height: 34%; }
.tower:nth-child(2) .tower__bar { height: 46%; }
.tower:nth-child(3) .tower__bar { height: 58%; }
.tower:nth-child(4) .tower__bar { height: 100%; }
.tower:nth-child(5) .tower__bar { height: 58%; }
.tower:nth-child(6) .tower__bar { height: 46%; }
.tower:nth-child(7) .tower__bar { height: 34%; }
/* Kule tepesindeki turuncu bant — aydınlandığında yanar */
.tower__bar::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: var(--c-gray-700);
border-radius: 3px 3px 0 0;
transition: background-color var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out);
}
.tower.is-lit .tower__bar::after {
background: var(--c-orange-500);
box-shadow: 0 0 18px 2px rgba(222,112,27,.55);
}
.tower.is-lit .tower__bar { background: linear-gradient(to top, var(--c-ink-700), #3F454A); }
.tower__label {
margin-top: var(--sp-4);
font-family: var(--font-display);
font-size: clamp(.6875rem, .58rem + .5vw, .9375rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: var(--ls-tight);
text-align: center;
color: var(--text-on-dark-muted);
transition: color var(--t-slow) var(--e-out);
hyphens: auto;
}
.tower.is-lit .tower__label { color: var(--text-on-dark); }
.tower__label b { display: block; color: var(--c-orange-400); font-weight: 700; }
/* Mobil: kuleler YAN YANA kalir, etiketler asagidan yukari dikey yazilir
(2026-09-07, kullanici talebi). Onceki dikey liste sagi yapisik duruyor ve
her madde iki satira boluniyordu. */
@media (max-width: 640px) {
.towers__stage {
grid-template-columns: repeat(7, 1fr);
align-items: end;
gap: 5px;
min-height: 0;
padding-bottom: var(--sp-5);
border-bottom: 1px solid var(--border-dark);
}
.tower {
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
gap: var(--sp-3);
height: auto;
padding: 0;
border-bottom: 0;
}
.tower__bar { width: 100%; border-radius: 3px 3px 0 0; }
/* Kademe px olarak: yuzde degerler artik esnek yukseklige dayanamiyor */
.tower:nth-child(1) .tower__bar,
.tower:nth-child(7) .tower__bar { height: 26px !important; }
.tower:nth-child(2) .tower__bar,
.tower:nth-child(6) .tower__bar { height: 38px !important; }
.tower:nth-child(3) .tower__bar,
.tower:nth-child(5) .tower__bar { height: 50px !important; }
.tower:nth-child(4) .tower__bar { height: 64px !important; }
.tower__bar::after { inset: 0 0 auto 0; height: 4px; border-radius: 3px 3px 0 0; }
/* Dikey yazi: vertical-rl + 180deg = ASAGIDAN YUKARI okunur. */
.tower__label {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 132px;
margin-top: 0;
padding-block: 0;
font-size: .6875rem;
line-height: 1.15;
letter-spacing: normal;
text-align: right; /* dondurme sonrasi: cubugun altindan baslar */
white-space: nowrap;
hyphens: none;
/* 2026-09-07: kutu sutunun tamamini kapliyordu; dikey yazma modunda
tek satir blok basina (dondurme sonrasi SOLA) yapisip kuleyle
hizasizlasiyordu. Kutu metin genisligine inip ortalaniyor. */
align-self: center;
width: max-content;
}
.tower__label b { display: inline; }
.tower__label b::before { content: " "; }
}
/* ==========================================================================
19 — İMZA AN #3: İSTATİSTİK ŞERİDİ
========================================================================== */
.st-stats { position: relative; background: var(--c-ink-900); color: var(--text-on-dark); overflow: hidden; }
.st-stats__texture {
position: absolute;
inset: -20% 0;
opacity: .12;
background-image:
linear-gradient(to right, rgba(251,250,247,.3) 1px, transparent 1px),
linear-gradient(to bottom, rgba(251,250,247,.3) 1px, transparent 1px);
background-size: 64px 64px;
will-change: transform;
pointer-events: none;
}
.st-stats__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--border-dark);
}
.st-stat {
background: var(--c-ink-900);
padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1rem, .6rem + 1.5vw, 2rem);
text-align: center;
}
.st-stat__value {
display: flex;
align-items: baseline;
justify-content: center;
font-family: var(--font-display);
font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
font-weight: 800;
line-height: 1;
letter-spacing: var(--ls-mega);
color: #FFFFFF;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.st-stat__prefix, .st-stat__suffix { color: var(--c-orange-500); font-weight: 700; }
.st-stat__label {
margin-top: var(--sp-4);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--text-on-dark-muted);
max-width: 20ch;
margin-inline: auto;
}
/* ==========================================================================
20 — CTA BÖLÜMÜ (tek bileşen, tüm sayfalarda tekrar kullanılır)
========================================================================== */
.st-cta {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--c-ink-900);
color: var(--text-on-dark);
padding-block: clamp(4rem, 2.5rem + 6vw, 8rem);
}
.st-cta__bg { position: absolute; inset: -10% 0; z-index: 0; }
.st-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.st-cta__scrim { position: absolute; inset: 0; z-index: 1; background: var(--ov-cta); pointer-events: none; }
.st-cta__inner { position: relative; z-index: 2; max-width: 760px; }
.st-cta--center .st-cta__inner { margin-inline: auto; text-align: center; }
.st-cta--center .eyebrow { justify-content: center; }
.st-cta__title { font-size: var(--fs-3xl); color: #FFFFFF; margin-top: var(--sp-5); }
.st-cta__text { margin-top: var(--sp-5); font-size: var(--fs-md); line-height: var(--lh-loose); color: rgba(251,250,247,.88); }
.st-cta__actions {
margin-top: var(--sp-8);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-6);
}
.st-cta--center .st-cta__actions { justify-content: center; }
.st-cta__tel {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
color: var(--text-on-dark);
transition: color var(--t) var(--e-out);
}
.st-cta__tel svg { width: 20px; height: 20px; color: var(--c-orange-500); }
.st-cta__tel span { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--ls-tight); }
.st-cta__tel small { display: block; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 400; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-on-dark-muted); }
.st-cta__tel:hover { color: var(--c-orange-400); }
/* ==========================================================================
21 — SAYFA BANNER + BREADCRUMB
========================================================================== */
.st-banner {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: clamp(280px, 26vw + 120px, 440px);
padding-top: calc(var(--header-h) + var(--sp-8));
padding-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem);
background: var(--c-ink-900);
color: var(--text-on-dark);
overflow: hidden;
}
.st-banner__bg { position: absolute; inset: -6% 0; z-index: 0; }
.st-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.st-banner__scrim { position: absolute; inset: 0; z-index: 1; background: var(--ov-banner); pointer-events: none; }
.st-banner__inner { position: relative; z-index: 2; width: 100%; }
.st-banner__title { font-size: var(--fs-4xl); color: #FFFFFF; max-width: 20ch; }
/* Turuncu ayraç. GSAP pseudo-elemana erişemez -> --rule-scale değişkeni animasyonlanır.
Değişken tanımsızken 1 olduğu için JS kapalıyken ayraç görünür kalır. */
.st-banner__title::after {
content: "";
display: block;
width: 64px; height: 3px;
margin-top: var(--sp-5);
background: var(--c-orange-500);
border-radius: var(--r-pill);
transform-origin: left;
transform: scaleX(var(--rule-scale, 1));
}
.st-banner__sub { margin-top: var(--sp-5); max-width: 60ch; font-size: var(--fs-md); color: rgba(251,250,247,.9); line-height: var(--lh-loose); }
.st-banner__en {
display: block;
margin-top: var(--sp-2);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-orange-400);
}
/* Breadcrumb */
.breadcrumb { margin-bottom: var(--sp-5); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: rgba(251,250,247,.72); }
.breadcrumb li + li::before { content: "/"; color: rgba(251,250,247,.4); }
.breadcrumb a { transition: color var(--t) var(--e-out); }
.breadcrumb a:hover { color: var(--c-orange-400); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: #FFFFFF; font-weight: 500; }
/* Açık zeminde breadcrumb */
.breadcrumb--light li { color: var(--text-muted); }
.breadcrumb--light li + li::before { color: var(--c-gray-300); }
.breadcrumb--light [aria-current="page"] { color: var(--text-strong); }
/* ==========================================================================
22 — ZİG-ZAG HİZMET LİSTESİ (hizmetler.php)
========================================================================== */
.zigzag { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); counter-reset: zz; }
.zigzag__row {
position: relative;
counter-increment: zz;
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-6);
align-items: center;
}
/* Arka plandaki büyük soluk numara — parallax ile hafif kayar */
.zigzag__num {
position: absolute;
right: 0; top: -.35em;
z-index: 0;
font-family: var(--font-display);
font-size: clamp(5rem, 3rem + 12vw, 12rem);
font-weight: 800;
line-height: .8;
letter-spacing: var(--ls-mega);
color: var(--c-sand-300);
opacity: .8;
pointer-events: none;
user-select: none;
font-variant-numeric: tabular-nums;
}
.zigzag__num::before { content: counter(zz, decimal-leading-zero); }
.zigzag__media { position: relative; z-index: 1; }
.zigzag__media .media { aspect-ratio: 8 / 5; }
.zigzag__body { position: relative; z-index: 1; }
.zigzag__title { font-size: var(--fs-2xl); margin-top: var(--sp-4); }
.zigzag__short {
margin-top: var(--sp-4);
font-size: var(--fs-md);
font-weight: 500;
color: var(--text-strong);
padding-left: var(--sp-5);
border-left: 3px solid var(--c-orange-500);
line-height: var(--lh-snug);
}
.zigzag__text { margin-top: var(--sp-5); color: var(--text-muted); line-height: var(--lh-loose); }
.zigzag__row a.zigzag__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.zigzag__cta { margin-top: var(--sp-6); }
.zigzag__row:hover .zigzag__media .media img { transform: scale(1.04); }
.zigzag__media .media img { transition: transform var(--t-slower) var(--e-out); }
/* ==========================================================================
23 — DETAY SAYFASI DÜZENİ
========================================================================== */
.detail { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.4rem + 3vw, 4rem); }
/* Yapışkan hızlı teklif kartı (masaüstü) */
.quote-card {
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: var(--sp-7);
box-shadow: var(--sh-2);
border-top: 3px solid var(--c-orange-500);
}
.quote-card__eyebrow {
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--text-accent);
}
.quote-card__title { margin-top: var(--sp-3); font-size: var(--fs-lg); }
.quote-card__text { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-loose); }
.quote-card .btn { margin-top: var(--sp-5); }
.quote-card__tel {
margin-top: var(--sp-5);
padding-top: var(--sp-5);
border-top: 1px solid var(--border-hair);
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-sm);
color: var(--text-muted);
}
.quote-card__tel a { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.quote-card__tel a:hover { color: var(--text-accent); }
/* "Bu hizmetle kazanacaklarınız" / "Başlıca kullanım alanları" listesi */
.benefits { display: grid; gap: var(--sp-4); }
.benefits__item {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--sp-4);
padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5);
background: var(--bg-surface);
border: 1px solid var(--border-hair);
border-radius: var(--r-sm);
font-size: var(--fs-base);
line-height: var(--lh-snug);
color: var(--text-body);
transition: border-color var(--t) var(--e-out), background-color var(--t) var(--e-out);
}
.benefits__item:hover { border-color: var(--c-orange-300); background: var(--c-orange-50); }
.benefits__check {
flex: none;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--c-orange-500);
color: var(--text-on-accent);
margin-top: 1px;
}
.benefits__check svg { width: 14px; height: 14px; stroke-width: 2.6; }
/* Alt turuncu çizgi — GSAP --line değişkenini 0'dan 1'e çizer.
Tanımsızken 1: JS kapalıyken çizgi görünür. */
.benefits__item::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--c-orange-500);
transform: scaleX(var(--line, 1));
transform-origin: left;
}
/* Ambalaj ve belgeler şeridi (7 ürün detayında + urunler.php) */
.packaging {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-5);
padding: var(--sp-7);
background: var(--bg-surface);
border: 1px solid var(--border-hair);
border-radius: var(--r-md);
}
.packaging__item { display: flex; align-items: center; gap: var(--sp-4); }
.packaging__item h4 { font-size: var(--fs-base); }
.packaging__item p { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }
.packaging__note {
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding-top: var(--sp-5);
border-top: 1px solid var(--border-hair);
font-size: var(--fs-sm);
color: var(--text-body);
}
.packaging__note svg { flex: none; width: 18px; height: 18px; color: var(--c-orange-600); margin-top: 2px; }
/* Vurgu kutusu — ürünler sayfası girişindeki MSDS/ambalaj paragrafı */
.callout {
position: relative;
padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
background: var(--c-orange-50);
border: 1px solid var(--c-orange-200);
border-radius: var(--r-sm);
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--text-body);
}
.callout::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--c-orange-500);
border-radius: var(--r-sm) 0 0 var(--r-sm);
}
/* ==========================================================================
24 — YATAY ŞERİT (diğer ürünler / hizmetler; mobilde ürün ızgarası)
========================================================================== */
.rail { position: relative; }
.rail__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(240px, 78vw);
gap: var(--gap-grid);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
padding-bottom: var(--sp-4);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.rail__track > * { scroll-snap-align: start; }
.rail__head { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.rail__nav { display: none; gap: var(--sp-2); }
/* Sağ kenarda "daha var" ipucu — mobilde kısmi görünen kart hissi */
.rail::after {
content: "";
position: absolute;
top: 0; bottom: var(--sp-4); right: calc(var(--gutter) * -1);
width: clamp(24px, 6vw, 64px);
background: linear-gradient(to right, transparent, var(--bg-page));
pointer-events: none;
}
.section--band .rail::after { background: linear-gradient(to right, transparent, var(--bg-band)); }
/* ==========================================================================
25 — FORM ALANLARI
========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field--full { grid-column: 1 / -1; }
.label {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text-strong);
letter-spacing: var(--ls-tight);
}
.label .req { color: var(--c-danger); margin-left: 2px; }
.label .opt { color: var(--text-muted); font-weight: 400; font-size: var(--fs-xs); margin-left: var(--sp-2); }
.input, .select, .textarea {
width: 100%;
min-height: 50px;
padding: var(--sp-3) var(--sp-4);
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
color: var(--text-strong);
font-size: var(--fs-base);
line-height: 1.5;
transition: border-color var(--t) var(--e-out),
box-shadow var(--t) var(--e-out),
background-color var(--t) var(--e-out);
}
.textarea { min-height: 150px; padding-block: var(--sp-4); line-height: var(--lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--c-gray-400); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-gray-600); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--c-orange-500);
box-shadow: 0 0 0 4px var(--focus-glow);
background: #FFFFFF;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-glow); }
.input:disabled, .select:disabled, .textarea:disabled {
background: var(--c-sand-200);
border-color: var(--border-hair);
color: var(--text-muted);
cursor: not-allowed;
}
/* Select — özel ok */
.select {
appearance: none;
-webkit-appearance: none;
padding-right: var(--sp-10);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23454545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-4) center;
cursor: pointer;
}
/* Yardım metni + hata */
.help { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }
.error-text {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--c-danger);
line-height: var(--lh-snug);
}
.error-text svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
/* Hata durumu */
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--c-danger); background: var(--c-danger-bg); }
.field.has-error .input:focus,
.field.has-error .select:focus,
.field.has-error .textarea:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .16); }
.field.has-error .label { color: var(--c-danger); }
/* Başarı durumu */
.field.is-valid .input,
.field.is-valid .select,
.field.is-valid .textarea { border-color: var(--c-success); }
/* Koşullu alan — Talep Konusu = "Ürün Satın Alma" iken açılır */
.field--conditional {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows var(--t-slow) var(--e-inout), opacity var(--t) var(--e-out);
}
.field--conditional > .field__inner { overflow: hidden; min-height: 0; }
.field--conditional.is-open { grid-template-rows: 1fr; opacity: 1; }
/* Ön seçimle gelen alanın 1 saniyelik turuncu vurgusu */
.field.is-highlighted .select,
.field.is-highlighted .input { animation: st-field-pulse 1s var(--e-out) 1; }
@keyframes st-field-pulse {
0% { box-shadow: 0 0 0 0 rgba(222,112,27,.55); border-color: var(--c-orange-500); }
100% { box-shadow: 0 0 0 14px rgba(222,112,27,0); border-color: var(--border-strong); }
}
/* Onay kutusu / KVKK satırı */
.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); }
.check input[type="checkbox"] {
flex: none;
appearance: none;
-webkit-appearance: none;
width: 20px; height: 20px;
margin-top: 2px;
border: 1px solid var(--border-strong);
border-radius: var(--r-xs);
background: var(--bg-surface);
cursor: pointer;
transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.check input[type="checkbox"]:checked {
background: var(--c-orange-500);
border-color: var(--c-orange-600);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316181A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
/* Bal küpü (honeypot) — ekranda ve ekran okuyucuda yok */
.hp-field {
position: absolute !important;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
opacity: 0;
}
/* Form kabuğu */
.form-shell {
background: var(--bg-surface);
border: 1px solid var(--border-hair);
border-radius: var(--r-md);
padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
box-shadow: var(--sh-2);
}
.form-shell__head { margin-bottom: var(--sp-7); }
.form-shell__head h2 { font-size: var(--fs-2xl); }
.form-shell__head p { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.form__foot { display: flex; flex-direction: column; gap: var(--sp-4); }
/* İletişim bilgi kartı */
.info-card {
display: flex;
gap: var(--sp-4);
padding: var(--sp-6);
background: var(--bg-surface);
border: 1px solid var(--border-hair);
border-radius: var(--r-md);
transition: border-color var(--t) var(--e-out);
}
.info-card:hover { border-color: var(--c-orange-300); transform: translateY(-3px); }
.info-card__label {
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--text-muted);
}
.info-card__value { margin-top: var(--sp-2); font-size: var(--fs-base); font-weight: 500; color: var(--text-strong); line-height: var(--lh-snug); }
.info-card__value a:hover { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
.info-card__extra { margin-top: var(--sp-3); font-size: var(--fs-xs); }
/* Harita kabuğu — lazy iframe */
.map-shell {
position: relative;
aspect-ratio: 16 / 9;
min-height: 300px;
border-radius: var(--r-md);
overflow: hidden;
background: var(--c-sand-200);
border: 1px solid var(--border-hair);
}
.map-shell iframe { width: 100%; height: 100%; border: 0; }
.map-shell__placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
gap: var(--sp-3);
text-align: center;
color: var(--text-muted);
font-size: var(--fs-sm);
}
/* ==========================================================================
26 — BİLDİRİM / ALERT
========================================================================== */
.alert {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
padding: var(--sp-5) var(--sp-6);
border: 1px solid var(--c-info-bd);
border-left-width: 4px;
border-radius: var(--r-sm);
background: var(--c-info-bg);
color: var(--text-body);
font-size: var(--fs-sm);
line-height: var(--lh-loose);
}
.alert__icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--c-info); }
.alert__title { display: block; font-weight: 600; color: var(--text-strong); margin-bottom: var(--sp-1); font-size: var(--fs-base); }
.alert--success { background: var(--c-success-bg); border-color: var(--c-success-bd); }
.alert--success .alert__icon { color: var(--c-success); }
.alert--danger { background: var(--c-danger-bg); border-color: var(--c-danger-bd); }
.alert--danger .alert__icon { color: var(--c-danger); }
.alert--warning { background: var(--c-warning-bg); border-color: var(--c-warning-bd); }
.alert--warning .alert__icon { color: var(--c-warning); }
.alert__close { flex: none; margin-left: auto; padding: var(--sp-1); color: var(--text-muted); border-radius: var(--r-xs); }
.alert__close:hover { color: var(--text-strong); }
/* Form başarı kartı — gönderim sonrası (POST-Redirect-GET) */
.success-card {
display: grid;
gap: var(--sp-4);
justify-items: center;
text-align: center;
padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
background: var(--bg-surface);
border: 1px solid var(--c-success-bd);
border-radius: var(--r-md);
box-shadow: var(--sh-2);
}
.success-card__icon {
width: 64px; height: 64px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--c-success-bg);
color: var(--c-success);
}
.success-card__icon svg { width: 30px; height: 30px; stroke-width: 2.4; }
.success-card h2 { font-size: var(--fs-xl); }
.success-card p { color: var(--text-muted); max-width: 46ch; }
/* ==========================================================================
27 — ROZET · TABLO · AYIRICI
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 4px var(--sp-3);
border-radius: var(--r-pill);
background: var(--c-sand-200);
color: var(--text-body);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: .04em;
line-height: 1.5;
white-space: nowrap;
}
.badge--accent { background: var(--c-orange-100); color: var(--c-orange-800); } /* 7.42:1 */
.badge--solid { background: var(--c-orange-500); color: var(--text-on-accent); }
.badge--dark { background: var(--c-ink-800); color: var(--text-on-dark); }
.badge--success { background: var(--c-success-bg); color: var(--c-success); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-soft); color: var(--text-muted); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* Tablo (ön yüz — teknik özet vb.) */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-hair); border-radius: var(--r-md); background: var(--bg-surface); }
.table { width: 100%; min-width: 520px; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--sp-4) var(--sp-5); text-align: left; border-bottom: 1px solid var(--border-hair); }
.table thead th {
background: var(--c-sand-200);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-strong);
white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-orange-50); }
/* Ayırıcı — bölümler arası ince şerit */
.divider { height: 1px; background: var(--border-hair); }
.divider--band { height: clamp(8px, 1.4vw, 14px); background: var(--c-orange-500); }
.divider--dashed { height: 0; border-top: 1px dashed var(--border-soft); }
/* ==========================================================================
28 — FOOTER
========================================================================== */
.st-footer { background: var(--c-ink-900); color: var(--text-on-dark-muted); }
.st-footer a { transition: color var(--t) var(--e-out); }
.st-footer__top { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.st-footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.st-footer__brand img, .st-footer__brand svg { height: 38px; width: auto; }
.st-footer__about { margin-top: var(--sp-5); font-size: var(--fs-sm); line-height: var(--lh-loose); max-width: 46ch; }
.st-footer__title {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--text-on-dark);
margin-bottom: var(--sp-5);
}
.st-footer__list { display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.st-footer__list a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.st-footer__list a::before {
content: "";
width: 0; height: 1px;
background: var(--c-orange-500);
transition: width var(--t) var(--e-out);
}
.st-footer__list a:hover { color: var(--text-on-dark); }
.st-footer__list a:hover::before { width: 12px; }
.st-footer__contact { display: grid; gap: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.st-footer__contact div { display: flex; gap: var(--sp-3); }
.st-footer__contact svg { flex: none; width: 17px; height: 17px; color: var(--c-orange-500); margin-top: 2px; }
.st-footer__contact strong { display: block; color: var(--text-on-dark); font-weight: 600; }
.st-footer__contact a:hover { color: var(--c-orange-400); }
.st-footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.st-footer__social a {
display: grid; place-items: center;
width: 40px; height: 40px;
border: 1px solid var(--border-dark);
border-radius: var(--r-sm);
color: var(--text-on-dark-muted);
}
.st-footer__social a:hover { border-color: var(--c-orange-500); color: var(--c-orange-400); background: rgba(222,112,27,.08); }
.st-footer__social svg { width: 18px; height: 18px; }
.st-footer__bottom {
border-top: 1px solid var(--border-dark);
padding-block: var(--sp-6);
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
align-items: center;
justify-content: space-between;
font-size: var(--fs-xs);
}
.st-footer__bottom a:hover { color: var(--c-orange-400); }
.st-footer__legal { max-width: none; flex: 1 1 auto; min-width: 0; line-height: var(--lh-snug); }
/* ==========================================================================
29 — MOBİL SABİT AKSİYON ÇUBUĞU
========================================================================== */
.mobile-bar {
position: fixed;
inset: auto 0 0 0;
z-index: var(--z-mobilebar);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
height: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--border-hair);
border-top: 1px solid var(--border-hair);
box-shadow: 0 -6px 20px -8px rgba(22,24,26,.18);
transform: translateY(0);
transition: transform var(--t-slow) var(--e-out);
}
.mobile-bar.is-hidden { transform: translateY(110%); }
.mobile-bar__btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
background: var(--bg-surface);
color: var(--text-strong);
font-size: var(--fs-sm);
font-weight: 600;
}
.mobile-bar__btn svg { width: 18px; height: 18px; }
.mobile-bar__btn:active { background: var(--c-sand-200); }
.mobile-bar__btn--accent { background: var(--c-orange-500); color: var(--text-on-accent); }
.mobile-bar__btn--accent:active { background: var(--c-orange-700); color: #FFFFFF; } /* 6.25:1 */
@media (min-width: 641px) { .mobile-bar { display: none; } }
/* ==========================================================================
30 — 404
========================================================================== */
.err {
min-height: 78svh;
min-height: 78vh;
display: grid;
align-content: center;
padding-top: calc(var(--header-h) + var(--sp-10));
padding-bottom: var(--sp-16);
}
.err__code {
font-family: var(--font-display);
font-size: clamp(5rem, 3rem + 14vw, 12rem);
font-weight: 800;
line-height: .82;
letter-spacing: var(--ls-mega);
color: var(--c-sand-300);
font-variant-numeric: tabular-nums;
user-select: none;
}
.err__code span { color: var(--c-orange-600); } /* 3.97:1 — büyük dekoratif metin */
.err__title { margin-top: var(--sp-6); font-size: var(--fs-3xl); }
.err__text { margin-top: var(--sp-5); max-width: 52ch; color: var(--text-muted); font-size: var(--fs-md); line-height: var(--lh-loose); }
.err__actions { margin-top: var(--sp-8); }
.err__links { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--border-hair); }
.err__links h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.err__chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.err__chips a {
display: inline-flex;
padding: var(--sp-2) var(--sp-4);
border: 1px solid var(--border-soft);
border-radius: var(--r-pill);
background: var(--bg-surface);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-body);
transition: border-color var(--t) var(--e-out), color var(--t) var(--e-out), background-color var(--t) var(--e-out);
}
.err__chips a:hover { border-color: var(--c-orange-500); color: var(--text-accent); background: var(--c-orange-50); }
/* ==========================================================================
31 — RESPONSIVE
--------------------------------------------------------------------------
Mobil öncelikli. Kırılımlar: <=640 (mobil) · 641-1024 (tablet) · >=1025 (masaüstü)
========================================================================== */
/* --- Tablet ve üzeri: >= 641px ------------------------------------------ */
@media (min-width: 641px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.st-hero-split { grid-template-columns: repeat(2, 1fr); }
.st-stats__grid { grid-template-columns: repeat(4, 1fr); }
.st-cta__actions { gap: var(--sp-8); }
.form__grid { grid-template-columns: repeat(2, 1fr); }
.packaging { grid-template-columns: repeat(3, 1fr); }
.zigzag__row { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.zigzag__row:nth-child(even) .zigzag__media { order: 2; }
.zigzag__num { right: auto; left: 0; top: -.5em; }
.zigzag__row:nth-child(even) .zigzag__num { left: auto; right: 0; }
.st-footer__grid { grid-template-columns: repeat(2, 1fr); }
.rail__track { grid-auto-columns: minmax(260px, 42vw); }
.section-head--split { grid-template-columns: 1.1fr 1fr; }
.err__code { line-height: .78; }
}
/* --- Masaüstü: >= 1025px ------------------------------------------------ */
@media (min-width: 1025px) {
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Header: hamburger gizlenir, menü ve CTA açılır */
.st-nav { display: block; }
.st-burger { display: none; }
.st-drawer { display: none; }
.st-header__tel { display: inline-flex; }
.st-header__cta { display: inline-flex; }
.st-hero__scroll { display: flex; }
.st-hero-split { grid-template-columns: repeat(2, 1fr); }
/* Pinlenmiş hizmet sahnesi — 2 sütun */
/* Detay sayfası — içerik + yapışkan teklif kartı */
.detail { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.detail__aside { position: sticky; top: calc(var(--header-h-shrunk) + var(--sp-6)); }
.benefits { grid-template-columns: repeat(2, 1fr); }
.packaging { grid-template-columns: repeat(3, 1fr); }
.st-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
.rail__nav { display: flex; }
.rail__track { grid-auto-columns: minmax(280px, 1fr); overflow-x: auto; }
/* Ürün ızgarası: 7 ürün — 4 + 3 yerleşim yerine düzenli 4'lü akış */
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); }
/* Son satırdaki 3 kart ortalanır */
.grid-products > :nth-child(5) { grid-column: 1 / span 1; }
.form-shell { padding: clamp(2rem, 1.4rem + 2vw, 3rem); }
.contact-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 1.4rem + 3vw, 4rem); align-items: start; }
}
/* --- Geniş masaüstü: >= 1280px ------------------------------------------ */
@media (min-width: 1280px) {
.section-head__title { max-width: 24ch; }
.st-hero__title { max-width: 15ch; }
}
/* Yatay mobil / kısa ekran — hero taşmasın */
@media (max-height: 560px) and (orientation: landscape) {
.st-hero { min-height: auto; padding-top: calc(var(--header-h) + var(--sp-8)); padding-bottom: var(--sp-10); }
.st-hero__scroll { display: none; }
}
/* ==========================================================================
32 — ERİŞİLEBİLİRLİK · REDUCED MOTION · PRINT
========================================================================== */
/* Hareket azaltma — animasyon başlangıç durumları GERİ ALINIR,
içerik anında görünür olur. GSAP tarafında da matchMedia ile kontrol edilir. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.js .reveal, .js .reveal-left, .js .reveal-right, .js .reveal-scale {
opacity: 1 !important;
transform: none !important;
}
.js .reveal-mask, .js .reveal-mask-y { clip-path: none !important; }
.js .reveal-words .word > i,
.js .reveal-lines .line > span { transform: none !important; }
.parallax-media > img { transform: none !important; }
.st-hero__grid, .st-stats__texture, .towers::before { display: none; }
.st-cursor, .st-cursor-dot { display: none !important; }
.why__track-fill { transform: scaleY(1) !important; }
.tower__bar::after { background: var(--c-orange-500); }
.tower__label { color: var(--text-on-dark); }
.benefits__item::after { transform: scaleX(1); }
}
/* Yüksek kontrast tercihi */
@media (prefers-contrast: more) {
:root {
--text-muted: #4A4D50;
--border-hair: var(--c-gray-400);
--border-soft: var(--c-gray-500);
}
.card, .value-card, .info-card, .benefits__item { border-color: var(--c-gray-500); }
}
/* Dokunmatik cihaz — hover efektleri devre dışı, transform hilesi yok */
@media (hover: none) {
.card:hover { transform: none; box-shadow: none; }
.card:hover .card__media img { transform: none; }
.value-card:hover, .info-card:hover { transform: none; }
.btn:hover { transform: none; }
}
/* Yazdırma */
@media print {
.st-header, .st-drawer, .mobile-bar, .scroll-progress,
.st-cursor, .st-cursor-dot, .st-hero__scroll, .rail__nav { display: none !important; }
body { background: #FFFFFF; color: #000000; padding-bottom: 0; }
.section { padding-block: 1.5rem; }
.st-cta, .st-stats, .towers, .section--dark { background: #FFFFFF !important; color: #000000 !important; }
.st-cta__bg, .st-cta__scrim, .st-banner__bg, .st-banner__scrim { display: none !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555555; }
.card, .value-card { break-inside: avoid; border: 1px solid #CCCCCC; }
}
/* ============================================================================
GELİŞTİRİCİ NOTLARI — Full Stack Geliştirici için bağlayıcı kullanım kuralları
============================================================================
1) BAŞLATMA
- etiketine hiçbir sınıf yazma. main.js dosyasının İLK satırı:
document.documentElement.classList.add('js');
Bu sınıf eklenene kadar .reveal / .reveal-words hiçbir şeyi gizlemez;
JS kapalıysa veya hata verirse site tamamen okunur kalır (kabul kriteri).
- Lenis başlatıldığında üzerine 'lenis' sınıfı eklenir (Lenis bunu
kendisi yapar). CSS bunu bekliyor.
- Özel imleci açacaksan üzerine 'has-cursor' sınıfını SADECE
(pointer:fine) && !prefers-reduced-motion durumunda ekle.
2) TURUNCU KULLANIM KURALI (kontrast — pazarlık dışı)
- #DE701B kırık beyaz zeminde 2.99:1 -> METİN OLARAK ASLA KULLANILMAZ.
- Turuncu METİN gerektiğinde: var(--text-accent) = #9A4A0F (5.74:1).
- Turuncu ZEMİN üstünde metin: var(--text-on-accent) = #16181A (5.46:1).
Turuncu zeminde BEYAZ metin YAZMA (3.26:1, AA değil).
- Koyu (ink) zeminde turuncu metin serbest: #DE701B / #16181A = 5.46:1.
- Turuncu = aksiyon, vurgu, çizgi, ikon, hover. Geniş dolgu alanı değil.
3) HEADER
- Ana sayfada: 
CSS hangisinin görüneceğini kendi yönetir.
4) MOBİL MENÜ
- Buton:
- Panel: