/* Krom Atölye stili: kömür/asfalt zemin, Parlak Lime vurgu, Barlow Condensed + DM Sans, asimetrik otomotiv editoryali. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
@import "tailwindcss";
@import "tw-animate-css";

:root { --ink:#101212; --asphalt:#171a1b; --asphalt-2:#222728; --mist:#edf3f1; --ice:#b8d9d8; --lime:#d8f34a; --line:rgba(237,243,241,.16); --muted:#9fa9a7; --radius:.65rem; --background:#101212; --foreground:#edf3f1; --primary:#d8f34a; --primary-foreground:#101212; }
@theme inline { --color-background:var(--background); --color-foreground:var(--foreground); --color-primary:var(--primary); --color-primary-foreground:var(--primary-foreground); --color-border:var(--line); --radius-sm:calc(var(--radius) - 4px); --radius-md:calc(var(--radius) - 2px); --radius-lg:var(--radius); --radius-xl:calc(var(--radius) + 4px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--mist); font-family:'DM Sans',sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.site-shell { overflow:hidden; background:var(--ink); }
.site-header { position:absolute; z-index:10; top:0; left:0; right:0; height:88px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); border-bottom:1px solid rgba(255,255,255,.15); }
.brand-lockup { display:flex; align-items:center; gap:11px; letter-spacing:.03em; }
.brand-lockup > span:last-child { display:flex; flex-direction:column; line-height:.8; }
.brand-lockup b { font-family:'Barlow Condensed'; font-size:27px; font-weight:800; letter-spacing:.08em; } .brand-primary { color:var(--mist); } .brand-secondary { color:var(--ice); } .reflector-a { display:inline-block; position:relative; color:var(--lime); transform:skew(-10deg); } .reflector-a::after { content:''; position:absolute; width:7px; height:2px; left:3px; top:7px; background:var(--ink); transform:rotate(-22deg); box-shadow:5px 4px 0 var(--ink); }
.brand-lockup small { font-size:8px; font-weight:600; letter-spacing:.27em; margin-top:7px; color:var(--ice); }
.brand-mark { width:31px; height:31px; position:relative; display:block; transform:rotate(-12deg); } .brand-symbol { width:31px; height:31px; object-fit:contain; display:block; } .footer-brand .brand-symbol { width:38px; height:38px; }
.brand-mark span { display:block; position:absolute; background:var(--lime); width:23px; height:10px; border-radius:10px 2px 10px 2px; transform:skew(-16deg); }
.brand-mark span:first-child { top:5px; left:2px; }
.brand-mark span:last-child { bottom:5px; right:1px; background:var(--ice); }
.main-nav { display:flex; align-items:center; gap:clamp(20px,3vw,42px); font-size:12px; font-weight:600; color:#d9e2df; }
.main-nav a { transition:color .18s ease; }
.main-nav a:hover { color:var(--lime); }
.nav-cta { display:flex; align-items:center; gap:8px; border:1px solid var(--lime); color:var(--lime); padding:12px 17px; }
.menu-toggle { display:none; color:var(--mist); background:none; border:0; }
.hero { min-height:780px; position:relative; display:flex; align-items:center; padding:150px clamp(22px,9vw,140px) 100px; isolation:isolate; border-bottom:8px solid var(--lime); } .hero::after { content:'P / STUDIO'; position:absolute; top:47%; right:28px; writing-mode:vertical-rl; color:rgba(216,243,74,.7); font:600 10px 'Barlow Condensed'; letter-spacing:.18em; }
.hero-image { position:absolute; inset:0; z-index:-3; background:url('./chemigaraj-bmw-e60-hero.png') center/cover; filter:saturate(.8); }
.hero-wash { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(16,18,18,.97) 0%,rgba(16,18,18,.82) 34%,rgba(16,18,18,.12) 75%),linear-gradient(0deg,rgba(16,18,18,.6),transparent 40%); }
.hero-content { max-width:750px; animation:reveal .65s cubic-bezier(.23,1,.32,1) both; }
.eyebrow,.section-tag { color:var(--lime); text-transform:uppercase; font-size:10px; letter-spacing:.19em; font-weight:700; }
.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.eyebrow-dot { width:7px; height:7px; background:var(--lime); border-radius:50%; box-shadow:0 0 0 5px rgba(216,243,74,.15); }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:'Barlow Condensed',sans-serif; }
h1 { font-size:clamp(5rem,10vw,9.6rem); line-height:.82; letter-spacing:-.035em; text-transform:uppercase; font-weight:800; }
h1 em,h2 i { font-style:normal; color:var(--lime); }
.hero-copy { max-width:410px; margin:35px 0 31px; color:#c5cfcc; font-size:15px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:49px; padding:0 20px; border:1px solid transparent; font-weight:700; font-size:12px; letter-spacing:.02em; transition:transform .16s ease, background .18s ease, color .18s ease; }
.button:active { transform:scale(.97); }
.button-lime { color:var(--ink); background:var(--lime); }
.button-lime:hover { background:#edf985; transform:translateY(-2px); }
.button-dark { background:var(--ink); color:var(--mist); }
.text-link { display:flex; align-items:center; gap:10px; color:var(--mist); font-size:12px; font-weight:600; }
.text-link:hover { color:var(--lime); }
.hero-data { position:absolute; right:clamp(22px,5vw,76px); bottom:83px; display:flex; gap:35px; border-left:1px solid var(--lime); padding-left:19px; }
.hero-data div { display:flex; flex-direction:column; gap:3px; }
.hero-data span { display:none; }
.hero-data b { font-family:'Barlow Condensed'; font-size:21px; letter-spacing:.08em; }
.hero-data small { color:#aab8b4; font-size:10px; }
.scroll-cue { position:absolute; left:clamp(22px,5vw,76px); bottom:34px; display:flex; gap:12px; align-items:center; text-transform:uppercase; letter-spacing:.18em; color:#b8c2be; font-size:9px; }
.scroll-cue svg { color:var(--lime); }
.intro-band { position:relative; display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:50px; padding:115px clamp(22px,9vw,140px) 125px; background:var(--mist); color:var(--ink); background-image:linear-gradient(135deg,transparent 0 91%,rgba(184,217,216,.45) 91% 92%,transparent 92%),linear-gradient(rgba(16,18,18,.035) 1px,transparent 1px); background-size:auto,100% 10px; } .intro-band::after { content:''; position:absolute; top:0; right:8%; width:150px; height:14px; background:var(--lime); transform:skewX(-35deg); } .vertical-rail { position:absolute; left:clamp(5px,2vw,30px); top:50%; transform:rotate(-90deg) translateX(-50%); transform-origin:left top; font:700 9px 'DM Sans'; letter-spacing:.18em; color:#6d8133; white-space:nowrap; } .rail-dark { color:var(--lime); } .rail-lime { color:var(--ink); }
.intro-band .section-tag,.services-section .section-tag,.feature-copy .section-tag,.pricing-section .section-tag,.booking-section .section-tag { color:#6d8133; }
.intro-statement { font-family:'Barlow Condensed'; font-size:clamp(3rem,5vw,5.2rem); text-transform:uppercase; line-height:.88; letter-spacing:-.03em; }
.intro-statement strong { font-weight:700; color:#5b706e; }
.lime-rule { display:block; width:76px; height:7px; margin-top:34px; background:var(--lime); }
.intro-details { align-self:end; max-width:260px; color:#566360; font-size:13px; line-height:1.7; }
.arrow-link { display:inline-flex; align-items:center; gap:7px; margin-top:25px; color:var(--ink); font-size:12px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:7px; }
.services-section { position:relative; padding:120px clamp(22px,9vw,140px); background:var(--asphalt); background-image:linear-gradient(135deg,rgba(255,255,255,.025) 25%,transparent 25% 50%,rgba(255,255,255,.02) 50% 75%,transparent 75%); background-size:9px 9px; } .services-section::before { content:''; position:absolute; right:-2%; top:0; width:33%; height:17px; background:var(--lime); transform:skewX(-34deg); }
.section-heading,.pricing-top { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:60px; }
.section-heading h2,.pricing-top h2,.booking-intro h2,.feature-copy h2 { font-size:clamp(4rem,7vw,7.5rem); line-height:.83; text-transform:uppercase; letter-spacing:-.03em; margin-top:25px; }
.section-heading > p,.pricing-top > p { max-width:265px; color:#a9b4b1; font-size:13px; line-height:1.65; }
.service-list { border-top:1px solid var(--line); }
.service-card { display:grid; grid-template-columns:55px 60px 1fr auto 22px; align-items:center; gap:22px; min-height:137px; border-bottom:1px solid var(--line); transition:background .2s ease, padding .2s ease; }
.service-card:hover { background:rgba(216,243,74,.06); padding-left:13px; }
.service-no { color:var(--lime); font:600 17px 'Barlow Condensed'; }
.service-icon { width:44px; height:44px; display:grid; place-items:center; color:var(--lime); border:1px solid rgba(216,243,74,.45); }
.service-main h3 { font-size:31px; letter-spacing:.01em; text-transform:uppercase; }
.service-main p { color:#a9b4b1; font-size:12px; margin:6px 0 10px; }
.service-meta { display:flex; align-items:center; gap:5px; color:#7e8986; text-transform:uppercase; letter-spacing:.1em; font-size:9px; }
.service-price { text-align:right; display:flex; flex-direction:column; }
.service-price small { color:#81908b; font-size:9px; text-transform:uppercase; }
.service-price strong { font:600 28px 'Barlow Condensed'; color:var(--mist); }
.service-arrow { color:var(--lime); }
.feature-split { position:relative; display:grid; grid-template-columns:1.1fr 1fr; background:var(--mist); color:var(--ink); } .feature-split::after { content:''; position:absolute; right:4%; top:25px; color:rgba(16,18,18,.35); font:700 9px 'DM Sans'; letter-spacing:.2em; transform:rotate(90deg); } .feature-photo { clip-path:polygon(0 0,100% 0,94% 100%,0 100%); }
.feature-photo { min-height:600px; background:url('./parlak-foam.jpg') center/cover; filter:saturate(.82); }
.feature-copy { padding:110px clamp(30px,8vw,125px); }
.feature-copy h2 { margin-bottom:35px; }
.feature-copy p { color:#53605e; max-width:365px; font-size:14px; line-height:1.75; }
.feature-copy ul { padding:0; margin:31px 0 7px; list-style:none; display:grid; gap:13px; color:#2d3937; font-size:12px; font-weight:600; }
.feature-copy li { display:flex; align-items:center; gap:10px; }
.feature-copy li svg { color:#71872b; }
.pricing-section { position:relative; padding:120px clamp(22px,9vw,140px) 0; background:var(--ink); background-image:linear-gradient(90deg,transparent 0 96%,rgba(216,243,74,.13) 96% 96.2%,transparent 96.2%); } .pricing-section::before { content:''; position:absolute; right:0; top:0; width:27%; height:100%; background:linear-gradient(90deg,var(--ink),rgba(16,18,18,.35)),url('./parlak-interior.jpg') center/cover; opacity:.2; clip-path:polygon(25% 0,100% 0,100% 100%,0 100%); pointer-events:none; } .pricing-section::after { content:''; position:absolute; left:0; bottom:0; width:28%; height:9px; background:var(--lime); transform:skewX(-35deg) translateX(-12%); }
.pricing-top,.price-ticker { position:relative; z-index:1; } .pricing-top h2 { color:var(--mist); }
.price-ticker { display:flex; justify-content:space-between; gap:20px; padding:22px 0; border-top:1px solid var(--line); color:#9fabA7; font-size:11px; }
.booking-section { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:90px; padding:130px clamp(22px,9vw,140px); background:var(--lime); color:var(--ink); background-image:linear-gradient(135deg,rgba(16,18,18,.06) 25%,transparent 25% 50%,rgba(16,18,18,.04) 50% 75%,transparent 75%); background-size:10px 10px; } .booking-section::after { content:''; position:absolute; right:5%; bottom:32px; font:700 9px 'DM Sans'; letter-spacing:.2em; color:rgba(16,18,18,.46); }
.booking-intro h2 { margin-bottom:35px; }
.booking-intro p { max-width:280px; font-size:14px; line-height:1.7; color:#465130; }
.booking-form { align-self:center; max-width:470px; width:100%; display:grid; gap:18px; }
.booking-form label { display:grid; gap:8px; color:#526128; font-size:10px; text-transform:uppercase; letter-spacing:.13em; font-weight:700; }
.booking-form input,.booking-form select { width:100%; border:0; border-bottom:1px solid rgba(16,18,18,.35); padding:12px 0; background:transparent; color:var(--ink); outline:none; border-radius:0; font-size:14px; } .booking-fields { display:grid; grid-template-columns:1fr 1fr; gap:25px; } .form-error { color:#8a2d20; font-size:11px; line-height:1.4; margin-top:-7px; }
.booking-form input::placeholder { color:#687842; }
.booking-form select { appearance:none; }
.full-width { width:100%; margin-top:5px; }
.success-state { background:rgba(255,255,255,.28); padding:34px; }
.success-icon { width:45px; height:45px; display:grid; place-items:center; background:var(--ink); color:var(--lime); margin-bottom:22px; }
.success-state h3 { font-size:36px; text-transform:uppercase; }
.success-state p { color:#526128; font-size:13px; margin:8px 0 24px; }
.site-footer { position:relative; padding:80px clamp(22px,9vw,140px) 26px; background:#0c0e0e; } .site-footer::before { content:''; position:absolute; right:clamp(22px,9vw,140px); top:80px; writing-mode:vertical-rl; color:rgba(216,243,74,.35); font:700 9px 'DM Sans'; letter-spacing:.2em; }
.footer-brand { display:flex; gap:18px; align-items:center; }
.footer-brand p { color:#adb8b4; font:24px 'Barlow Condensed'; text-transform:uppercase; line-height:.95; letter-spacing:.03em; }
.footer-brand strong { color:var(--lime); }
.footer-contact { display:flex; gap:clamp(60px,13vw,190px); margin:72px 0; padding-left:49px; border-left:1px solid var(--lime); }
.footer-contact small { color:var(--lime); font-size:9px; letter-spacing:.17em; font-weight:700; }
.footer-contact p { color:#aab6b2; font-size:13px; line-height:1.8; margin-top:13px; }
.footer-contact a:hover { color:var(--lime); }
.footer-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:22px; color:#66716e; font-size:9px; letter-spacing:.13em; }
@keyframes reveal { from { opacity:0; transform:translateX(-25px); } to { opacity:1; transform:none; } }
@media (max-width: 760px) { .site-header { height:73px; } .main-nav { display:none; position:absolute; top:73px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--ink); padding:22px; border-bottom:1px solid var(--line); } .main-nav.is-open { display:flex; } .main-nav a { padding:14px 0; width:100%; } .nav-cta { justify-content:center; margin-top:10px; } .menu-toggle { display:block; } .hero { min-height:720px; padding-top:135px; } .hero-image { background-position:62% center; } .hero-wash { background:linear-gradient(90deg,rgba(16,18,18,.94),rgba(16,18,18,.45)),linear-gradient(0deg,rgba(16,18,18,.72),transparent 50%); } .hero-data { right:22px; left:22px; bottom:65px; justify-content:space-between; gap:10px; } .hero-data b { font-size:17px; } .scroll-cue { bottom:25px; } .intro-band,.feature-split,.booking-section { grid-template-columns:1fr; } .intro-band { padding:75px 22px; gap:35px; } .intro-details { align-self:auto; } .services-section,.pricing-section { padding:78px 22px 0; } .section-heading,.pricing-top { display:block; margin-bottom:38px; } .section-heading > p,.pricing-top > p { margin-top:30px; } .service-card { grid-template-columns:32px 1fr 20px; gap:13px; min-height:125px; } .service-icon { display:none; } .service-price { grid-column:2; grid-row:1; text-align:left; display:block; } .service-price small { margin-right:6px; } .service-price strong { font-size:22px; } .service-main { grid-column:2; grid-row:2; } .service-main h3 { font-size:25px; } .service-main p { margin:3px 0 8px; } .service-arrow { grid-column:3; grid-row:1 / span 2; } .feature-photo { min-height:370px; clip-path:none; } .vertical-rail { display:none; } .site-footer::before { display:none; } .feature-copy { padding:75px 22px 88px; } .price-ticker { flex-direction:column; padding:22px 0 35px; } .booking-section { gap:55px; padding:80px 22px; } .booking-fields { grid-template-columns:1fr; gap:18px; } .booking-form { max-width:none; } .footer-contact { flex-direction:column; gap:27px; margin:55px 0; } .footer-bottom { flex-direction:column; gap:12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Krom Atölye hızlı iletişim: sabit WhatsApp CTA, lime detaylarla uyumlu canlı yeşil ve mobilde ikon-only düzen. */
.whatsapp-float { position:fixed; right:24px; bottom:24px; z-index:100; display:inline-flex; align-items:center; gap:10px; padding:14px 17px; border:1px solid rgba(255,255,255,.3); background:#25D366; color:#06130a; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 14px 34px rgba(0,0,0,.28); transition:transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s ease, background-color .18s ease; }
.whatsapp-float:hover { transform:translateY(-4px); background:var(--lime); box-shadow:0 18px 38px rgba(0,0,0,.34); }
.whatsapp-float:active { transform:scale(.97); }
@media (max-width:640px) { .whatsapp-float { right:16px; bottom:16px; width:52px; height:52px; padding:0; justify-content:center; border-radius:50%; } .whatsapp-float span { display:none; } }
@media (prefers-reduced-motion:reduce) { .whatsapp-float { transition:none; } }

/* Krom Atölye Shopier vitrini: asimetrik ürün grid’i, teknik etiketler ve net satın alma CTA’ları. */
.products-section { position:relative; padding:120px clamp(22px,9vw,140px); background:var(--mist); color:var(--ink); background-image:linear-gradient(rgba(16,18,18,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,18,18,.025) 1px,transparent 1px); background-size:100% 10px,10px 100%; }
.products-section::before { content:'SHOPIER / SEÇKİ'; position:absolute; right:4%; top:34px; color:rgba(16,18,18,.25); font:700 9px 'DM Sans'; letter-spacing:.2em; writing-mode:vertical-rl; }
.products-heading { margin-bottom:56px; }
.products-heading > p { color:#53605e; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { min-width:0; background:#fff; border:1px solid rgba(16,18,18,.13); transition:transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s ease; }
.product-card:hover { transform:translateY(-7px); box-shadow:12px 16px 0 rgba(16,18,18,.08); }
.product-image-wrap { position:relative; aspect-ratio:1/1; overflow:hidden; background:#e6ece9; }
.product-image-wrap img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .35s cubic-bezier(.23,1,.32,1); }
.product-card:hover .product-image-wrap img { transform:scale(1.045); }
.product-image-wrap span { position:absolute; left:14px; top:14px; padding:7px 9px; background:var(--lime); color:var(--ink); font-size:9px; font-weight:800; letter-spacing:.08em; }
.product-card-body { padding:21px 21px 22px; }
.product-number { margin-bottom:14px; color:#72807a; font-size:9px; font-weight:700; letter-spacing:.15em; }
.product-card h3 { min-height:63px; font-size:28px; line-height:.9; text-transform:uppercase; }
.product-price { display:flex; align-items:baseline; gap:9px; margin:18px 0 20px; }
.product-price strong { font:700 30px 'Barlow Condensed'; }
.product-price del { color:#87908d; font-size:12px; }
.product-buy { width:100%; min-height:45px; justify-content:space-between; }
@media (max-width:760px) { .products-section { padding:78px 22px; } .product-grid { grid-template-columns:1fr; gap:16px; } .product-card { display:grid; grid-template-columns:42% 58%; } .product-image-wrap { aspect-ratio:1/1; } .product-card-body { display:flex; flex-direction:column; justify-content:center; padding:18px; } .product-card h3 { min-height:0; font-size:24px; } .product-price { margin:14px 0 15px; } .product-price strong { font-size:27px; } .product-buy { min-height:42px; } }

/* Shopier vitrini revizyonu: ürün kartları beyaz katalog kutuları yerine asfalt zeminli teknik envanter fişleri gibi davranır. */
.products-section { background:var(--asphalt); color:var(--mist); background-image:linear-gradient(135deg,rgba(255,255,255,.025) 25%,transparent 25% 50%,rgba(255,255,255,.018) 50% 75%,transparent 75%); background-size:9px 9px; }
.products-section::after { content:''; position:absolute; left:0; bottom:0; width:27%; height:10px; background:var(--lime); transform:skewX(-35deg) translateX(-12%); }
.products-heading > p { color:#a9b4b1; }
.product-card { position:relative; overflow:hidden; background:var(--ink); border:1px solid var(--line); }
.product-card::before { content:''; position:absolute; right:0; top:0; width:34px; height:6px; background:var(--lime); transform:skewX(-35deg) translateX(8px); z-index:2; }
.product-card:hover { box-shadow:12px 16px 0 rgba(216,243,74,.1); }
.product-image-wrap { border-bottom:4px solid var(--lime); background:var(--asphalt-2); }
.product-image-wrap span { background:var(--lime); }
.product-card-body { background:var(--ink); }
.product-number { color:var(--lime); }
.product-card h3 { color:var(--mist); }
.product-price strong { color:var(--mist); }
.product-buy { background:var(--lime); color:var(--ink); }
.product-buy:hover { background:#edf985; color:var(--ink); }
@media (max-width:760px) { .product-card { background:var(--ink); } }

/* Krom Atölye Shorts vitrini: Shopier’in altında dikey video kartları, sessiz autoplay ve teknik metadata satırı. */
.shorts-section { position:relative; padding:120px clamp(22px,9vw,140px); background:var(--mist); color:var(--ink); background-image:linear-gradient(rgba(16,18,18,.035) 1px,transparent 1px),linear-gradient(135deg,transparent 0 87%,rgba(184,217,216,.35) 87% 88%,transparent 88%); background-size:100% 10px,auto; }
.shorts-section::before { content:''; position:absolute; right:4%; top:34px; color:rgba(16,18,18,.25); font:700 9px 'DM Sans'; letter-spacing:.2em; writing-mode:vertical-rl; }
.shorts-section::after { content:''; position:absolute; left:0; bottom:0; width:25%; height:10px; background:var(--lime); transform:skewX(-35deg) translateX(-12%); }
.shorts-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:56px; }
.shorts-heading h2 { font:800 clamp(4rem,7vw,7.5rem)/.83 'Barlow Condensed'; letter-spacing:-.03em; text-transform:uppercase; margin-top:25px; }
.shorts-heading h2 i { color:#6d8133; font-style:normal; }
.shorts-heading > p { max-width:285px; color:#53605e; font-size:13px; line-height:1.65; }
.shorts-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.short-card { background:var(--ink); border:1px solid rgba(16,18,18,.18); padding:10px; transition:transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s ease; }
.short-card:hover { transform:translateY(-7px); box-shadow:10px 14px 0 rgba(16,18,18,.12); }
.short-frame { position:relative; overflow:hidden; aspect-ratio:9/16; background:var(--asphalt-2); }
.short-frame::before { content:''; position:absolute; inset:0; border:1px solid rgba(216,243,74,.45); pointer-events:none; z-index:1; }
.short-frame iframe { width:100%; height:100%; display:block; border:0; }
.short-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 2px 2px; color:var(--mist); font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.short-meta span { color:var(--lime); font-weight:700; }
.short-meta a { display:inline-flex; align-items:center; gap:5px; color:#aab6b2; font-weight:700; white-space:nowrap; }
.short-meta a:hover { color:var(--lime); }
@media (max-width:760px) { .shorts-section { padding:78px 22px; } .shorts-heading { display:block; margin-bottom:38px; } .shorts-heading > p { margin-top:30px; } .shorts-grid { grid-template-columns:1fr; gap:16px; } .short-card { display:grid; grid-template-columns:43% 57%; gap:14px; padding:8px; } .short-frame { aspect-ratio:9/16; } .short-meta { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:12px 8px 12px 0; gap:14px; } .short-meta a { white-space:normal; line-height:1.4; } }

/* Shorts CTA: her uygulama kesitinin altında randevu formuna giden net aksiyon. */
.short-book { width:100%; min-height:43px; justify-content:space-between; margin-top:10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.short-book:hover { background:#edf985; color:var(--ink); transform:translateY(-2px); }
@media (max-width:760px) { .short-book { grid-column:1 / -1; margin-top:0; } }

/* Shorts açıklamaları: video altındaki işlemi tek bakışta anlatan kısa teknik not. */
.short-description { min-height:58px; margin:12px 2px 0; color:#9fa9a7; font-size:11px; line-height:1.55; }
@media (max-width:760px) { .short-description { min-height:0; margin:0 8px 2px 0; font-size:10px; } }

/* Marka okunaklılığı ve numarasız bilgi hiyerarşisi: GARAJ koyu petrol tonuyla CH˙EMİ’den ayrışır. */
.brand-secondary { color:var(--ice); }
.booking-intro h2 i { color:#2f4c48; font-style:normal; }
.service-card { grid-template-columns:60px 1fr auto 22px; }
.service-no,.product-number { display:none; }
@media (max-width:760px) { .service-card { grid-template-columns:1fr 20px; } }

/* Mobil hizmet listesi: fiyat sola hizalı ve açıklamanın altında görünür; boş numara kolonu yok. */
@media (max-width:760px) {
  .service-card { display:grid; grid-template-columns:minmax(0,1fr) 22px; gap:6px 12px; min-height:0; padding:18px 0; }
  .service-main { min-width:0; grid-column:1; grid-row:1; }
  .service-main h3 { overflow-wrap:anywhere; }
  .service-price { min-width:0; grid-column:1; grid-row:2; text-align:left; display:flex; flex-direction:row; align-items:baseline; gap:8px; }
  .service-price small { margin:0; }
  .service-price strong { font-size:24px; }
  .service-arrow { grid-column:2; grid-row:1 / span 2; align-self:center; }
}


/* Mobil navigasyon: marka yerleşimini korurken Academy'yi görünür tut ve hamburgeri dokunulabilir yap. */
.mobile-academy-cta { display:none; }
.menu-toggle { align-items:center; justify-content:center; width:44px; height:44px; padding:0; cursor:pointer; touch-action:manipulation; font-size:24px; line-height:1; position:relative; z-index:12; }
.menu-toggle:focus-visible,.mobile-academy-cta:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
@media (max-width:760px) {
  .site-header { padding:0 12px; gap:8px; }
  .brand-lockup { gap:7px; min-width:0; }
  .brand-symbol { width:25px; height:25px; }
  .brand-lockup b { font-size:22px; }
  .brand-lockup small { font-size:7px; letter-spacing:.18em; }
  .mobile-academy-cta { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 9px; border:1px solid var(--lime); color:var(--lime); white-space:nowrap; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
  .main-nav .nav-academy { display:none; }
  .menu-toggle { display:inline-flex; flex:0 0 44px; }
  .main-nav { z-index:11; max-height:calc(100vh - 73px); overflow-y:auto; overscroll-behavior:contain; }
  .main-nav.is-open { box-shadow:0 18px 28px rgba(0,0,0,.38); }
}
@media (max-width:360px) {
  .site-header { padding-inline:10px; gap:6px; }
  .mobile-academy-cta { padding-inline:7px; font-size:8px; }
  .brand-lockup b { font-size:21px; }
}