/* ========================================================================== Dizayn Makina — "SİNEMATİK" theme (production) Loaded on every page AFTER style.css, with . Behaviour lives in assets/js/sinematik.js (loaded after main.js). DESIGN-SYSTEM NOTE — read before building/polishing a page -------------------------------------------------------------------------- FONTS (Google Fonts in every ) Display 'Barlow Condensed' 500/600/700 → --sn-f-display (all headings, buttons) Text 'Barlow' 400/500/600 → --sn-f-text (body copy, fields) Labels 'IBM Plex Mono' 500 → --sn-f-mono (eyebrows, crumbs, HUD, form labels) COLOURS (tokens on body.theme-sinematik) Dark : --sn-ink #05090f · --sn-night #070d15 · --sn-navy #0a1420 · --sn-navy-2 #0e1c2c Light : --sn-paper #f4f5f7 (default content) · --sn-fog #e9edf1 · #fff (logos / docs) Brand : --sn-green #0E8F45 (bars, rules, big type only) · --sn-green-btn #0A7F3E (buttons, AA) --sn-green-lt #3DB872 (small green text on dark) · --sn-green-dk #0A6E36 (small green on light) Surface tokens — every surface re-declares them, components only use these: --tx-hi (headings) · --tx-md (body) · --tx-lo (labels) · --line (hairlines) --accent-tx (small green text) · --inv-bg / --inv-tx (hover inversion) Dark surfaces : body default, .bg-navy, .page-hero, .cta-band, .card-dark, .policy-block, .sn-dark Light surfaces: .section, .section-sm, .bg-fog, .bg-white, .sn-light TYPE SCALE hero title clamp(2.85rem,.9rem+7.2vw,8.4rem) uppercase, lh .9 (TR/DE lh 1 — İ/Ü dots, see DIACRITICS) page-hero h1 clamp(3rem,1rem+6vw,7.4rem) uppercase, lh .9 (phones: clamp(2.5rem,12.4vw,3.6rem)) band titles clamp(2.6rem,.9rem+5.6vw,7.2rem) uppercase (process / CTA) h2 / .sn-h2 clamp(2.3rem,1.05rem+4.05vw,5.1rem) sentence case, lh .98 (.sn-h2--md / inner h2: 2.1→4.2rem) phones ≤600: .sn-h2 clamp(2.15rem,9.8vw,2.75rem) · inner h2 clamp(2rem,9.2vw,2.6rem) h3 (cards) clamp(1.5rem,1.15rem+.9vw,2.1rem) uppercase, lh 1.02 h3 large clamp(2.1rem,.9rem+2.9vw,4rem) uppercase (sector names, service rows) lead clamp(1.02rem,.94rem+.3vw,1.2rem) · body 17px (16px ≤600) · mono 12px/.16em SPACING gutter --sn-g clamp(20px,4.4vw,64px) · max width --sn-max 1312px (.container == .sn-wrap) section --sn-sec clamp(88px,10vw,152px) · small section --sn-sec-sm clamp(64px,7vw,112px) (phones ≤600: 76px / 60px) · anchors land at scroll-margin-top var(--sn-hdr-h) (+20px non-section) component rhythm 12 / 24 / 40 / 56 / 88 · controls ≥44px (buttons 56px; small links get a 44px hit area from a transparent ::after, e.g. the breadcrumb) · form fields scroll-margin 132px SECTION PATTERNS Dark photo/video band (hero, .page-hero, .cta-band, .sn-process): media + shade + .sn-grain, bottom-aligned type, hairline + HUD row. Light editorial section: eyebrow → big h2 → lead, hairline-divided lists with a 44–72px green rule on top (cards, sectors, timeline). COMPONENTS (class names are the ones main.js templates emit — never rename them) Home : .sn-hero .sn-stats .sn-about .sn-services/.sn-rail/.sn-svc .sn-sectors .sn-process .sn-why .sn-refs/.sn-marquee .sn-cta · primitives .sn-btn(--primary/--ghost) .sn-link(--light/--ink) .sn-eyebrow(+__idx) .sn-kicker .sn-mono .sn-h2(--md) .sn-hud .sn-vidbtn .sn-par .sn-grain .sn-mask Inner pages : .page-hero (media/shade/crumb/h1/lead/.sn-hero__hud) · .section/.section-sm/.bg-fog/.bg-navy .section-head(.center is left-aligned on purpose) .eyebrow · .btn .btn-primary/.btn-outline/.btn-ghost .card .card-dark .sector-card(refSector) .cta-band .form-grid .field .cv-drop .tabs-nav .timeline .chip-row/.chip .cert-grid/.cert-card .policy-block .photo-frame .svc-row/.svc-num/.sss (+ page-hizmetler.css) #svcLightbox · footer PER-PAGE HOOKS page-hero photo: swap the sources in the page (desktop ≥1280w, phone 3:4 crop ≈720×960) CTA band photo : body.theme-sinematik[data-page="x"]{--sn-cta-img:url("../img/…");--sn-cta-pos:50% 50%} phones ≤600px : buttons go full width, cards stack, tabs become a 2×2 grid, service rows read number → title → image (4:5) → text, slideshows + lightbox swipe REVEAL CLASSES (hidden state only while — JS failure shows everything) .sn-reveal (fade/rise, delay via style="--d:1..4") · .sn-stagger (children cascade) .sn-wipe (clip-path wipe on the inside) · .sn-intro / .sn-mask>.sn-mask__in (hero intro, --i) data-sn-parallax="0.2" (transform-only parallax) · prefers-reduced-motion → all static & visible ========================================================================== */ body.theme-sinematik{ --sn-ink:#05090f; --sn-night:#070d15; --sn-navy:#0a1420; --sn-navy-2:#0e1c2c; --sn-navy-3:#152943; --sn-paper:#f4f5f7; --sn-fog:#e9edf1; --sn-white:#ffffff; --sn-green:#0E8F45; --sn-green-btn:#0A7F3E; --sn-green-btn-h:#0A6E36; --sn-green-lt:#3DB872; --sn-green-dk:#0A6E36; --sn-t-hi:#ffffff; --sn-t-md:rgba(228,234,242,.80); --sn-t-lo:rgba(228,234,242,.62); --sn-i-hi:#0a1420; --sn-i-md:#3d4a5c; --sn-i-lo:#56657a; --sn-line-d:rgba(255,255,255,.13); --sn-line-l:rgba(10,20,32,.14); --sn-field-line:#8b95a4; /* 3:1 against white — WCAG 1.4.11 */ --sn-f-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif; --sn-f-text:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif; --sn-f-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace; --sn-max:1312px; --sn-g:clamp(20px,4.4vw,64px); --sn-sec:clamp(88px,10vw,152px); --sn-sec-sm:clamp(64px,7vw,112px); --sn-cta-img:url("../img/sinematik/sh-cta.jpg"); /* inner-page CTA band photo (own shop floor, 2016w); override per page */ --sn-cta-pos:66% 42%; --sn-ease:cubic-bezier(.2,.7,.1,1); --sn-ease-out:cubic-bezier(.19,1,.22,1); --sn-ease-io:cubic-bezier(.7,0,.2,1); /* style.css variables re-pointed so any un-themed leftover still uses the theme fonts */ --font-head:var(--sn-f-display); --font-body:var(--sn-f-text); /* dark surface tokens (default) */ --tx-hi:#fff; --tx-md:var(--sn-t-md); --tx-lo:var(--sn-t-lo); --line:var(--sn-line-d); --accent-tx:var(--sn-green-lt); --inv-bg:#fff; --inv-tx:var(--sn-i-hi); background:var(--sn-night); color:var(--sn-t-md); font-family:var(--sn-f-text); font-size:17px; line-height:1.6; text-rendering:optimizeLegibility; } /* light surfaces */ body.theme-sinematik :is(.section,.section-sm,.bg-fog,.bg-white,.sn-light,.sn-refs){ --tx-hi:var(--sn-i-hi); --tx-md:var(--sn-i-md); --tx-lo:var(--sn-i-lo); --line:var(--sn-line-l); --accent-tx:var(--sn-green-dk); --inv-bg:var(--sn-i-hi); --inv-tx:#fff; } /* dark surfaces (declared after light ones so .section.bg-navy resolves dark) */ body.theme-sinematik :is(.bg-navy,.page-hero,.cta-band,.card-dark,.policy-block,.sn-dark){ --tx-hi:#fff; --tx-md:var(--sn-t-md); --tx-lo:var(--sn-t-lo); --line:var(--sn-line-d); --accent-tx:var(--sn-green-lt); --inv-bg:#fff; --inv-tx:var(--sn-i-hi); } body.theme-sinematik ::selection{background:var(--sn-green);color:#fff;} body.theme-sinematik :focus-visible{outline:2px solid var(--sn-green-lt);outline-offset:3px;} body.theme-sinematik :is(.section,.section-sm,.bg-fog,.bg-white,.sn-light) :focus-visible{outline-color:var(--sn-green-dk);} body.theme-sinematik main{display:block;} /* --sn-hdr-h = height of the settled (scrolled) fixed header; sinematik.js keeps it exact on :root. Full-bleed sections land flush under the header; smaller targets keep a little air. */ :root{--sn-hdr-h:65px;} @media (min-width:981px){ :root{--sn-hdr-h:70px;} } body.theme-sinematik main [id]{scroll-margin-top:calc(var(--sn-hdr-h) + 20px);} body.theme-sinematik main > section[id], body.theme-sinematik main > :is(.section,.section-sm,.bg-navy,.bg-fog)[id]{scroll-margin-top:var(--sn-hdr-h);} /* (0,0,1) specificity: beats style.css element rules (loaded earlier) but never component classes */ :where(body.theme-sinematik) p{color:inherit;} :where(body.theme-sinematik) :is(h1,h2,h3,h4){font-family:var(--sn-f-display);color:var(--tx-hi);letter-spacing:0;} /* ---------- Primitives ---------- */ .sn-wrap{max-width:calc(var(--sn-max) + 2 * var(--sn-g));margin:0 auto;padding:0 var(--sn-g);} body.theme-sinematik .container{max-width:calc(var(--sn-max) + 2 * var(--sn-g));padding:0 var(--sn-g);} .sn-mono{font-family:var(--sn-f-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;} .sn-kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 26px;font-family:var(--sn-f-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86);} .sn-kicker__dot{width:8px;height:8px;background:var(--sn-green);flex:none;} .sn-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 24px;font-family:var(--sn-f-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sn-i-lo);} .sn-eyebrow__idx{display:inline-flex;align-items:center;gap:14px;color:var(--sn-green-dk);} .sn-eyebrow__idx::after{content:"";width:34px;height:1px;background:currentColor;} .sn-eyebrow--dark{color:var(--sn-t-lo);} .sn-eyebrow--dark .sn-eyebrow__idx{color:var(--sn-green-lt);} .sn-h2{ font-family:var(--sn-f-display);font-weight:600; font-size:clamp(2.3rem,1.05rem + 4.05vw,5.1rem); line-height:.98;letter-spacing:-.008em;margin:0; text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; color:var(--sn-i-hi); } .sn-h2--md{font-size:clamp(2.1rem,1.1rem + 3.1vw,4.2rem);} /* Buttons */ .sn-actions{display:flex;flex-wrap:wrap;gap:12px;} .sn-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px; min-height:56px;padding:0 28px;border-radius:0; font-family:var(--sn-f-display);font-weight:600;font-size:1.06rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.1; white-space:normal;text-align:center; transition:background-color .3s var(--sn-ease),color .3s var(--sn-ease),border-color .3s var(--sn-ease); } .sn-btn .sn-arrow{width:20px;height:12px;flex:none;transition:transform .35s var(--sn-ease);} .sn-btn:hover .sn-arrow{transform:translateX(5px);} .sn-btn--primary{background:var(--sn-green-btn);color:#fff;} .sn-btn--primary:hover{background:var(--sn-green-btn-h);} .sn-btn--ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);} .sn-btn--ghost:hover{background:#fff;color:var(--sn-i-hi);box-shadow:inset 0 0 0 1px #fff;} /* Text links with arrow */ .sn-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-family:var(--sn-f-display);font-weight:600;font-size:1.06rem;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .25s,gap .35s var(--sn-ease);} .sn-link .sn-arrow{width:20px;height:12px;flex:none;transition:transform .35s var(--sn-ease);} .sn-link:hover .sn-arrow{transform:translateX(5px);} .sn-link--light{color:#fff;} .sn-link--light:hover{color:var(--sn-green-lt);} .sn-link--dark{color:#fff;} .sn-link--dark:hover{color:var(--sn-green-lt);} .sn-link--ink{color:var(--sn-i-hi);} .sn-link--ink:hover{color:var(--sn-green-dk);} /* Video toggle */ .sn-vidbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);border-radius:50%;transition:background-color .25s,box-shadow .25s;} .sn-vidbtn:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);} .sn-vidbtn svg{width:14px;height:14px;} .sn-vidbtn .i-play{display:none;} .sn-vidbtn[data-paused="true"] .i-play{display:block;} .sn-vidbtn[data-paused="true"] .i-pause{display:none;} .sn-vidbtn--lg{width:52px;height:52px;} /* Parallax wrapper (JS drives translate) */ .sn-par{position:absolute;inset:0;will-change:transform;} .sn-par img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);} /* Fine film grain over footage/photos (static layer, no animation) */ .sn-grain::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("../img/sinematik/grain.png") repeat;background-size:160px 160px;opacity:.07;} .sn-mask{display:block;overflow:hidden;padding:.1em 0 .07em;margin:-.1em 0 -.07em;} .sn-mask__in{display:block;text-wrap:balance;} /* HUD row (bottom of heroes) */ .sn-hero__hud{position:absolute;left:0;right:0;bottom:0;border-top:1px solid rgba(255,255,255,.14);} .sn-hud{display:flex;align-items:center;gap:28px;min-height:72px;color:rgba(235,240,246,.7);} .sn-hud__spacer{flex:1;} .sn-scroll{display:inline-flex;align-items:center;gap:14px;min-height:44px;color:rgba(235,240,246,.8);} .sn-scroll:hover{color:#fff;} .sn-scroll__rail{position:relative;width:1px;height:34px;background:rgba(255,255,255,.22);overflow:hidden;} .sn-scroll__rail span{position:absolute;left:0;top:0;width:1px;height:12px;background:var(--sn-green-lt);animation:snScrollCue 2.2s var(--sn-ease-io) infinite;} @keyframes snScrollCue{0%{transform:translateY(-14px);}60%,100%{transform:translateY(36px);}} /* ========================================================================== HEADER (shared partial) — transparent over the dark hero, solid once scrolled ========================================================================== */ body.theme-sinematik .site-header{ background:transparent;border-bottom:1px solid transparent;padding:20px 0; transition:background-color .4s var(--sn-ease),border-color .4s var(--sn-ease),padding .3s var(--sn-ease); } body.theme-sinematik .site-header::before{ content:"";position:absolute;left:0;right:0;top:0;height:150%;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(5,9,15,.74) 0%,rgba(5,9,15,.36) 55%,rgba(5,9,15,0) 100%); transition:opacity .4s var(--sn-ease); } /* scrolled: fully opaque so no headline shows through */ body.theme-sinematik .site-header.is-scrolled, body.theme-sinematik .site-header:has(.nav-main.open){background:var(--sn-ink);border-bottom-color:rgba(255,255,255,.09);padding:12px 0;box-shadow:0 10px 30px -18px rgba(0,0,0,.7);} body.theme-sinematik .site-header.is-scrolled::before, body.theme-sinematik .site-header:has(.nav-main.open)::before{opacity:0;} /* safety: a page that does not open on a dark hero gets a solid header from the first pixel */ body.theme-sinematik:not(:has(main > :is(.sn-hero,.page-hero):first-child)) .site-header{background:var(--sn-ink);} body.theme-sinematik .site-header .container{max-width:calc(var(--sn-max) + 2 * var(--sn-g));padding:0 var(--sn-g);gap:20px;} body.theme-sinematik .site-header .brand{position:relative;z-index:2;min-height:44px;flex:none;} body.theme-sinematik .brand-logo{height:38px;width:auto;max-width:none;} body.theme-sinematik .nav-main .chev{flex:none;} body.theme-sinematik .nav-main>li>a, body.theme-sinematik .nav-main>li>button{ font-family:var(--sn-f-display);font-weight:600;font-size:.98rem;letter-spacing:.07em; color:rgba(255,255,255,.82);padding:10px 12px;background:transparent; } body.theme-sinematik .nav-main>li>a:hover, body.theme-sinematik .nav-main>li>button:hover, body.theme-sinematik .nav-main>li.open>button{color:#fff;background:transparent;} @media (min-width:981px){ body.theme-sinematik .nav-main>li>a, body.theme-sinematik .nav-main>li>button{position:relative;} body.theme-sinematik .nav-main>li>a::after, body.theme-sinematik .nav-main>li>button::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--sn-green-lt);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sn-ease);} body.theme-sinematik .nav-main>li>a:hover::after, body.theme-sinematik .nav-main>li>button:hover::after, body.theme-sinematik .nav-main>li.open>button::after{transform:scaleX(1);} /* current page marker */ body.theme-sinematik[data-page="home"] .nav-main>li>a[data-nav="home"]::after, body.theme-sinematik[data-page="referanslar"] .nav-main>li>a[data-nav="referanslar"]::after, body.theme-sinematik[data-page="iletisim"] .nav-main>li>a[data-nav="iletisim"]::after, body.theme-sinematik[data-page="kurumsal"] .nav-main>li:has(.dropdown a[href^="kurumsal.html"])>button::after, body.theme-sinematik[data-page="hizmetler"] .nav-main>li:has(.dropdown a[href^="hizmetler.html"])>button::after, body.theme-sinematik[data-page="kariyer"] .nav-main>li:has(.dropdown a[href^="kariyer.html"])>button::after{transform:scaleX(1);} body.theme-sinematik[data-page="kurumsal"] .nav-main>li:has(.dropdown a[href^="kurumsal.html"])>button, body.theme-sinematik[data-page="hizmetler"] .nav-main>li:has(.dropdown a[href^="hizmetler.html"])>button, body.theme-sinematik[data-page="kariyer"] .nav-main>li:has(.dropdown a[href^="kariyer.html"])>button{color:#fff;} /* same marker from main.js initNav (li.is-current / aria-current) */ body.theme-sinematik .nav-main>li.is-current:not(.nav-cta)>:is(a,button){color:#fff;} body.theme-sinematik .nav-main>li.is-current:not(.nav-cta)>:is(a,button)::after{transform:scaleX(1);} } body.theme-sinematik .dropdown{ background:var(--sn-navy);border:1px solid rgba(255,255,255,.08);border-top:2px solid var(--sn-green); box-shadow:0 24px 48px rgba(0,0,0,.45);padding:8px;border-radius:0; } body.theme-sinematik .dropdown a{font-family:var(--sn-f-text);font-weight:500;font-size:.95rem;color:rgba(228,234,242,.85);padding:11px 14px;} body.theme-sinematik .dropdown a:hover{background:rgba(255,255,255,.05);color:#fff;} body.theme-sinematik .lang-switch>button{ font-family:var(--sn-f-mono);font-weight:500;font-size:.74rem;letter-spacing:.12em;color:#fff; border:1px solid rgba(255,255,255,.28);padding:0 12px;min-height:44px;min-width:58px;justify-content:center;gap:8px; transition:border-color .25s; } body.theme-sinematik .lang-switch>button:hover{border-color:rgba(255,255,255,.6);} /* the chevron has no intrinsic size — never let the flex row squeeze it to a speck */ body.theme-sinematik .lang-switch>button .chev{flex:none;width:10px;height:10px;transition:transform .2s var(--sn-ease);} body.theme-sinematik .lang-switch.open>button .chev{transform:rotate(180deg);} body.theme-sinematik .lang-switch .dropdown{min-width:160px;} body.theme-sinematik .lang-switch .dropdown a{font-family:var(--sn-f-text);gap:18px;min-height:44px;align-items:center;} body.theme-sinematik .lang-switch .dropdown a span:last-child{font-family:var(--sn-f-mono);font-size:.74rem;letter-spacing:.12em;opacity:.7;} body.theme-sinematik .lang-switch .dropdown a[style*="accent"]{color:var(--sn-green-lt)!important;} body.theme-sinematik .nav-toggle{width:44px;height:44px;} body.theme-sinematik .nav-toggle span, body.theme-sinematik .nav-toggle span::before, body.theme-sinematik .nav-toggle span::after{width:22px;height:1.5px;} body.theme-sinematik .nav-toggle span::before{top:-7px;} body.theme-sinematik .nav-toggle span::after{top:7px;} body.theme-sinematik .nav-main.open ~ .header-actions .nav-toggle span::before{transform:translateY(7px) rotate(45deg);} body.theme-sinematik .nav-main.open ~ .header-actions .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg);} /* compact nav tier for small desktops: everything fits on one row without shrinking the logo */ @media (min-width:981px) and (max-width:1279px){ body.theme-sinematik .site-header .container{gap:16px;} body.theme-sinematik .brand-logo{height:34px;} body.theme-sinematik .nav-main>li>a, body.theme-sinematik .nav-main>li>button{font-size:.86rem;letter-spacing:.04em;padding:10px 8px;min-height:44px;} body.theme-sinematik .nav-main>li>a::after, body.theme-sinematik .nav-main>li>button::after{left:8px;right:8px;} } @media (min-width:981px) and (max-width:1099px){ body.theme-sinematik .nav-main>li>a, body.theme-sinematik .nav-main>li>button{padding:10px 6px;letter-spacing:.03em;} body.theme-sinematik .nav-main>li>a::after, body.theme-sinematik .nav-main>li>button::after{left:6px;right:6px;} } @media (min-width:1100px) and (max-width:1279px){ body.theme-sinematik .nav-main>li>a, body.theme-sinematik .nav-main>li>button{font-size:.93rem;letter-spacing:.05em;} } /* header CTA only when there is room for it (German labels are longer) */ @media (min-width:1280px){ body.theme-sinematik .nav-main>li.nav-cta{display:flex;align-items:center;margin-left:14px;} body.theme-sinematik .nav-main>li.nav-cta>a.btn{ background:var(--sn-green-btn);color:#fff;border-radius:0;padding:0 20px;min-height:44px;box-shadow:none; font-family:var(--sn-f-display);font-weight:600;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase; } body.theme-sinematik .nav-main>li.nav-cta>a.btn:hover{background:var(--sn-green-btn-h);} body.theme-sinematik .nav-main>li.nav-cta>a.nav-phone{display:none;} } body.theme-sinematik .nav-main>li.nav-cta>a.btn::after{display:none;} @media (min-width:1280px) and (max-width:1379px){ html[lang="de"] body.theme-sinematik .nav-main>li.nav-cta{display:none;} } @media (max-width:980px){ body.theme-sinematik .site-header{padding:14px 0;} body.theme-sinematik .site-header.is-scrolled, body.theme-sinematik .site-header:has(.nav-main.open){padding:10px 0;} body.theme-sinematik .site-header .container{padding:0 var(--sn-g);} body.theme-sinematik .brand-logo{height:30px;} body.theme-sinematik .header-actions{gap:6px;} body.theme-sinematik .lang-switch>button{min-height:44px;min-width:58px;padding:0 10px;font-size:.72rem;} /* Full-screen menu, slides with transform (smoother than animating `right`) */ body.theme-sinematik .nav-main{ right:0;width:100%;max-width:none;background:var(--sn-ink); padding:96px var(--sn-g) max(28px,env(safe-area-inset-bottom));box-shadow:none;counter-reset:snnav; transform:translate3d(100%,0,0);visibility:hidden;overscroll-behavior:contain; transition:transform .5s var(--sn-ease-io),visibility 0s linear .5s; } body.theme-sinematik .nav-main.open{right:0;transform:none;visibility:visible;transition:transform .5s var(--sn-ease-io),visibility 0s;} body.theme-sinematik .nav-main>li{border-bottom:1px solid var(--sn-line-d);} body.theme-sinematik .nav-main>li:first-child{border-top:1px solid var(--sn-line-d);} body.theme-sinematik .nav-main>li:not(.nav-cta){counter-increment:snnav;} body.theme-sinematik .nav-main>li>a, body.theme-sinematik .nav-main>li>button{ justify-content:flex-start;gap:16px;min-height:62px;padding:12px 0; font-size:1.7rem;letter-spacing:.03em;color:#fff;text-align:left;white-space:normal;line-height:1.1; } body.theme-sinematik .nav-main>li:not(.nav-cta)>a::before, body.theme-sinematik .nav-main>li:not(.nav-cta)>button::before{ content:counter(snnav,decimal-leading-zero);font-family:var(--sn-f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--sn-green-lt);flex:none;width:22px; } body.theme-sinematik .nav-main>li>button .chev{margin-left:auto;width:14px;height:14px;} /* current page: green label + a 2px green rule in place of the hairline */ body.theme-sinematik .nav-main>li.is-current:not(.nav-cta){border-bottom-color:transparent;box-shadow:inset 0 -2px 0 var(--sn-green);} body.theme-sinematik .nav-main>li.is-current:not(.nav-cta)>:is(a,button){color:var(--sn-green-lt);} body.theme-sinematik .nav-main .dropdown a[aria-current]{color:#fff;border-left-color:var(--sn-green);} body.theme-sinematik .nav-main .dropdown{background:transparent;border:0;box-shadow:none;padding:0;} body.theme-sinematik .nav-main>li.open .dropdown{padding:0 0 14px;} body.theme-sinematik .nav-main .dropdown a{ font-family:var(--sn-f-text);font-size:1.02rem;font-weight:500;color:var(--sn-t-md); margin-left:38px;padding:11px 0 11px 16px;min-height:44px;display:flex;align-items:center;border-left:1px solid var(--sn-line-d); } body.theme-sinematik .nav-main .dropdown a:hover{color:#fff;border-left-color:var(--sn-green);} body.theme-sinematik .nav-main>li.nav-cta{padding-top:32px;gap:10px;border-bottom:0;} body.theme-sinematik .nav-main>li.nav-cta>a.btn{ background:var(--sn-green-btn);border-radius:0;min-height:56px; font-family:var(--sn-f-display);font-weight:600;font-size:1.06rem;letter-spacing:.09em;text-transform:uppercase; } /* same full-width button grammar as the page CTAs: label left, arrow right */ body.theme-sinematik .nav-main>li.nav-cta>a.btn{justify-content:space-between;padding:0 22px;} body.theme-sinematik .nav-main>li.nav-cta>a.btn::after{display:block;} body.theme-sinematik .nav-main>li.nav-cta>a.nav-phone{font-family:var(--sn-f-mono);font-size:.85rem;letter-spacing:.06em;min-height:44px;color:var(--sn-t-md);} body.theme-sinematik .nav-main>li.nav-cta>a.nav-phone svg{color:var(--sn-green-lt);} } /* ========================================================================== HOME — HERO ========================================================================== */ .sn-hero{ position:relative;isolation:isolate;overflow:hidden; min-height:100vh;min-height:100svh; display:flex;flex-direction:column;justify-content:flex-end; background:var(--sn-ink);color:#fff; } .sn-hero__media{position:absolute;inset:0;z-index:-2;will-change:transform;} .sn-hero__video{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transform-origin:60% 50%;} .sn-hero__shade{ position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(0deg,rgba(5,9,15,.96) 0%,rgba(5,9,15,.88) 24%,rgba(5,9,15,.64) 46%,rgba(5,9,15,.22) 68%,rgba(5,9,15,.34) 100%), linear-gradient(90deg,rgba(5,9,15,.62) 0%,rgba(5,9,15,.26) 55%,rgba(5,9,15,.12) 100%); } .sn-hero__inner{position:relative;width:100%;padding-top:140px;padding-bottom:clamp(104px,12vh,132px);will-change:opacity,transform;} .sn-hero__title{ margin:0;font-weight:600;text-transform:uppercase;color:#fff; /* capped by height too, so short laptop screens keep the whole hero + HUD above the fold */ font-size:clamp(2.85rem,.9rem + 7.2vw,8.4rem);font-size:min(clamp(2.85rem,.9rem + 7.2vw,8.4rem),13.2vh); line-height:.9;letter-spacing:-.012em; max-width:13.5em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } .sn-hero__title em{font-style:normal;color:var(--sn-green);} .sn-hero__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 56px;margin-top:clamp(28px,3.4vw,48px);} .sn-hero__lead{margin:0;max-width:37rem;font-size:clamp(1.02rem,.94rem + .3vw,1.2rem);line-height:1.6;color:rgba(235,240,246,.86);} /* Hero / page-hero intro choreography (only when the JS gate is up) */ html.sinematik-js :is(.sn-hero,.page-hero) .sn-mask__in{transform:translate3d(0,108%,0);} html.sinematik-js :is(.sn-hero,.page-hero) .sn-intro{opacity:0;transform:translate3d(0,18px,0);} html.sinematik-js .sn-hero__video{opacity:0;transform:scale(1.14);} html.sinematik-js .page-hero__media img{opacity:0;transform:scale(1.12);} html.sn-go :is(.sn-hero,.page-hero) .sn-mask__in{transform:none;transition:transform 1.3s var(--sn-ease-out) calc(.2s + var(--i,0) * .13s);} html.sn-go :is(.sn-hero,.page-hero) .sn-intro{opacity:1;transform:none;transition:opacity 1s ease calc(.35s + var(--i,0) * .12s),transform 1.1s var(--sn-ease) calc(.35s + var(--i,0) * .12s);} html.sn-go .sn-hero__video{opacity:1;transform:scale(1.04);transition:opacity 1.4s ease,transform 3.2s var(--sn-ease);} html.sn-go .page-hero__media img{opacity:1;transform:scale(1.04);transition:opacity 1.2s ease,transform 3s var(--sn-ease);} /* short desktop viewports */ @media (min-width:981px) and (max-height:760px){ .sn-hero__inner{padding-top:104px;padding-bottom:88px;} .sn-hud{min-height:56px;} .sn-hero__foot{margin-top:20px;} .sn-hero__kicker{margin-bottom:18px;} } /* big monitors: the 720p footage is not enlarged further, slightly deeper grade */ @media (min-width:1600px){ .sn-hero__video{transform-origin:50% 50%;} html.sinematik-js .sn-hero__video{transform:scale(1.06);} html.sn-go .sn-hero__video{transform:scale(1);} .sn-hero__shade{background: linear-gradient(0deg,rgba(5,9,15,.96) 0%,rgba(5,9,15,.88) 24%,rgba(5,9,15,.66) 46%,rgba(5,9,15,.3) 68%,rgba(5,9,15,.4) 100%), linear-gradient(90deg,rgba(5,9,15,.66) 0%,rgba(5,9,15,.3) 55%,rgba(5,9,15,.18) 100%);} .sn-grain::after{opacity:.09;} } /* ========================================================================== HOME — STATS + CERTIFICATES ========================================================================== */ .sn-stats{position:relative;background:var(--sn-night);color:#fff;padding:clamp(80px,9vw,140px) 0 clamp(72px,8vw,120px);} .sn-stats__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,.92fr);border-top:1px solid var(--sn-line-d);} .sn-stat{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,3.6vw,56px);padding:26px clamp(20px,3vw,48px) 0 0;min-width:0;} .sn-stat + .sn-stat{border-left:1px solid var(--sn-line-d);padding-left:clamp(20px,3vw,48px);} /* label / value may be any element (h3 / p on referanslar): the extra specificity beats surface rules like .bg-navy h3 / p */ body.theme-sinematik .sn-stat .sn-stat__l{display:flex;gap:14px;margin:0;color:var(--sn-t-lo);max-width:22em;} .sn-stat__l>span{min-width:0;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;} body.theme-sinematik .sn-stat .sn-stat__v{ display:block;margin:0;font-family:var(--sn-f-display);font-weight:600;color:#fff;white-space:nowrap; font-size:clamp(4.4rem,.8rem + 9.6vw,11.5rem);line-height:.8;letter-spacing:-.02em; } .sn-unit{display:inline-block;vertical-align:top;margin:.06em 0 0 .05em;font-size:.4em;line-height:1;letter-spacing:0;color:var(--sn-green-lt);} .sn-certrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(56px,6vw,88px);padding-top:28px;border-top:1px solid var(--sn-line-d);} .sn-certrow__label{color:var(--sn-t-lo);min-height:44px;display:inline-flex;align-items:center;gap:10px;} .sn-certrow__label:hover{color:#fff;} .sn-certs{display:flex;flex-wrap:wrap;gap:12px;} body.theme-sinematik .sn-certs .strip-item{ display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:10px 18px; box-shadow:inset 0 0 0 1px var(--sn-line-d);color:#fff;white-space:normal; font-family:var(--sn-f-display);font-weight:600;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.15; } body.theme-sinematik .sn-certs .strip-item svg{width:18px;height:18px;color:var(--sn-green-lt);} /* ========================================================================== HOME — LIGHT SECTIONS ========================================================================== */ .sn-light{background:var(--sn-paper);color:var(--sn-i-md);} .sn-light--fog{background:var(--sn-fog);} /* ---------- About ---------- */ .sn-about{padding:clamp(88px,11vw,168px) 0 clamp(56px,6vw,96px);overflow:hidden;} .sn-about__photo img{object-position:46% 62%;} .sn-about__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px clamp(32px,6vw,104px);align-items:end;margin-bottom:clamp(48px,6vw,96px);} .sn-about__head .sn-h2{max-width:14em;} .sn-about__intro{margin:0;font-size:clamp(1.02rem,.96rem + .22vw,1.14rem);line-height:1.68;color:var(--sn-i-md);} .sn-about__stage{ display:grid; grid-template-columns:[full-start] minmax(var(--sn-g),1fr) [c-start] repeat(12,minmax(0,calc(var(--sn-max) / 12))) [c-end] minmax(var(--sn-g),1fr) [full-end]; } .sn-about__photo{grid-column:1 / 10;grid-row:1;position:relative;overflow:hidden;margin:0;aspect-ratio:5/4;background:var(--sn-navy-2);} .sn-about__card{ grid-column:9 / 14;grid-row:1;align-self:start;position:relative;z-index:2; margin-top:clamp(56px,8vw,128px); background:var(--sn-navy);color:var(--sn-t-md); padding:clamp(24px,2.6vw,40px) clamp(24px,2.6vw,40px) clamp(28px,3vw,44px); box-shadow:0 40px 80px -30px rgba(5,9,15,.5); } .sn-about__card::before{content:"";position:absolute;left:0;top:0;width:72px;height:3px;background:var(--sn-green);} .sn-about__building{margin:0 0 26px;} /* 500×360 source: never shown larger than its natural size */ .sn-about__building img{width:100%;max-width:500px;height:auto;aspect-ratio:500/360;object-fit:cover;filter:saturate(.8) contrast(1.02);} .sn-about__card>p{margin:0;font-size:1rem;line-height:1.68;} body.theme-sinematik .sn-points{display:grid;gap:12px;margin:24px 0 26px;padding:18px 0 0;border-top:1px solid var(--sn-line-d);} body.theme-sinematik .sn-points li{display:flex;gap:12px;align-items:flex-start;color:#fff;font-weight:500;font-size:1rem;line-height:1.5;} body.theme-sinematik .sn-points svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--sn-green-lt);} /* ========================================================================== HOME — SERVICES horizontal showcase (native scroll-snap) ========================================================================== */ .sn-services{background:var(--sn-ink);color:var(--sn-t-md);padding:clamp(72px,8vw,128px) 0 clamp(72px,8vw,120px);overflow:hidden;} .sn-services .sn-h2{color:#fff;max-width:13em;} .sn-services__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px clamp(32px,6vw,104px);align-items:end;} .sn-services__aside p{margin:0 0 22px;font-size:1.02rem;line-height:1.66;} .sn-rail{margin-top:clamp(44px,5vw,76px);} .sn-rail__track{ --pad:max(var(--sn-g),calc((100% - var(--sn-max)) / 2)); display:flex;gap:clamp(12px,1.3vw,20px);margin:0;padding:0 var(--pad) 4px;list-style:none; overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad); scrollbar-width:none;-webkit-overflow-scrolling:touch; cursor:grab; } .sn-rail__track::-webkit-scrollbar{display:none;} .sn-rail__track:focus-visible{outline-offset:-2px;} .sn-rail__track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none;} .sn-rail__track.is-dragging a{pointer-events:none;} .sn-svc{ --h:clamp(420px,34vw,500px); position:relative;flex:0 0 auto;width:calc(var(--h) * .75);height:var(--h); scroll-snap-align:start;list-style:none; } .sn-svc__link{position:absolute;inset:0;display:block;overflow:hidden;background:var(--sn-navy-2);color:#fff;} .sn-svc__media{position:absolute;inset:0;margin:0;} .sn-svc__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--sn-ease);-webkit-user-drag:none;user-select:none;} /* Hassas İşleme: 385×513 native 3:4 crop of a real CNC tool-point photo — shown at ≤1:1, never upscaled */ .sn-svc:first-child .sn-svc__media img{object-position:50% 50%;transform:none;} .sn-svc__link::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(5,9,15,.72) 0%,rgba(5,9,15,0) 22%), linear-gradient(0deg,rgba(5,9,15,.96) 0%,rgba(5,9,15,.74) 28%,rgba(5,9,15,.12) 56%,rgba(5,9,15,0) 72%); transition:opacity .5s var(--sn-ease); } .sn-svc__link::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;z-index:3;background:var(--sn-green);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--sn-ease);} .sn-svc__idx{position:absolute;left:22px;top:20px;z-index:2;color:#fff;text-shadow:0 1px 8px rgba(5,9,15,.6);} .sn-svc__idx small{font-size:inherit;color:rgba(255,255,255,.8);} .sn-svc__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 22px 22px;} .sn-svc__body h3{ margin:0 0 10px;font-weight:600;text-transform:uppercase;color:#fff; font-size:clamp(1.7rem,1.2rem + 1.05vw,2.3rem);line-height:.98;letter-spacing:.005em; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } /* descriptions reserve the same number of lines on every card → titles share one baseline across the rail */ .sn-svc__body p{margin:0;font-size:.95rem;line-height:1.5;color:rgba(235,240,246,.84);max-width:26em;min-height:3em;} html[lang="de"] .sn-svc__body p{min-height:4.5em;} .sn-svc__go{display:inline-flex;align-items:center;gap:12px;margin-top:16px;font-family:var(--sn-f-display);font-weight:600;font-size:.98rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sn-green-lt);} .sn-svc__go svg{width:18px;height:11px;transition:transform .35s var(--sn-ease);} @media (hover:hover) and (pointer:fine){ .sn-svc__link:hover .sn-svc__media img{transform:scale(1.07);} .sn-svc:first-child .sn-svc__link:hover .sn-svc__media img{transform:scale(1.04);} .sn-svc__link:hover::after{transform:scaleX(1);} .sn-svc__link:hover .sn-svc__go svg{transform:translateX(5px);} } .sn-svc__link:focus-visible{outline-offset:-3px;} .sn-rail__ui{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);margin-top:28px;} .sn-rail__count{color:var(--sn-t-lo);white-space:nowrap;} .sn-rail__count b{font-weight:500;color:#fff;} .sn-rail__bar{position:relative;flex:1;height:1px;background:var(--sn-line-d);overflow:hidden;} .sn-rail__bar span{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--sn-green);transform-origin:left;transform:scaleX(.14);transition:transform .25s linear;} .sn-rail__btns{display:flex;gap:8px;} .sn-rail__btn{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;color:#fff;box-shadow:inset 0 0 0 1px var(--sn-line-d);transition:background-color .25s,box-shadow .25s,opacity .25s;} .sn-rail__btn svg{width:20px;height:12px;} .sn-rail__btn:hover:not(:disabled){background:#fff;color:var(--sn-i-hi);box-shadow:inset 0 0 0 1px #fff;} .sn-rail__btn:disabled{opacity:.32;cursor:default;} /* ========================================================================== HOME — SECTORS type-led index ========================================================================== */ .sn-sectors{padding:clamp(88px,10vw,160px) 0 clamp(88px,10vw,150px);} .sn-sectors__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px clamp(32px,6vw,104px);align-items:end;margin-bottom:clamp(44px,5vw,80px);} .sn-sectors__head .sn-h2{max-width:13em;} .sn-sectors__lead{margin:0;font-size:1.04rem;line-height:1.66;color:var(--sn-i-md);} .sn-sectors__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,88px);align-items:start;} .sn-sectors__photo{position:sticky;top:104px;margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--sn-navy-2);} .sn-sectors__photo img{object-position:40% 46%;transform-origin:12% 50%;filter:saturate(.8) contrast(1.04);} .sn-sectors__photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(5,9,15,.34) 0%,rgba(5,9,15,0) 38%);} .sn-sectors__photo::before{content:"";position:absolute;left:0;top:0;z-index:1;width:72px;height:3px;background:var(--sn-green);} .sn-sectors__list{border-top:1px solid var(--sn-line-l);} body.theme-sinematik .sn-sectors__list .sector-card{ position:relative;display:block; padding:clamp(22px,2.2vw,32px) 0 clamp(22px,2.2vw,30px);background:none;border:0;border-bottom:1px solid var(--sn-line-l);border-radius:0;color:var(--sn-i-hi); } body.theme-sinematik .sn-sectors__list .sector-card::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sn-green); transform:scaleX(0);transform-origin:left;transition:transform .7s var(--sn-ease); } body.theme-sinematik .sn-sectors__list .sector-card .icon{display:none;} body.theme-sinematik .sn-sectors__list .sector-card h3{ margin:0;font-weight:600;text-transform:uppercase;color:var(--sn-i-hi); font-size:clamp(2.1rem,.9rem + 2.9vw,4rem);line-height:.95;letter-spacing:-.005em; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; transition:transform .6s var(--sn-ease),color .4s; } body.theme-sinematik .sn-sectors__list .sector-card p{margin:10px 0 0;max-width:34em;font-size:1rem;line-height:1.55;color:var(--sn-i-md);transition:transform .6s var(--sn-ease);} @media (hover:hover) and (pointer:fine){ body.theme-sinematik .sn-sectors__list .sector-card:hover::after{transform:scaleX(1);} body.theme-sinematik .sn-sectors__list .sector-card:hover h3, body.theme-sinematik .sn-sectors__list .sector-card:hover p{transform:translateX(14px);} } /* ========================================================================== HOME — PROCESS cinematic video band ========================================================================== */ .sn-process{ position:relative;isolation:isolate;overflow:hidden;background:#000;color:#fff; min-height:clamp(600px,94vh,980px);display:flex;align-items:flex-end; } .sn-process__media{position:absolute;inset:-56px 0;z-index:-2;will-change:transform;} .sn-process__video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;} /* fallback only (full 0808.mp4): scale from the top-left so the bottom-right logo box leaves the frame */ .sn-process__video.is-seg{transform:scale(1.28);transform-origin:12% 12%;} .sn-process__shade{ position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(46% 42% at 100% 100%,rgba(5,9,15,.7) 0%,rgba(5,9,15,0) 100%), linear-gradient(0deg,rgba(5,9,15,.95) 0%,rgba(5,9,15,.72) 28%,rgba(5,9,15,.18) 60%,rgba(5,9,15,.45) 100%), linear-gradient(90deg,rgba(5,9,15,.55) 0%,rgba(5,9,15,0) 60%); } .sn-process__inner{width:100%;padding-top:160px;padding-bottom:clamp(64px,7vw,104px);} .sn-process__title{ margin:0;font-weight:600;text-transform:uppercase;color:#fff; font-size:clamp(2.6rem,.9rem + 5.9vw,7.4rem);line-height:1;letter-spacing:-.01em;max-width:12.5em; text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } .sn-process__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-top:clamp(24px,3vw,40px);} .sn-process__foot p{margin:0;max-width:36rem;font-size:clamp(1rem,.94rem + .25vw,1.16rem);line-height:1.62;color:rgba(235,240,246,.86);} .sn-process__progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12);} .sn-process__progress span{position:absolute;inset:0;background:var(--sn-green);transform-origin:left;transform:scaleX(0);} /* ========================================================================== HOME — WHY US ========================================================================== */ .sn-why{padding:clamp(88px,10vw,160px) 0;} .sn-why__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px clamp(40px,7vw,120px);align-items:end;} .sn-why .sn-h2{max-width:12em;} .sn-why__photo{position:relative;overflow:hidden;margin:clamp(40px,4.4vw,64px) 0 0;aspect-ratio:4/3;background:var(--sn-navy-2);} body.theme-sinematik .sn-why__list .card{ position:relative;height:auto;display:block; padding:28px 0 30px;background:none;border:0;border-top:1px solid var(--sn-line-l);border-radius:0;box-shadow:none; } body.theme-sinematik .sn-why__list .card:last-child{border-bottom:1px solid var(--sn-line-l);} body.theme-sinematik .sn-why__list .card:hover{box-shadow:none;border-color:var(--sn-line-l);} body.theme-sinematik .sn-why__list .card::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;background:var(--sn-green);} body.theme-sinematik .sn-why__list .card .icon{display:none;} body.theme-sinematik .sn-why__list .card h3{ margin:0 0 8px;font-weight:600;text-transform:uppercase;color:var(--sn-i-hi); font-size:clamp(1.55rem,1.15rem + .9vw,2.1rem);line-height:1.02;letter-spacing:.005em; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } body.theme-sinematik .sn-why__list .card p{margin:0;max-width:34em;font-size:1rem;line-height:1.6;color:var(--sn-i-md);} /* ========================================================================== HOME — REFERENCES logo marquee on white ========================================================================== */ .sn-refs{background:#fff;color:var(--sn-i-md);padding:clamp(88px,9vw,140px) 0 clamp(80px,8vw,124px);border-top:1px solid var(--sn-line-l);overflow:hidden;} .sn-refs__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;} .sn-refs__head .sn-h2{max-width:14em;} .sn-marquee{ position:relative;margin-top:clamp(48px,5vw,80px);overflow:hidden; border-top:1px solid var(--sn-line-l);border-bottom:1px solid var(--sn-line-l); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); } .sn-marquee__track{display:flex;width:max-content;animation:snMarquee 52s linear infinite;will-change:transform;} .sn-marquee:hover .sn-marquee__track, .sn-marquee:focus-within .sn-marquee__track{animation-play-state:paused;} .sn-marquee__set{display:flex;margin:0;padding:0;list-style:none;} .sn-marquee__set li{ flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:clamp(150px,15vw,232px);height:clamp(104px,9.4vw,144px);padding:0 clamp(12px,1.2vw,20px); border-right:1px solid var(--sn-line-l);background:#fff; } /* optical sizing: each logo carries --s (compact, dense marks smaller) and an optional tone */ .sn-marquee__set img{ width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply; transform:scale(var(--s,1)); filter:grayscale(1) brightness(.94) contrast(1.3);transition:filter .4s; } .sn-marquee__set li[data-tone="dense"] img{filter:grayscale(1) contrast(.9) brightness(1.14);} .sn-marquee__set li[data-tone="pale"] img{filter:grayscale(1) brightness(.8) contrast(1.75);} @media (hover:hover) and (pointer:fine){ .sn-marquee__set li:hover img{filter:none;} } @keyframes snMarquee{to{transform:translate3d(-50%,0,0);}} /* ========================================================================== HOME — FINAL CTA full-bleed ========================================================================== */ .sn-cta{ position:relative;isolation:isolate;overflow:hidden;background:#000;color:#fff; min-height:clamp(600px,84vh,900px);display:flex;align-items:flex-end; } .sn-cta__media{position:absolute;inset:-44px 0;z-index:-2;will-change:transform;} .sn-cta__video{width:100%;height:100%;object-fit:cover;object-position:62% 50%;} .sn-cta__shade{ position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(0deg,rgba(5,9,15,.94) 0%,rgba(5,9,15,.72) 30%,rgba(5,9,15,.28) 62%,rgba(5,9,15,.55) 100%), linear-gradient(90deg,rgba(5,9,15,.72) 0%,rgba(5,9,15,.2) 58%,rgba(5,9,15,.08) 100%), linear-gradient(0deg,rgba(14,28,44,.18),rgba(14,28,44,.18)); } .sn-cta__top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px;} .sn-cta__top .sn-kicker{margin:0;} .sn-cta__inner{width:100%;padding-top:160px;padding-bottom:clamp(72px,8vw,120px);} .sn-cta__title{ margin:0;font-weight:600;text-transform:uppercase;color:#fff; /* 1.0 leaves room for stacked Turkish marks (İ/Ü dots over a Ç/Ş cedilla on the line above) */ font-size:clamp(2.6rem,.9rem + 5.6vw,7.2rem);line-height:1;letter-spacing:-.01em;max-width:13em; text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } .sn-cta__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 56px;margin-top:clamp(28px,3.4vw,48px);padding-top:28px;border-top:1px solid rgba(255,255,255,.16);} .sn-cta__foot p{margin:0;max-width:34rem;font-size:clamp(1rem,.94rem + .25vw,1.16rem);line-height:1.62;color:rgba(235,240,246,.86);} /* ========================================================================== INNER PAGES — PAGE HERO (cinematic: darkened real photo + grain + HUD) Markup: section.page-hero > .page-hero__media>img + .page-hero__shade.sn-grain + .container(.crumb, h1>.sn-mask>.sn-mask__in, .lead) + .sn-hero__hud ========================================================================== */ body.theme-sinematik .page-hero{ position:relative;isolation:isolate;overflow:hidden; min-height:clamp(560px,76vh,820px); display:flex;flex-direction:column;justify-content:flex-end; padding:140px 0 0;background:var(--sn-ink);color:var(--sn-t-md);border-bottom:0; } body.theme-sinematik .page-hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;will-change:transform;background:var(--sn-navy-2);} body.theme-sinematik .page-hero__media picture{display:block;width:100%;height:100%;} body.theme-sinematik .page-hero__media img, body.theme-sinematik .page-hero__media video{width:100%;height:100%;object-fit:cover;transform:scale(1.04);filter:saturate(.72) contrast(1.06);} body.theme-sinematik .page-hero__shade{ position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(0deg,rgba(5,9,15,.97) 0%,rgba(5,9,15,.88) 26%,rgba(5,9,15,.62) 52%,rgba(5,9,15,.42) 76%,rgba(5,9,15,.64) 100%), linear-gradient(90deg,rgba(5,9,15,.72) 0%,rgba(5,9,15,.34) 58%,rgba(5,9,15,.16) 100%), linear-gradient(0deg,rgba(14,28,44,.22),rgba(14,28,44,.22)); } body.theme-sinematik .page-hero>.container{position:relative;width:100%;padding-bottom:clamp(112px,13vh,148px);will-change:opacity,transform;} body.theme-sinematik .crumb{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 26px; font-family:var(--sn-f-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sn-t-lo); } body.theme-sinematik .crumb::before{content:"";width:8px;height:8px;background:var(--sn-green);flex:none;margin-right:2px;} body.theme-sinematik .crumb a{position:relative;display:inline-flex;align-items:center;min-height:32px;color:rgba(255,255,255,.86);transition:color .25s;} /* 44px tap target without changing the crumb's 32px line */ body.theme-sinematik .crumb a::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;margin-top:-22px;} body.theme-sinematik .crumb a:hover{color:var(--sn-green-lt);} body.theme-sinematik .crumb svg{width:7px;height:11px;flex:none;opacity:.6;} body.theme-sinematik .crumb>span{color:var(--sn-t-lo);} body.theme-sinematik .page-hero h1{ margin:0;max-width:12.5em;font-weight:600;text-transform:uppercase;color:#fff; font-size:clamp(3rem,1rem + 6vw,7.4rem);font-size:min(clamp(3rem,1rem + 6vw,7.4rem),14vh); line-height:.9;letter-spacing:-.012em;text-wrap:balance; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } body.theme-sinematik .page-hero .lead{ margin:clamp(24px,3vw,40px) 0 0;max-width:38rem;padding-top:24px;border-top:1px solid rgba(255,255,255,.16); font-size:clamp(1.02rem,.94rem + .3vw,1.2rem);line-height:1.62;color:rgba(235,240,246,.86); text-wrap:pretty; } body.theme-sinematik .page-hero .sn-hud{min-height:64px;} /* ========================================================================== INNER PAGES — SURFACES, SECTION HEADS, TYPE ========================================================================== */ body.theme-sinematik .section{padding:var(--sn-sec) 0;background:var(--sn-paper);color:var(--sn-i-md);} body.theme-sinematik .section-sm{padding:var(--sn-sec-sm) 0;background:var(--sn-paper);color:var(--sn-i-md);} body.theme-sinematik .bg-fog{background:var(--sn-fog);} body.theme-sinematik .bg-white{background:#fff;} body.theme-sinematik .bg-navy{background:var(--sn-night);color:var(--sn-t-md);} body.theme-sinematik .bg-navy p{color:var(--tx-md);} /* two light sections in a row: a hairline keeps the rhythm without a colour jump */ body.theme-sinematik :is(.section,.section-sm):not(.bg-navy):not(.bg-fog) + :is(.section,.section-sm):not(.bg-navy):not(.bg-fog):not(:has(> .container > .cta-band)){border-top:1px solid var(--sn-line-l);} body.theme-sinematik .section-head{max-width:56rem;margin:0 0 clamp(40px,5vw,72px);} body.theme-sinematik .section-head.center{margin-left:0;margin-right:0;text-align:left;} body.theme-sinematik .section-head p{margin:22px 0 0;max-width:40rem;font-size:clamp(1.02rem,.96rem + .22vw,1.14rem);line-height:1.66;color:var(--tx-md);} body.theme-sinematik .eyebrow{ display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 22px; font-family:var(--sn-f-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-lo); } body.theme-sinematik .eyebrow::before{content:"";width:34px;height:1px;background:var(--accent-tx);flex:none;} body.theme-sinematik .eyebrow .sn-eyebrow__idx{color:var(--accent-tx);} body.theme-sinematik .eyebrow:has(.sn-eyebrow__idx)::before{display:none;} :where(body.theme-sinematik main) h2{ font-weight:600;font-size:clamp(2.1rem,1.1rem + 3.1vw,4.2rem);line-height:.98;letter-spacing:-.008em; text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } :where(body.theme-sinematik main) h3{ font-weight:600;font-size:clamp(1.5rem,1.15rem + .9vw,2.1rem);line-height:1.02;letter-spacing:.005em;text-transform:uppercase; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } :where(body.theme-sinematik main) h4{font-weight:600;font-size:1.3rem;line-height:1.08;letter-spacing:.01em;text-transform:uppercase;} body.theme-sinematik .text-accent{color:var(--accent-tx);} body.theme-sinematik .mt-lg{margin-top:clamp(40px,4.4vw,64px);} body.theme-sinematik .two-col{gap:clamp(40px,6vw,104px);} body.theme-sinematik .grid{gap:clamp(36px,3.4vw,52px) clamp(24px,3vw,48px);} /* ========================================================================== INNER PAGES — BUTTONS (.btn keeps its class names; arrow drawn with a mask) ========================================================================== */ body.theme-sinematik .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px; min-height:56px;padding:0 28px;border:0;border-radius:0; font-family:var(--sn-f-display);font-weight:600;font-size:1.06rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.1; white-space:normal;text-align:center; transition:background-color .3s var(--sn-ease),color .3s var(--sn-ease),box-shadow .3s var(--sn-ease); } body.theme-sinematik .btn-primary{background:var(--sn-green-btn);color:#fff;} body.theme-sinematik .btn-primary:hover{background:var(--sn-green-btn-h);color:#fff;} body.theme-sinematik .btn-primary::after{ content:"";width:20px;height:12px;flex:none;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6h17M13 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6h17M13 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .35s var(--sn-ease); } body.theme-sinematik .btn-primary:hover::after{transform:translateX(5px);} body.theme-sinematik .btn-primary:disabled{opacity:.55;cursor:progress;} body.theme-sinematik .btn-outline{background:transparent;color:#fff;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);} body.theme-sinematik .btn-outline:hover{background:#fff;color:var(--sn-i-hi);box-shadow:inset 0 0 0 1px #fff;} body.theme-sinematik .btn-ghost{background:transparent;color:var(--tx-hi);border:0;box-shadow:inset 0 0 0 1px var(--tx-lo);} body.theme-sinematik .btn-ghost:hover{background:var(--inv-bg);color:var(--inv-tx);box-shadow:inset 0 0 0 1px var(--inv-bg);} body.theme-sinematik .btn-sm{min-height:44px;padding:0 18px;font-size:.95rem;} /* ========================================================================== INNER PAGES — CARDS (type-led, hairline + short green rule; icons retired) ========================================================================== */ body.theme-sinematik .card{ position:relative;height:auto;display:block; padding:28px 0 4px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;color:var(--tx-md); } body.theme-sinematik .card:hover{box-shadow:none;border-color:var(--line);} body.theme-sinematik .card::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;background:var(--sn-green);transition:width .6s var(--sn-ease);} @media (hover:hover) and (pointer:fine){ body.theme-sinematik .card:hover::before{width:88px;} } body.theme-sinematik .card .icon{display:none;} body.theme-sinematik .card h3{margin:0 0 12px;color:var(--tx-hi);font-size:clamp(1.5rem,1.15rem + .9vw,2.1rem);} body.theme-sinematik .card p{margin:0;max-width:34em;font-size:1rem;line-height:1.62;color:var(--tx-md);} body.theme-sinematik .card .num{position:static;display:block;margin-bottom:12px;font-family:var(--sn-f-mono);font-size:12px;letter-spacing:.16em;color:var(--accent-tx);} body.theme-sinematik .card-dark{background:none;border-color:var(--sn-line-d);} /* ---- Sector cards (home "sector" + referanslar "refSector" templates) ---- */ body.theme-sinematik .sector-card{ position:relative;display:block;padding:26px 0 6px;border-radius:0; background:none;border:0;border-top:1px solid var(--line);color:var(--tx-hi); } body.theme-sinematik .sector-card::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;background:var(--sn-green);transition:width .6s var(--sn-ease);} @media (hover:hover) and (pointer:fine){ body.theme-sinematik .sector-card:hover::before{width:88px;} } body.theme-sinematik .sector-card .icon{display:none;} body.theme-sinematik .sector-card h3{margin:0;color:var(--tx-hi);font-size:clamp(1.7rem,1.1rem + 1.6vw,2.6rem);line-height:.98;letter-spacing:0;} body.theme-sinematik .sector-card p{margin:12px 0 0;max-width:34em;font-size:1rem;line-height:1.6;color:var(--tx-md);} /* ========================================================================== INNER PAGES — CTA BAND (cinematic, full-bleed through its wrapping section) ========================================================================== */ body.theme-sinematik .cta-band{ position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:56px;row-gap:36px; padding:clamp(56px,6vw,88px) clamp(24px,4vw,64px);border:0;border-radius:0;color:var(--sn-t-md); background: linear-gradient(0deg,rgba(5,9,15,.95) 0%,rgba(5,9,15,.74) 40%,rgba(5,9,15,.5) 100%), linear-gradient(90deg,rgba(5,9,15,.7) 0%,rgba(5,9,15,.2) 70%), var(--sn-ink) var(--sn-cta-img) center/cover no-repeat; } body.theme-sinematik .cta-band>div:first-child{display:contents;} body.theme-sinematik .cta-band::after{content:"";grid-column:1 / -1;grid-row:1;width:72px;height:3px;background:var(--sn-green);margin:0 0 clamp(26px,3vw,40px);} body.theme-sinematik .cta-band h2{ grid-column:1 / -1;grid-row:2;margin:0;max-width:13em;color:#fff;font-weight:600;text-transform:uppercase; font-size:clamp(2.4rem,.9rem + 4.8vw,6.4rem);line-height:1;letter-spacing:-.01em;text-wrap:balance; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } body.theme-sinematik .cta-band::before{content:"";grid-column:1 / -1;grid-row:3;height:1px;background:rgba(255,255,255,.16);margin:clamp(28px,3.4vw,48px) 0 28px;} body.theme-sinematik .cta-band p{grid-column:1;grid-row:4;margin:0;max-width:34rem;font-size:clamp(1rem,.94rem + .25vw,1.16rem);line-height:1.62;color:rgba(235,240,246,.86);} body.theme-sinematik .cta-band .actions{grid-column:2;grid-row:4;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;} /* with :has() the wrapping section itself becomes the full-bleed photo band */ body.theme-sinematik .section-sm:has(> .container > .cta-band){ position:relative;isolation:isolate;overflow:hidden;padding:0;color:var(--sn-t-md);border-top:0; background: linear-gradient(0deg,rgba(5,9,15,.96) 0%,rgba(5,9,15,.78) 34%,rgba(5,9,15,.42) 70%,rgba(5,9,15,.62) 100%), linear-gradient(90deg,rgba(5,9,15,.74) 0%,rgba(5,9,15,.22) 62%,rgba(5,9,15,.1) 100%), var(--sn-ink) var(--sn-cta-img) var(--sn-cta-pos,60% 50%)/cover no-repeat; } body.theme-sinematik .section-sm:has(> .container > .cta-band)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("../img/sinematik/grain.png") repeat;background-size:160px 160px;opacity:.07;} body.theme-sinematik .section-sm > .container > .cta-band:only-child{background:none;padding:clamp(140px,16vw,220px) 0 clamp(72px,8vw,120px);min-height:clamp(520px,72vh,780px);align-content:end;} /* ========================================================================== INNER PAGES — FORMS ========================================================================== */ body.theme-sinematik .form-grid{gap:22px 20px;} body.theme-sinematik .field{gap:10px;min-width:0;} body.theme-sinematik .field label{font-family:var(--sn-f-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--tx-lo);} body.theme-sinematik .field input, body.theme-sinematik .field textarea, body.theme-sinematik .field select{ width:100%;min-height:56px;padding:14px 18px;border:1px solid var(--sn-field-line);border-radius:0; background:#fff;color:var(--sn-i-hi);font-family:var(--sn-f-text);font-size:1rem;line-height:1.4; transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none; } body.theme-sinematik .field select{ padding-right:48px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230a1420' stroke-width='1.6'/%3E%3C/svg%3E") right 18px center/12px 8px no-repeat; } body.theme-sinematik .field textarea{min-height:168px;resize:vertical;} /* invalid-field scrolling (native validation, keyboard): the label stays visible under the fixed header */ body.theme-sinematik .field :is(input,textarea,select){scroll-margin-top:132px;scroll-margin-bottom:24px;} body.theme-sinematik .field ::placeholder{color:#6b7789;opacity:1;} body.theme-sinematik .field input:hover, body.theme-sinematik .field textarea:hover, body.theme-sinematik .field select:hover{border-color:var(--sn-i-md);} body.theme-sinematik .field input:focus, body.theme-sinematik .field textarea:focus, body.theme-sinematik .field select:focus{outline:none;border-color:var(--sn-green-dk);box-shadow:inset 0 0 0 1px var(--sn-green-dk),0 0 0 3px rgba(14,143,69,.14);} body.theme-sinematik .field :is(input,textarea,select):user-invalid{border-color:#b42318;box-shadow:inset 0 0 0 1px #b42318;} body.theme-sinematik .form-note{font-size:.9rem;color:var(--tx-lo);} body.theme-sinematik form .btn[type="submit"]{min-width:260px;} /* both site forms end the same way: 280px, label left, arrow right */ body.theme-sinematik :is(#contactForm,#careerForm) button[type="submit"].btn{min-width:280px;justify-content:space-between;} /* Web3Forms result (main.js initWeb3Form): inline, announced politely, replaces alert() */ body.theme-sinematik .form-status{ display:flex;align-items:flex-start;gap:14px;margin:22px 0 0;padding:16px 20px 16px 18px;max-width:40rem; background:#fff;box-shadow:inset 0 0 0 1px var(--sn-line-l);border-left:3px solid var(--sn-green-dk); font-family:var(--sn-f-text);font-size:1rem;font-weight:500;line-height:1.5;color:var(--sn-i-hi); animation:snStatusIn .5s var(--sn-ease) both; } body.theme-sinematik .form-status[hidden]{display:none;} body.theme-sinematik .form-status::before{ content:"";flex:none;width:18px;height:18px;margin-top:2px;background:var(--sn-green-dk); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; } body.theme-sinematik .form-status.is-err{border-left-color:#b42318;color:#7a1a12;background:#fff8f7;} body.theme-sinematik .form-status.is-err::before{ background:#b42318; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M9 4.8v5.4M9 12v1.6' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M9 4.8v5.4M9 12v1.6' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E"); } @keyframes snStatusIn{from{opacity:0;transform:translate3d(0,8px,0);}to{opacity:1;transform:none;}} /* busy submit: label reads "sending…", arrow becomes a spinner, a thin bar runs along the bottom */ body.theme-sinematik .btn-primary[aria-busy="true"], body.theme-sinematik .btn-primary[aria-busy="true"]:disabled{opacity:1;cursor:progress;background:var(--sn-green-btn-h);overflow:hidden;} body.theme-sinematik .btn-primary[aria-busy="true"]::after{ width:16px;height:16px;background:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%; -webkit-mask:none;mask:none;transform:none;animation:snSpin .8s linear infinite; } body.theme-sinematik .btn-primary[aria-busy="true"]::before{ content:"";position:absolute;left:0;bottom:0;width:36%;height:3px;background:rgba(255,255,255,.7); animation:snBusyBar 1.2s var(--sn-ease-io) infinite; } @keyframes snSpin{to{transform:rotate(360deg);}} @keyframes snBusyBar{from{transform:translateX(-100%);}to{transform:translateX(280%);}} /* CV drop zone (kariyer) */ body.theme-sinematik .cv-input{display:none;} body.theme-sinematik .cv-drop{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; min-height:148px;padding:28px 20px;text-align:center;cursor:pointer; background:#fff;border:1px dashed var(--sn-field-line);border-radius:0;transition:border-color .25s,background-color .25s; } body.theme-sinematik .cv-drop:hover, body.theme-sinematik .cv-drop.is-over{border-color:var(--sn-green-dk);background:#f7fbf8;} body.theme-sinematik .cv-drop:focus-visible{outline:2px solid var(--sn-green-dk);outline-offset:2px;} body.theme-sinematik .cv-drop__icon{width:30px;height:30px;margin:0 0 6px;color:var(--sn-green-dk);} body.theme-sinematik .cv-drop__label{margin:0;font-family:var(--sn-f-display);font-weight:600;font-size:1.06rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sn-i-hi);overflow-wrap:anywhere;} body.theme-sinematik .cv-drop__note{margin:0;font-family:var(--sn-f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sn-i-lo);} body.theme-sinematik .cv-drop.has-file{border-style:solid;border-color:var(--sn-green-dk);} body.theme-sinematik .cv-drop.has-file .cv-drop__label{color:var(--sn-green-dk);text-transform:none;letter-spacing:.02em;} /* ========================================================================== INNER PAGES — TABS (desktop underline row · phones: 2×2 segmented grid) ========================================================================== */ body.theme-sinematik .tabs-nav{display:flex;flex-wrap:wrap;gap:0;margin:0 0 clamp(48px,5vw,80px);border-bottom:1px solid var(--line);} body.theme-sinematik .tabs-nav button{ position:relative;min-height:60px;padding:0 26px;margin:0 0 -1px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none; font-family:var(--sn-f-display);font-weight:600;font-size:1.08rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;color:var(--tx-lo); transition:color .25s; } body.theme-sinematik .tabs-nav button:first-child{padding-left:0;} body.theme-sinematik .tabs-nav button::after{content:"";position:absolute;left:26px;right:26px;bottom:-1px;height:3px;background:var(--sn-green);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--sn-ease);} body.theme-sinematik .tabs-nav button:first-child::after{left:0;} body.theme-sinematik .tabs-nav button:hover{color:var(--tx-hi);} body.theme-sinematik .tabs-nav button.active{color:var(--tx-hi);} body.theme-sinematik .tabs-nav button.active::after{transform:scaleX(1);} body.theme-sinematik .tab-panel.active{animation:snPanelIn .6s var(--sn-ease) both;} @keyframes snPanelIn{from{opacity:0;transform:translate3d(0,14px,0);}to{opacity:1;transform:none;}} /* ========================================================================== INNER PAGES — TIMELINE (hairline grid; year set in display type) ========================================================================== */ body.theme-sinematik .timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);padding:0;border:0;} body.theme-sinematik .timeline-item{position:relative;padding:26px 0 44px;border-top:1px solid var(--line);} body.theme-sinematik .timeline-item:last-child{padding-bottom:44px;} body.theme-sinematik .timeline-item::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;background:var(--sn-green);border:0;box-shadow:none;} body.theme-sinematik .timeline-item .yr{margin:0 0 14px;font-family:var(--sn-f-display);font-weight:600;font-size:clamp(2.6rem,1.6rem + 2vw,4rem);line-height:.9;letter-spacing:-.01em;color:var(--tx-hi);} body.theme-sinematik .timeline-item h4{margin:0 0 8px;color:var(--tx-hi);} body.theme-sinematik .timeline-item p{margin:0;font-size:1rem;line-height:1.6;color:var(--tx-md);max-width:30em;} /* ========================================================================== INNER PAGES — CHIPS, POLICY, PHOTO FRAME ========================================================================== */ body.theme-sinematik .chip-row{gap:10px;} body.theme-sinematik .chip{ display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:10px 18px;border:0;border-radius:0; background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--tx-hi); font-family:var(--sn-f-display);font-weight:600;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.15; } body.theme-sinematik .chip::before{content:"";width:8px;height:8px;background:var(--sn-green);flex:none;} body.theme-sinematik :is(.bg-navy,.sn-dark) .chip{background:transparent;} body.theme-sinematik .policy-block{ position:relative;padding:clamp(28px,3.4vw,52px);border:0;border-radius:0; background:var(--sn-navy);color:var(--sn-t-md);box-shadow:0 40px 80px -36px rgba(5,9,15,.55); } body.theme-sinematik .policy-block::before{content:"";position:absolute;left:0;top:0;width:72px;height:3px;background:var(--sn-green);} body.theme-sinematik .policy-block ul{display:block;counter-reset:snpol;} body.theme-sinematik .policy-block li{ counter-increment:snpol;display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 12px; padding:16px 0;border-top:1px solid var(--sn-line-d);font-size:1rem;line-height:1.55;color:var(--sn-t-md); } body.theme-sinematik .policy-block li:first-child{border-top:0;padding-top:0;} body.theme-sinematik .policy-block li:last-child{padding-bottom:0;} body.theme-sinematik .policy-block li::before{content:counter(snpol,decimal-leading-zero);font-family:var(--sn-f-mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--sn-green-lt);padding-top:.25em;} body.theme-sinematik .policy-block li svg{display:none;} body.theme-sinematik .photo-frame{position:relative;overflow:hidden;background:var(--sn-navy-2);border:0;border-radius:0;} body.theme-sinematik .photo-frame::before{content:"";position:absolute;left:0;top:0;z-index:2;width:72px;height:3px;background:var(--sn-green);} body.theme-sinematik .photo-frame img{width:100%;height:100%;object-fit:cover;} body.theme-sinematik .photo-frame>svg{color:rgba(255,255,255,.28);} body.theme-sinematik .photo-frame .tag{font-family:var(--sn-f-mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;background:var(--sn-ink);} /* ========================================================================== INNER PAGES — CERTIFICATES (real documents, presented as paper on a table) ========================================================================== */ body.theme-sinematik .cert-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;gap:clamp(16px,2.4vw,36px);} body.theme-sinematik .cert-card{position:relative;display:block;overflow:hidden;background:#fff;border:0;border-radius:0;box-shadow:inset 0 0 0 1px var(--sn-line-l);transition:box-shadow .35s var(--sn-ease),transform .35s var(--sn-ease);} body.theme-sinematik .cert-card::before{content:"";position:absolute;left:0;top:0;z-index:2;height:3px;width:44px;background:var(--sn-green);transition:width .6s var(--sn-ease);} body.theme-sinematik .cert-card .shot{aspect-ratio:3/4;padding:clamp(16px,2vw,28px);background:var(--sn-fog);border-bottom:1px solid var(--sn-line-l);} body.theme-sinematik .cert-card .shot img{width:100%;height:100%;object-fit:contain;object-position:center;background:#fff;box-shadow:0 18px 36px -18px rgba(5,9,15,.45),0 2px 6px rgba(5,9,15,.08);transition:transform .6s var(--sn-ease);} body.theme-sinematik .cert-card .label{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:14px 18px;} body.theme-sinematik .cert-card .label::after{ content:"";width:14px;height:14px;flex:none;background:var(--sn-green-dk); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 1.5h8.5V10M12.5 1.5L1.5 12.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 1.5h8.5V10M12.5 1.5L1.5 12.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat; } body.theme-sinematik .cert-card b{margin:0;font-family:var(--sn-f-display);font-weight:600;font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.15;color:var(--sn-i-hi);} body.theme-sinematik .cert-card span{font-family:var(--sn-f-mono);font-size:11.5px;letter-spacing:.12em;color:var(--sn-i-lo);} @media (hover:hover) and (pointer:fine){ body.theme-sinematik .cert-card:hover{box-shadow:inset 0 0 0 1px var(--sn-line-l),0 28px 56px -32px rgba(5,9,15,.45);transform:translateY(-4px);} body.theme-sinematik .cert-card:hover::before{width:100%;} body.theme-sinematik .cert-card:hover .shot img{transform:scale(1.03);} } /* ========================================================================== HİZMETLER — SLIDESHOW BASE + LIGHTBOX Chapter layout (.svc-row / .svc-num / .svc-text / .svc-media), frame proportions, controls and anchor offsets live in page-hizmetler.css; this keeps what the page layer builds on. ========================================================================== */ body.theme-sinematik .sss{border-radius:0;overflow:visible;background:none;} body.theme-sinematik .sss-wrap{aspect-ratio:4/3;background:var(--sn-navy-2);touch-action:pan-y;} body.theme-sinematik .sss-wrap::before{content:"";position:absolute;left:0;top:0;z-index:2;width:72px;height:3px;background:var(--sn-green);pointer-events:none;} /* expand affordance (the slideshow opens the lightbox) */ body.theme-sinematik .sss-wrap::after{ content:"";position:absolute;right:0;top:0;z-index:2;width:48px;height:48px;pointer-events:none; background:rgba(5,9,15,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 1.5h5v5M14.5 1.5L9 7M6.5 14.5h-5v-5M1.5 14.5L7 9' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") center/16px no-repeat; transition:background-color .25s; } @media (hover:hover) and (pointer:fine){ body.theme-sinematik .sss-wrap:hover::after{background-color:var(--sn-green-btn);} } body.theme-sinematik .sss-wrap video{transition:opacity .9s ease,transform 1.2s var(--sn-ease);} /* dots → segmented progress bar: each segment is a 44px-tall tap target */ body.theme-sinematik .sss-dots{display:flex;justify-content:flex-start;gap:4px;padding:0;margin-top:10px;background:none;} body.theme-sinematik .sss-dot{position:relative;flex:1 1 0;min-width:0;max-width:72px;height:44px;border-radius:0;background:none;transform:none!important;} body.theme-sinematik .sss-dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--line);transition:background-color .3s,height .3s,margin .3s;} @media (hover:hover) and (pointer:fine){ body.theme-sinematik .sss-dot:hover::before{background:var(--tx-lo);} } body.theme-sinematik .sss-dot.active::before{height:3px;margin-top:-1.5px;background:var(--sn-green);} body.theme-sinematik #svcLightbox .lb-backdrop{background:rgba(5,9,15,.96);} body.theme-sinematik #svcLightbox .lb-img{max-width:min(92vw,1440px);max-height:84vh;border-radius:0;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);} body.theme-sinematik #svcLightbox :is(.lb-close,.lb-prev,.lb-next){ width:56px;height:56px;border-radius:0;border:0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); color:#fff;font-family:var(--sn-f-text);font-size:1.2rem;line-height:1;transition:background-color .25s,box-shadow .25s; } body.theme-sinematik #svcLightbox :is(.lb-close,.lb-prev,.lb-next):hover{background:var(--sn-green-btn);box-shadow:inset 0 0 0 1px var(--sn-green-btn);} body.theme-sinematik #svcLightbox .lb-close{top:max(16px,env(safe-area-inset-top));right:16px;} body.theme-sinematik #svcLightbox .lb-prev{left:24px;} body.theme-sinematik #svcLightbox .lb-next{right:24px;} body.theme-sinematik #svcLightbox .lb-count{bottom:28px;font-family:var(--sn-f-mono);font-size:12px;letter-spacing:.16em;color:rgba(235,240,246,.72);} /* ========================================================================== CERTIFICATE STRIP ITEMS (main.js "strip" template — home + referanslar .sn-certs) ========================================================================== */ body.theme-sinematik .strip-item{font-family:var(--sn-f-display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;} body.theme-sinematik .strip-item svg{color:var(--sn-green-lt);} /* ========================================================================== FOOTER (shared partial) ========================================================================== */ body.theme-sinematik .site-footer{background:var(--sn-ink);color:var(--sn-t-lo);padding-top:clamp(64px,7vw,104px);border-top:1px solid rgba(255,255,255,.06);} body.theme-sinematik .site-footer .container{max-width:calc(var(--sn-max) + 2 * var(--sn-g));padding:0 var(--sn-g);} body.theme-sinematik .footer-top{gap:40px;padding-bottom:clamp(48px,5vw,72px);border-bottom:1px solid var(--sn-line-d);} body.theme-sinematik .footer-top h4{font-family:var(--sn-f-mono);font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--sn-t-lo);margin-bottom:20px;} body.theme-sinematik .site-footer p, body.theme-sinematik .footer-top p.desc{color:var(--sn-t-md);font-size:.98rem;line-height:1.65;max-width:340px;} body.theme-sinematik .site-footer .brand{min-height:44px;display:inline-flex;} body.theme-sinematik .footer-links li{font-size:.98rem;color:var(--sn-t-md);margin-bottom:2px;} body.theme-sinematik .footer-links li:not(:has(a)){margin-bottom:10px;} body.theme-sinematik .footer-links a{font-size:.98rem;color:var(--sn-t-md);display:inline-flex;align-items:center;min-height:44px;padding:0;} body.theme-sinematik .footer-links a:hover{color:#fff;} body.theme-sinematik .social-row a{width:44px;height:44px;border:1px solid var(--sn-line-d);color:#fff;} body.theme-sinematik .social-row a:hover{background:var(--sn-green-btn);border-color:var(--sn-green-btn);} body.theme-sinematik .footer-bottom{font-family:var(--sn-f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--sn-t-lo);padding:26px 0 max(30px,env(safe-area-inset-bottom));} /* ========================================================================== REVEALS (hidden states gated behind html.sinematik-js) ========================================================================== */ html.sinematik-js .sn-reveal{opacity:0;transform:translate3d(0,34px,0);} html.sinematik-js .sn-reveal.is-in{ opacity:1;transform:none; transition:opacity 1s var(--sn-ease) calc(var(--d,0) * 110ms),transform 1.15s var(--sn-ease) calc(var(--d,0) * 110ms); } /* clip lives on the image (not the observed figure: a fully clipped target never "intersects", and not the parallax wrapper: its moving box would expose the figure edge). --wipe-s = resting scale (1 for plain frames, 1.16 inside .sn-par parallax wrappers) */ .sn-wipe img{--wipe-s:1;} .sn-wipe .sn-par img{--wipe-s:1.16;} html.sinematik-js .sn-wipe img{clip-path:inset(100% 0 0 0);transform:scale(calc(var(--wipe-s) + .16));} html.sinematik-js .sn-wipe.is-in img{clip-path:inset(0 0 0 0);transform:scale(var(--wipe-s));transition:clip-path 1.5s var(--sn-ease-io),transform 2.2s var(--sn-ease);} html.sinematik-js .sn-stagger>*{opacity:0;transform:translate3d(0,30px,0);} html.sinematik-js .sn-stagger.is-in>*{opacity:1;transform:none;transition:opacity .9s var(--sn-ease),transform 1.05s var(--sn-ease);} html.sinematik-js .sn-stagger.is-in>:nth-child(2){transition-delay:.08s;} html.sinematik-js .sn-stagger.is-in>:nth-child(3){transition-delay:.16s;} html.sinematik-js .sn-stagger.is-in>:nth-child(4){transition-delay:.24s;} html.sinematik-js .sn-stagger.is-in>:nth-child(5){transition-delay:.32s;} html.sinematik-js .sn-stagger.is-in>:nth-child(6){transition-delay:.40s;} html.sinematik-js .sn-stagger.is-in>:nth-child(7){transition-delay:.48s;} html.sinematik-js .sn-stagger.is-in>:nth-child(n+8){transition-delay:.56s;} /* rail cards slide in from the right */ html.sinematik-js .sn-rail__track.sn-stagger>*{transform:translate3d(48px,0,0);} html.sinematik-js .sn-rail__track.sn-stagger.is-in>*{transform:none;transition:opacity .9s var(--sn-ease),transform 1.2s var(--sn-ease);} /* hover transitions must not inherit the stagger delay */ html.sinematik-js .sn-sectors__list.is-in>.sector-card h3{transition-delay:0s;} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1100px){ .sn-sectors__body{grid-template-columns:minmax(0,1fr);} .sn-sectors__photo{display:none;} /* four type-led cards get too narrow for uppercase display heads below ~1100px */ body.theme-sinematik .grid-4:not(.cert-grid){grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:980px){ .sn-about__head, .sn-services__head, .sn-sectors__head{grid-template-columns:minmax(0,1fr);} .sn-about__head .sn-h2,.sn-services .sn-h2,.sn-sectors__head .sn-h2{max-width:none;} .sn-about__intro,.sn-services__aside,.sn-sectors__lead{max-width:40rem;} .sn-about__stage{display:block;} .sn-about__photo{aspect-ratio:4/3;} .sn-about__card{margin:-72px var(--sn-g) 0;max-width:548px;} .sn-why__grid{grid-template-columns:minmax(0,1fr);} .sn-why .sn-h2{max-width:none;} body.theme-sinematik .timeline{grid-template-columns:repeat(2,minmax(0,1fr));} body.theme-sinematik .cta-band{grid-template-columns:minmax(0,1fr);} body.theme-sinematik .cta-band .actions{grid-column:1;grid-row:5;justify-content:flex-start;margin-top:28px;} } /* tablet portrait keeps the three stat columns (smaller figures); phones stack them */ @media (min-width:641px) and (max-width:900px){ body.theme-sinematik .sn-stat .sn-stat__v{font-size:clamp(3.4rem,9vw,5rem);} } @media (max-width:640px){ .sn-stats__grid{grid-template-columns:minmax(0,1fr);border-top:0;} .sn-stat{padding:22px 0 26px;gap:18px;border-top:1px solid var(--sn-line-d);} .sn-stat + .sn-stat{border-left:0;padding-left:0;} body.theme-sinematik .sn-stat .sn-stat__v{font-size:clamp(4.2rem,23vw,7rem);} } @media (max-width:600px){ body.theme-sinematik{font-size:16px;--sn-sec:76px;--sn-sec-sm:60px;} /* ---- home hero ---- */ .sn-hero__inner{padding-top:112px;padding-bottom:96px;} .sn-hero__title{font-size:clamp(2.35rem,12vw,3.5rem);line-height:.92;} /* home h2 follows the inner-page phone ratio (inner h2 9.2vw), about 6 % larger at every width */ .sn-h2:not(.sn-h2--md){font-size:clamp(2.15rem,9.8vw,2.75rem);} .sn-hero__shade{background: linear-gradient(0deg,rgba(5,9,15,.97) 0%,rgba(5,9,15,.9) 30%,rgba(5,9,15,.7) 58%,rgba(5,9,15,.5) 80%,rgba(5,9,15,.6) 100%);} .sn-kicker{margin-bottom:20px;font-size:11px;letter-spacing:.14em;} .sn-hero__foot{gap:24px;margin-top:22px;} .sn-hero__lead{font-size:1rem;} .sn-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:10px;} .sn-btn{width:100%;justify-content:space-between;padding:0 22px;} /* stacked pairs share the left text edge (primary: label left, arrow right) */ body.theme-sinematik :is(.cta-band,.page-hero) .actions .btn:is(.btn-outline,.btn-ghost){justify-content:flex-start;padding-left:22px;padding-right:22px;} .sn-btn--ghost{justify-content:center;} .sn-hud{gap:16px;min-height:64px;} .sn-hud__loc{display:none;} .sn-certrow{gap:12px;} .sn-certs{width:100%;} body.theme-sinematik .sn-certs .strip-item{width:100%;font-size:1rem;} .sn-about__photo{aspect-ratio:1/1;} .sn-about__card{margin:-56px 12px 0;} .sn-svc{--h:clamp(380px,112vw,470px);width:min(80vw,340px);} .sn-svc__body{padding:0 18px 18px;} .sn-svc__idx{left:18px;top:16px;} .sn-rail__btns{display:none;} .sn-rail__ui{margin-top:22px;} body.theme-sinematik .sn-sectors__list .sector-card{padding:22px 0 24px;} body.theme-sinematik .sn-sectors__list .sector-card h3{font-size:clamp(1.6rem,7.4vw,2.1rem);} /* stays below the section h2 */ body.theme-sinematik .sn-sectors__list .sector-card p{font-size:.97rem;} .sn-process{min-height:clamp(560px,92svh,760px);} .sn-process__title{font-size:clamp(2.3rem,10.4vw,3.2rem);} .sn-process__foot{flex-direction:row;align-items:flex-end;} .sn-why__photo{margin-left:calc(var(--sn-g) * -1);margin-right:calc(var(--sn-g) * -1);} .sn-marquee__set li{width:150px;height:100px;} .sn-cta{min-height:clamp(600px,96svh,820px);} .sn-cta__title{font-size:clamp(2.3rem,10.4vw,3.3rem);} /* ---- inner page hero ---- */ body.theme-sinematik .page-hero{min-height:max(520px,min(80svh,660px));padding-top:112px;} body.theme-sinematik .page-hero>.container{padding-bottom:104px;} body.theme-sinematik .page-hero h1{font-size:clamp(2.5rem,12.4vw,3.6rem);line-height:.92;} body.theme-sinematik .page-hero .lead{margin-top:22px;padding-top:20px;font-size:1rem;} body.theme-sinematik .crumb{margin-bottom:20px;font-size:11px;letter-spacing:.14em;} body.theme-sinematik .page-hero__shade{background: linear-gradient(0deg,rgba(5,9,15,.97) 0%,rgba(5,9,15,.9) 34%,rgba(5,9,15,.7) 62%,rgba(5,9,15,.52) 84%,rgba(5,9,15,.66) 100%), linear-gradient(0deg,rgba(14,28,44,.22),rgba(14,28,44,.22));} /* ---- inner type & layout ---- */ :where(body.theme-sinematik main) h2{font-size:clamp(2rem,9.2vw,2.6rem);line-height:1;} :where(body.theme-sinematik main) h3{font-size:clamp(1.45rem,6.4vw,1.75rem);} body.theme-sinematik .section-head{margin-bottom:36px;} body.theme-sinematik .section-head p{margin-top:18px;font-size:1rem;} /* one eyebrow on phones for home (.sn-eyebrow) and inner pages (.eyebrow): 12px mono, 20px to the title */ body.theme-sinematik .eyebrow,.sn-eyebrow{margin-bottom:20px;} body.theme-sinematik .two-col{gap:40px;} body.theme-sinematik .grid{gap:32px;} body.theme-sinematik .grid-4:not(.cert-grid){grid-template-columns:minmax(0,1fr);} body.theme-sinematik .btn{width:100%;justify-content:space-between;padding:0 22px;} body.theme-sinematik .btn-outline, body.theme-sinematik .btn-ghost{justify-content:center;} body.theme-sinematik form .btn[type="submit"]{min-width:0;} /* plain stacked text (icons hidden) */ body.theme-sinematik .grid .card, body.theme-sinematik .sector-card{display:block;padding:22px 0 2px;} body.theme-sinematik .card h3{font-size:clamp(1.45rem,6.4vw,1.75rem);margin-bottom:10px;} body.theme-sinematik .sector-card h3{font-size:clamp(1.7rem,8vw,2.2rem);} body.theme-sinematik .card p, body.theme-sinematik .sector-card p{font-size:.98rem;} body.theme-sinematik .cta-band{padding:48px 22px;row-gap:24px;} body.theme-sinematik .section-sm > .container > .cta-band:only-child{padding:120px 0 64px;min-height:min(88svh,640px);} body.theme-sinematik .cta-band h2{font-size:clamp(2.2rem,10.4vw,3.1rem);} body.theme-sinematik .cta-band .actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:10px;margin-top:26px;} body.theme-sinematik .cta-band .actions .btn{flex:none;} body.theme-sinematik .tabs-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border-bottom:0;margin-bottom:40px;} body.theme-sinematik .tabs-nav button, body.theme-sinematik .tabs-nav button:first-child{ min-height:56px;padding:8px 10px;margin:0;text-align:center;font-size:.98rem;letter-spacing:.05em; background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--line);color:var(--tx-md); } body.theme-sinematik .tabs-nav button::after, body.theme-sinematik .tabs-nav button:first-child::after{left:0;right:0;top:0;bottom:auto;} body.theme-sinematik .tabs-nav button:hover{color:var(--tx-hi);border-color:transparent;} body.theme-sinematik .tabs-nav button.active{background:var(--sn-i-hi);color:#fff;box-shadow:none;} body.theme-sinematik .timeline{grid-template-columns:minmax(0,1fr);} body.theme-sinematik .timeline-item{display:grid;grid-template-columns:84px minmax(0,1fr);gap:0 14px;padding:22px 0 26px;} body.theme-sinematik .timeline-item:last-child{padding-bottom:26px;border-bottom:1px solid var(--line);} body.theme-sinematik .timeline-item .yr{grid-row:1 / span 2;margin:0;font-size:2rem;line-height:.95;} body.theme-sinematik .timeline-item h4{font-size:1.15rem;margin-bottom:6px;} body.theme-sinematik .timeline-item p{grid-column:2;font-size:.97rem;} body.theme-sinematik .chip{width:100%;} body.theme-sinematik .policy-block{margin:0 calc(var(--sn-g) * -1);padding:32px var(--sn-g);} body.theme-sinematik .policy-block li{grid-template-columns:32px minmax(0,1fr);font-size:.97rem;} body.theme-sinematik .cert-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} body.theme-sinematik .cert-card .shot{padding:12px;} body.theme-sinematik .cert-card .label{min-height:56px;padding:12px;} body.theme-sinematik .cert-card b{font-size:.95rem;} body.theme-sinematik #svcLightbox .lb-img{max-width:100vw;max-height:74vh;} body.theme-sinematik #svcLightbox :is(.lb-prev,.lb-next){top:auto;bottom:max(20px,env(safe-area-inset-bottom));transform:none;} body.theme-sinematik #svcLightbox .lb-prev{left:20px;} body.theme-sinematik #svcLightbox .lb-next{right:20px;} body.theme-sinematik #svcLightbox .lb-count{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 20px);} body.theme-sinematik .footer-bottom{justify-content:flex-start;text-align:left;} body.theme-sinematik .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px;} body.theme-sinematik .footer-links a, body.theme-sinematik .footer-links li{min-width:0;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;} } /* short phones: keep the whole hero incl. HUD inside the first screen */ @media (max-width:600px) and (max-height:760px){ .sn-hero__inner{padding-top:92px;padding-bottom:84px;} .sn-hero__foot{gap:18px;margin-top:18px;} .sn-hud{min-height:56px;} body.theme-sinematik .page-hero{min-height:max(480px,82svh);padding-top:96px;} body.theme-sinematik .page-hero>.container{padding-bottom:88px;} } @media (max-width:600px) and (max-height:700px){ .sn-hero__inner{padding-top:84px;padding-bottom:76px;} .sn-hero__title{font-size:min(clamp(2.2rem,11vw,3.3rem),7.4vh);} .sn-hero__kicker{margin-bottom:14px;} .sn-hero__lead{font-size:.95rem;line-height:1.5;} .sn-hero__foot{gap:16px;margin-top:14px;} .sn-actions{gap:8px;} .sn-btn{min-height:50px;} .sn-hud{min-height:52px;} } /* narrow phones: the footer column heads stay on one line so both link lists start level */ @media (max-width:400px){ body.theme-sinematik .footer-top h4{letter-spacing:.08em;font-size:11.5px;} } /* phones: the CTA band gets a 3:4 crop of the same photo (pages that set their own --sn-cta-img keep it) */ @media (max-width:600px){ body.theme-sinematik{--sn-cta-img:url("../img/sinematik/sh-cta-m.jpg");--sn-cta-pos:50% 40%;} } /* ========================================================================== DIACRITICS IN UPPERCASE DISPLAY TYPE (TR İ Ş Ğ Ç Ö Ü · DE Ä Ö Ü) Barlow Condensed: cap height .70em, the İ/Ö/Ü dots reach .91em, cedillas drop .19em. At line-height .90–.95 the dots of a wrapped second line touch the letters above ("HİZMETLER & YETKİNLİKLER" on phones). TR/DE get .98–1.0: the dots clear the line above by ~.07–.09em and the titles stay tight. EN (no marks) keeps the original .90. ========================================================================== */ html:is([lang="tr"],[lang="de"]) body.theme-sinematik :is(.sn-hero__title,.page-hero h1){line-height:1;} html:is([lang="tr"],[lang="de"]) body.theme-sinematik :is(.sn-svc__body h3,.sector-card h3,.sn-sectors__list .sector-card h3,.rf-index .sector-card h3,.svc-text h3,.hz-index__row h3){line-height:1;} html:is([lang="tr"],[lang="de"]) body.theme-sinematik .ct-loc__title{line-height:.98;} /* intro masks clip with overflow:hidden — room for dots above and cedillas below each masked line */ html:is([lang="tr"],[lang="de"]) body.theme-sinematik .sn-mask{padding:.14em 0 .12em;margin:-.14em 0 -.12em;} /* ========================================================================== REDUCED MOTION — no animation, everything visible ========================================================================== */ @media (prefers-reduced-motion: reduce){ html.sinematik-js .sn-reveal, html.sinematik-js .sn-stagger>*, html.sinematik-js :is(.sn-hero,.page-hero) .sn-intro, html.sinematik-js :is(.sn-hero,.page-hero) .sn-mask__in, html.sinematik-js .sn-rail__track.sn-stagger>*{opacity:1!important;transform:none!important;transition:none!important;} html.sinematik-js .sn-wipe img{clip-path:none!important;transform:scale(var(--wipe-s))!important;transition:none!important;} html.sinematik-js .sn-hero__video{opacity:1!important;transform:scale(1.04)!important;transition:none!important;} html.sinematik-js .page-hero__media img{opacity:1!important;transform:scale(1.04)!important;transition:none!important;} .sn-scroll__rail span{animation:none;transform:translateY(11px);} body.theme-sinematik .tab-panel.active{animation:none;} /* static, clean logo grid: 5×2 on desktop, 2×5 on phones */ .sn-marquee{-webkit-mask-image:none;mask-image:none;border:0;overflow:visible;width:calc(100% - 2 * var(--sn-g));max-width:var(--sn-max);margin-left:auto;margin-right:auto;} .sn-marquee__set li{height:clamp(96px,9vw,136px);} .sn-marquee__track{animation:none;width:auto;display:block;} .sn-marquee__set{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--sn-line-l);border:1px solid var(--sn-line-l);} .sn-marquee__set li{width:auto;border:0;} .sn-marquee__set[aria-hidden="true"]{display:none;} .sn-svc__media img,.sn-sectors__list .sector-card h3,.sn-btn .sn-arrow,.sn-link .sn-arrow, body.theme-sinematik .btn-primary::after,body.theme-sinematik .cert-card, body.theme-sinematik .cert-card .shot img{transition:none!important;} body.theme-sinematik .nav-main{transition:none!important;} body.theme-sinematik .form-status{animation:none;} body.theme-sinematik .btn-primary[aria-busy="true"]::before{animation:none;width:100%;opacity:.5;} } @media (prefers-reduced-motion: reduce) and (max-width:600px){ .sn-marquee__set{grid-template-columns:repeat(2,minmax(0,1fr));} .sn-marquee__set li{height:96px;} }