/* ===== DEMIRCAN CONSULTANCY — shared.css ===== */ .animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .animate-visible{opacity:1;transform:translateY(0)} .animate-on-scroll:nth-child(2){transition-delay:.1s}.animate-on-scroll:nth-child(3){transition-delay:.2s} .animate-on-scroll:nth-child(4){transition-delay:.25s}.animate-on-scroll:nth-child(5){transition-delay:.3s}.animate-on-scroll:nth-child(6){transition-delay:.35s} #main-header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:box-shadow .3s ease} /* Desktop nav: a gold rule that grows from the left on hover and on keyboard focus. Animates transform on a pseudo-element (compositor-only) rather than width, so it never triggers layout on these scroll-heavy pages. The mobile panel (#mobile-menu) is a different element and is deliberately untouched - it is a tap list, where an underline animation reads as lag. The prefers-reduced-motion block near the end of this file already collapses the duration, so this respects that preference for free. */ header nav a{position:relative} header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px; background:#c9a227;transform:scaleX(0);transform-origin:left center; transition:transform .28s cubic-bezier(.22,1,.36,1)} header nav a:hover::after,header nav a:focus-visible::after{transform:scaleX(1)} /* Playfair is a Didone: at display sizes its default tracking reads loose next to DM Sans. A small optical correction only - letter-spacing is independent of line-height, which rides on the fontSize tokens (§11) and must not move. The :not() guard is load-bearing. shared.css loads AFTER tailwind.css, so a bare `.font-display` rule outranks any `tracking-*` utility on the same element - it silently loosened the homepage h1 from its intentional tracking-tight (-0.025em) to -0.01em. Anything that sets tracking explicitly keeps it; this only supplies a default where none was chosen. */ .font-display:not([class*="tracking-"]){letter-spacing:-0.01em} /* Card elevation, tuned for a DARK surface. The previous hover painted a navy shadow (rgba(15,22,45,.15)) onto the navy page - invisible by construction, so 33 cards across 10 pages had a hover state that did nothing but shift 6px. On a dark UI elevation reads through BORDER LUMINANCE and a tinted glow, not a drop shadow: the hairline warms toward gold, a black-based shadow gives real depth, and the lift shortens because the border is now doing the work. Only border-color and box-shadow are touched - the rest state still belongs to the Tailwind `border-cream/[0.06]` class on the element. */ .service-card{transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease} .service-card:hover{transform:translateY(-4px);border-color:rgba(201,162,39,.65); box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 0 1px rgba(201,162,39,.10)} .hero-grid{background-image:linear-gradient(rgba(245,240,230,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(245,240,230,.02) 1px,transparent 1px);background-size:60px 60px} /* --------------------------------------------------------------------------- Hero stat row (81 Il / 6 Yatirim Bolgesi / 2030 Son Basvuru Yili) --------------------------------------------------------------------------- The layout lives HERE, in hand-written CSS, rather than in Tailwind utilities. That is deliberate and load-bearing. This row is the one place on the site where losing spacing changes the MEANING rather than just the looks: with the gaps gone, "81" and "6" sit flush and read as "816", and the labels run together as "IlYatirim Bolgesi". It has now shipped broken twice, both times because the deployed assets/tailwind.css was stale and the gap and padding utilities the row depended on were simply absent. shared.css is not generated and not purged - it ships byte-for-byte - so the separation here cannot evaporate. (Do not write a Tailwind class pattern like gap-/pl- literally in a comment here: the slash-star sequence closes the CSS comment early and silently eats the rule that follows. That is exactly how the .hero-stats base rule went missing the first time this was written.) Three defences, any one of which is enough on its own: 1. each figure sits directly ABOVE its own label, so a figure can never end up adjacent to another figure; 2. horizontal separation is padding + margin on the item itself, not a flex `gap` on the parent; 3. a hairline rule is drawn between items via ::after, so the boundary is visible even if every spacing declaration were somehow lost. Do not move this back into utility classes. */ .hero-stats{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:1.25rem} .hero-stat{position:relative;padding-right:1.25rem;margin-right:1.25rem} .hero-stat::after{content:"";position:absolute;right:0;top:.2rem;bottom:.2rem; width:1px;background:rgba(245,240,230,.14)} .hero-stat:last-child{padding-right:0;margin-right:0} .hero-stat:last-child::after{display:none} .hero-stat__val{display:block;font-size:1.25rem;line-height:1.2;color:#f5f0e6} .hero-stat__lbl{display:block;font-size:.75rem;line-height:1.4; color:rgba(245,240,230,.55);margin-top:.25rem} @media (min-width:640px){ /* The rule separating this group from the "20+" firm stat also lives here, not as sm:pl-10 sm:border-l, so the whole row is Tailwind-independent. */ .hero-stats{padding-left:2.5rem;border-left:1px solid rgba(245,240,230,.10)} .hero-stat{padding-right:1.75rem;margin-right:1.75rem} .hero-stat__val{font-size:1.5rem} } /* The gradient endpoints are unchanged, so the navy ink still measures 7.40:1 on gold-500 and 9.42:1 on gold-400. The added inset is a 1px top highlight - it catches the eye like a lit edge and costs no contrast. */ .btn-gold{background:linear-gradient(135deg,#c9a227,#dbb94a);color:#0f162d;font-weight:600;transition:all .3s ease; box-shadow:0 2px 10px rgba(201,162,39,.24),inset 0 1px 0 rgba(255,255,255,.22)} .btn-gold:hover{box-shadow:0 6px 22px rgba(201,162,39,.44),inset 0 1px 0 rgba(255,255,255,.3);transform:translateY(-2px)} .btn-outline{border:2px solid rgba(245,240,230,.3);color:#f5f0e6;transition:all .3s ease} .btn-outline:hover{border-color:#c9a227;color:#c9a227} #mobile-menu{transition:transform .35s cubic-bezier(.22,1,.36,1)} .accordion-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)} .accordion-content.open{max-height:2000px} .accordion-arrow{transition:transform .3s ease} .accordion-arrow.rotate{transform:rotate(180deg)} .form-input{background:rgba(245,240,230,.06);border:1px solid rgba(245,240,230,.12);color:#f5f0e6;transition:border-color .3s ease,box-shadow .3s ease} .form-input:focus{border-color:#c9a227;box-shadow:0 0 0 3px rgba(201,162,39,.15);outline:none} .form-input::placeholder{color:rgba(245,240,230,.35)} /* WhatsApp CTA. Navy ink on the brand green, NOT white: white measures 1.98:1 here and was the last AA failure on the site (fixed August 2026). Navy gives 9.03:1 on #25D366 and 7.31:1 on the hover green, and keeps WhatsApp's actual brand colour untouched - darkening the fill instead would have meant #075E54 before white passed, which no longer reads as WhatsApp. Same ink-on-bright-fill pattern as .btn-gold and .map-selection-go, so the colour lives here and the markup carries no text-* class. */ .whatsapp-btn{background:#25D366;color:#0f162d;transition:all .3s ease} .whatsapp-btn:hover{background:#1ebe5d;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,.4)} /* Regions accordion. Sized so all six collapsed rows fit one viewport without scrolling (client request, August 2026) - the badge came down 48px -> 40px and the row padding with it. The row is a