/* Google Fonts ile layout.php içinden yüklenir. Buradan @import
edilirse tarayıcı önce style.css'i indirip sonra font CSS'ini istemek
zorunda kalır; bu zincir ilk boyamayı geciktiriyordu. */
:root {
--gutter:4vw;
/* Renk düzeni: kırmızı-beyaz yerine mürekkep siyahı + pirinç altını.
Berber dükkânının klasik havası buradan geliyor; altın hem koyu
zeminde hem beyaz başlıkta okunuyor, kırmızı beyazda okunmuyordu. */
--black:#0b0b0c; /* zemin */
--surface:#151517; /* kart */
--vurgu:#c8a24a; /* pirinç altın — düğme, vurgu */
--vurgu-koyu:#dcb85f; /* üzerine gelince */
--vurgu-yazi:#0b0b0c; /* altın zemin üstündeki yazı */
--white:#fff;
--light:#f3efe6; /* krem */
--gray:#9c9a94;
--line:#2a2a2c;
}
/* Tüm sayfalardaki sol/sağ boşluk tek kaynaktan gelir; başlıktaki logo ile
TEKLİF AL düğmesinin hizasıyla aynıdır. */
@media(max-width:760px){ :root { --gutter:20px; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; background:var(--black); color:var(--white); font-family:"Manrope",Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
::selection { background:var(--vurgu); color:white; }
.site-shell { min-height:100vh; }
.site-header { height:86px; position:absolute; top:0; left:0; width:100%; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); border-bottom:1px solid rgba(255,255,255,.12); }
.logo-link { display:flex; align-items:center; }
.brand { font-family:"Bebas Neue",Impact,sans-serif; font-size:2rem; line-height:1; letter-spacing:.06em; white-space:nowrap; font-style:normal; }
.brand span { color:var(--white); }
.brand i { color:var(--vurgu); font-style:normal; }
.brand-compact { font-size:1.25rem; }
.desktop-nav { display:flex; gap:clamp(18px,2.2vw,40px); font-size:.96rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.desktop-nav a { transition:color .2s; }
.desktop-nav a:hover { color:var(--vurgu); }
.header-actions { display:flex; align-items:center; gap:20px; }
.lang { font-size:.92rem; font-weight:700; letter-spacing:.15em; }
.header-cta { background:var(--vurgu); color:var(--vurgu-yazi); padding:14px 18px; font-size:.92rem; font-weight:700; letter-spacing:.11em; transition:background .2s; }
.header-cta:hover { background:var(--vurgu-koyu); }
.header-cta span { margin-left:12px; font-size:1rem; }
.menu-button { display:none; border:0; background:none; width:34px; padding:8px 0; }
.menu-button span { height:1px; display:block; background:white; margin:6px 0; }
.mobile-menu { position:fixed; inset:0; padding:35px 6vw; background:var(--vurgu); z-index:100; display:flex; flex-direction:column; transform:translateY(-102%); transition:transform .45s cubic-bezier(.7,0,.2,1); }
.mobile-menu.is-open { transform:none; }
.menu-close { position:absolute; right:6vw; top:23px; border:0; background:transparent; color:white; font-size:2.8rem; font-weight:200; }
.mobile-menu nav { margin:auto 0; display:flex; flex-direction:column; }
.mobile-menu nav a { font-family:"Bebas Neue"; font-size:clamp(2.9rem,11vw,5.5rem); line-height:1.05; border-bottom:1px solid rgba(255,255,255,.25); }
.mobile-menu nav em { font-family:"Manrope"; font-size:.65rem; margin-right:16px; font-style:normal; }
.mobile-menu-footer { display:flex; justify-content:space-between; font-size:.75rem; }
.hero { min-height:100vh; position:relative; padding:150px var(--gutter) 65px; display:grid; grid-template-columns:55% 45%; align-items:center; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(90deg,black,transparent 80%); }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-no { font-size:.67rem; letter-spacing:.18em; font-weight:700; }
.eyebrow { display:flex; align-items:center; gap:12px; }
.eyebrow>span { width:32px; height:2px; background:var(--vurgu); display:inline-block; }
.hero h1,.page-hero h1,.detail-hero h1,.case-hero h1 { font-family:"Bebas Neue",Impact,sans-serif; text-transform:uppercase; font-size:clamp(5.1rem,8.7vw,9.4rem); letter-spacing:-.025em; line-height:.79; font-weight:400; margin:32px 0; }
.hero h1 em,.page-hero h1 em { color:var(--vurgu); font-style:normal; }
.hero-bottom { display:flex; gap:30px; align-items:flex-end; margin-top:44px; max-width:800px; }
.hero-bottom>p { max-width:420px; color:#c2c2c2; line-height:1.65; font-size:.9rem; margin:0; }
.hero-buttons { display:flex; gap:10px; }
.button { appearance:none; border:1px solid #444; padding:17px 21px; display:inline-flex; align-items:center; justify-content:center; gap:20px; color:white; background:none; font-size:.7rem; font-weight:700; letter-spacing:.1em; transition:.2s; }
.button.primary { background:var(--vurgu); border-color:var(--vurgu); color:var(--vurgu-yazi); }
.button.primary:hover { background:var(--vurgu-koyu); border-color:var(--vurgu-koyu); transform:translateY(-2px); }
.button.ghost:hover { border-color:white; }
.hero-visual { position:relative; height:min(68vh,690px); align-self:end; z-index:1; }
.red-sun { position:absolute; right:-9vw; bottom:6%; width:min(41vw,650px); aspect-ratio:1; border-radius:50%; background:var(--vurgu); box-shadow:0 0 120px rgba(225,6,0,.2); }
.visual-card { position:absolute; background:rgba(15,15,15,.92); border:1px solid #555; box-shadow:0 28px 70px rgba(0,0,0,.35); backdrop-filter:blur(8px); }
.visual-card-a { top:22%; left:0; width:190px; padding:18px; transform:rotate(-5deg); }
.visual-card-a span,.visual-card-b>span { color:var(--gray); font-size:.6rem; letter-spacing:.17em; }
.visual-card-a b { display:block; font-family:"Bebas Neue"; font-size:3.8rem; margin-top:12px; line-height:1; }
.visual-card-a i { color:#78e29f; font-size:.65rem; font-style:normal; }
.visual-card-b { top:8%; right:4%; width:235px; height:170px; padding:18px; transform:rotate(4deg); }
.mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; }
.mini-grid i { height:45px; background:#c8a24a; }
.mini-grid i:nth-child(2),.mini-grid i:nth-child(3) { background:white; }
.mini-grid i:nth-child(4) { border:1px solid #666; background:#191919; }
.visual-card-c { bottom:11%; left:10%; width:290px; height:175px; padding:20px; transform:rotate(3deg); }
.wave { height:95px; margin-top:17px; background:repeating-linear-gradient(90deg,transparent 0 9px,var(--vurgu) 10px 12px); clip-path:polygon(0 60%,8% 40%,16% 62%,25% 15%,33% 75%,42% 45%,52% 61%,60% 20%,70% 65%,81% 36%,90% 53%,100% 9%,100% 80%,0 80%); }
.hero-stamp { position:absolute; right:5%; bottom:3%; width:118px; height:118px; border:1px solid rgba(255,255,255,.65); border-radius:50%; display:grid; place-items:center; text-align:center; font-family:"Bebas Neue"; letter-spacing:.12em; line-height:1.05; transform:rotate(9deg); }
.scroll-note { position:absolute; right:4vw; bottom:23px; font-size:.58rem; letter-spacing:.16em; z-index:2; }
.marquee { background:var(--vurgu); color:white; font-family:"Bebas Neue"; font-size:1.45rem; padding:13px 0 10px; white-space:nowrap; overflow:hidden; letter-spacing:.08em; transform:rotate(-1deg) scale(1.01); }
.marquee div { width:max-content; animation:marquee 22s linear infinite; }
@keyframes marquee { to { transform:translateX(-50%); } }
.section-light { background:var(--light); color:var(--black); }
.intro { padding:130px var(--gutter) 80px; display:grid; grid-template-columns:16% 1fr; }
.section-no { color:#666; margin:0; }
.intro h2,.section-head h2,.process>h2,.story h2,.team h2,.related-work h2,.next-project h2,.thank-you h2 { font-family:"Bebas Neue"; text-transform:uppercase; font-size:clamp(3.8rem,7.2vw,8.3rem); line-height:.86; font-weight:400; margin:0; letter-spacing:-.02em; }
.intro h2 em,.work-section h2 em { color:var(--vurgu); font-style:normal; }
.intro-copy { grid-column:2; margin:60px 0 90px; display:flex; justify-content:space-between; align-items:flex-end; }
.intro-copy p { max-width:550px; font-size:1.25rem; line-height:1.65; }
.text-link { border-bottom:2px solid var(--vurgu); padding:0 0 8px; font-size:.7rem; font-weight:700; letter-spacing:.1em; }
.text-link span { margin-left:24px; }
.stats { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:50px; }
.stats>div { padding:32px 28px 28px; background:#fff; border:1px solid #e6e6e6; border-radius:20px;
position:relative; overflow:hidden;
transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .35s; }
.stats>div::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--vurgu);
transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.stats>div:hover { transform:translateY(-5px); border-color:#dcdcdc; box-shadow:0 18px 40px rgba(0,0,0,.09); }
.stats>div:hover::after { transform:scaleX(1); }
.stats b { font-family:"Bebas Neue"; font-size:clamp(3rem,4vw,4.2rem); line-height:1; font-weight:400; color:var(--vurgu); }
.stats sup { color:var(--vurgu); font-size:2rem; }
.stats span { display:block; margin-top:12px; font-size:.75rem; color:#666; }
.services-section,.process,.team,.testimonials,.related-work { padding:120px var(--gutter); }
.section-head { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; margin-bottom:70px; }
.section-head h2 span,.related-work h2 span { color:var(--vurgu); }
.section-head>p { max-width:380px; color:var(--gray); line-height:1.7; }
/* Hizmetler artık çizgiyle ayrılan satırlar değil, aralıklı kartlar. */
.service-list { display:grid; gap:14px; margin-top:40px; }
.service-row { display:grid; grid-template-columns:70px 1fr 1fr 56px; align-items:center; gap:18px;
min-height:118px; padding:22px 28px; background:var(--surface); border:1px solid var(--line);
border-radius:20px; transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .4s; }
.service-row em { color:var(--vurgu); font-size:.7rem; font-style:normal; }
.service-row h3 { font-family:"Bebas Neue"; font-size:clamp(2.2rem,3.4vw,4rem); font-weight:400; margin:0; text-transform:uppercase; }
.service-row p { color:#888; font-size:.85rem; margin:0; max-width:350px; }
.service-row>span { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
border-radius:999px; border:1px solid var(--line); font-size:1.15rem;
transition:transform .35s,background .3s,border-color .3s,color .3s; }
.service-row:hover>span { transform:rotate(45deg); background:var(--vurgu); border-color:var(--vurgu); color:#fff; }
.work-section { padding:120px var(--gutter); }
.featured-grid,.portfolio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:80px 28px; }
.project-card { display:block; color:var(--black); }
.project-art { aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--accent); color:var(--black); padding:5%; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.project-card:hover .project-art { transform:scale(.985); }
.project-client { position:absolute; top:6%; left:6%; font-family:"Bebas Neue"; font-size:clamp(2rem,4vw,5rem); letter-spacing:0; line-height:.88; max-width:78%; z-index:2; }
.art-orbit { position:absolute; width:55%; aspect-ratio:1; border:2px solid currentColor; border-radius:50%; right:-7%; top:-5%; }
.art-orbit::after { content:""; position:absolute; width:48%; aspect-ratio:1; background:var(--black); border-radius:50%; left:26%; top:26%; }
.art-panel { position:absolute; width:55%; height:42%; background:rgba(255,255,255,.86); right:8%; bottom:9%; box-shadow:0 25px 55px rgba(0,0,0,.15); transform:rotate(-3deg); }
.art-line { position:absolute; width:35%; height:6px; background:var(--vurgu); bottom:26%; right:18%; transform:rotate(-3deg); }
.project-art>b { position:absolute; left:7%; bottom:17%; font-family:"Bebas Neue"; font-size:clamp(3rem,6vw,7rem); line-height:.8; z-index:3; }
.project-art>small { position:absolute; left:7%; bottom:8%; max-width:140px; font-weight:700; font-size:.62rem; z-index:3; }
.project-art-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.project-art-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}.project-art-image .project-client,.project-art-image>b,.project-art-image>small{color:white}.project-art-image .project-client,.project-art-image>b,.project-art-image>small{z-index:2}
.art-1 .art-panel { background:var(--black); }
.art-1 .art-orbit { border-radius:0; transform:rotate(45deg); }
.art-2 .art-panel { border-radius:50%; width:46%; height:60%; }
.art-3 .art-orbit { border:22px solid var(--black); right:18%; top:15%; }
.project-meta { display:grid; grid-template-columns:1fr auto; margin-top:20px; align-items:end; }
.project-meta span { grid-column:1/-1; font-size:.6rem; letter-spacing:.13em; color:#777; text-transform:uppercase; }
.project-meta h3 { font-family:"Bebas Neue"; font-size:2.2rem; font-weight:400; margin:10px 0 0; text-transform:uppercase; }
.project-meta p { margin:0; font-size:.74rem; font-weight:700; }
.card-1 { margin-top:140px; }
.card-2 { margin-top:-60px; }
.process { border-top:1px solid var(--line); }
.process>h2 { margin:40px 0 80px; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.process-grid>div { padding:38px 26px 0 0; border-right:1px solid var(--line); min-height:240px; }
.process-grid>div:not(:first-child) { padding-left:26px; }
.process-grid em { color:var(--vurgu); font-style:normal; font-size:.7rem; }
.process-grid h3 { font-family:"Bebas Neue"; font-size:2.1rem; font-weight:400; margin:45px 0 16px; }
.process-grid p { color:#888; line-height:1.6; font-size:.78rem; }
.clients { padding:100px var(--gutter) 120px; }
.logo-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid #ccc; border-left:1px solid #ccc; margin-top:50px; }
.logo-grid>div { aspect-ratio:1.8; display:flex; align-items:center; justify-content:center; gap:10px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; font-weight:800; letter-spacing:.12em; }
.reference-logo{max-width:75%;max-height:90px;object-fit:contain}
.logo-shape { display:inline-block; width:19px; height:19px; background:var(--vurgu); }
.shape-1 { border-radius:50%; }
.shape-2 { clip-path:polygon(50% 0,100% 100%,0 100%); }
.shape-3 { border-radius:50% 0 50% 50%; transform:rotate(45deg); }
.quote-block { margin:110px auto 0; max-width:900px; text-align:center; }
.quote-mark { color:var(--vurgu); font-family:serif; font-size:6rem; line-height:.4; }
.quote-block blockquote { font-size:clamp(1.7rem,3vw,3.2rem); line-height:1.3; margin:30px 0; }
.quote-block p { font-size:.75rem; font-weight:700; }
.quote-block p span { color:#777; font-weight:400; }
.site-footer { padding:100px var(--gutter) 25px; }
.lead-dock{position:fixed;right:18px;bottom:18px;z-index:45;display:flex;align-items:center;gap:8px;padding:8px;background:rgba(10,10,10,.92);border:1px solid #333;box-shadow:0 15px 45px rgba(0,0,0,.35);backdrop-filter:blur(12px)}.lead-dock>span{padding:0 10px;color:#aaa;font-size:.62rem}.lead-dock>a{padding:12px 15px;background:var(--vurgu);color:white;font-size:.62rem;font-weight:700;letter-spacing:.08em}.lead-dock .lead-whatsapp{background:#178a49}.lead-dock>a:hover{transform:translateY(-2px)}
.cookie-banner{position:fixed;left:18px;bottom:18px;z-index:90;width:min(460px,calc(100% - 36px));display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:#151515;color:white;border:1px solid #333;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.4)}.cookie-banner p{margin:0;font-size:.66rem;line-height:1.5;color:#bbb}.cookie-banner button{border:1px solid #444;background:transparent;color:white;padding:9px 12px;font-size:.6rem}.cookie-banner button:last-child{background:var(--vurgu);border-color:var(--vurgu)}
.footer-top { display:flex; align-items:flex-end; justify-content:space-between; padding-bottom:85px; border-bottom:1px solid var(--line); }
.footer-top h2 { font-family:"Bebas Neue"; font-size:clamp(5rem,10vw,11rem); line-height:.78; text-transform:uppercase; font-weight:400; margin:32px 0 0; }
.footer-top h2 span { color:var(--vurgu); }
.round-link { flex:0 0 auto; width:140px; height:140px; border-radius:50%; background:var(--vurgu); display:grid; place-items:center; font-size:2.5rem; transition:.25s; }
.round-link:hover { transform:rotate(45deg); background:var(--vurgu-koyu); }
.footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); padding:65px 0; }
/* Punto büyütüldü: eskiden bağlantılar 12px, başlıklar 9.92px idi ve
footer'daki telefon/adres okunmuyordu — üstelik ziyaretçinin arama
yapacağı yer orası. Yalnızca font-size değişti; renk, ağırlık ve
yerleşim olduğu gibi bırakıldı. */
.footer-grid>div { display:flex; flex-direction:column; gap:13px; font-size:.875rem; color:#888; }
.footer-grid b { color:white; font-size:.72rem; letter-spacing:.16em; margin-bottom:10px; }
.footer-grid a:hover { color:white; }
.footer-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:22px; color:#666; font-size:.58rem; letter-spacing:.1em; }
.reveal { opacity:0; transform:translateY(25px); transition:.75s; }
.reveal.visible { opacity:1; transform:none; }
/* Inner pages */
.page-hero { min-height:88vh; padding:180px var(--gutter) 80px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.page-hero::after { content:"";display:none; position:absolute; right:4vw; bottom:-17vw; color:#111; -webkit-text-stroke:1px #292929; font-family:"Bebas Neue"; font-size:55vw; line-height:.8; z-index:0; }
.page-hero>* { position:relative; z-index:1; }
.page-hero h1 { font-size:clamp(5.5rem,11vw,12rem); margin:42px 0; max-width:1200px; }
.page-intro { margin-left:auto; max-width:560px; color:#aaa; font-size:1.05rem; line-height:1.7; }
.hero-rule { height:1px; background:#333; width:100%; margin-top:60px; }
.story { padding:120px var(--gutter); display:grid; grid-template-columns:25% 1fr; }
.story>div { max-width:850px; }
.story p:not(.section-no) { font-size:1.1rem; line-height:1.8; max-width:700px; margin-top:40px; }
.mission { display:grid; grid-template-columns:1fr 1fr; }
.mission>div { padding:90px var(--gutter); min-height:420px; }
.mission>div:first-child { background:var(--vurgu); }
.mission>div:last-child { background:#1b1b1b; }
.mission .section-no { color:rgba(255,255,255,.65); }
.mission h3 { font-family:"Bebas Neue"; font-size:clamp(3rem,5vw,5.5rem); line-height:1; font-weight:400; text-transform:uppercase; margin-top:100px; }
.values,.why { padding:110px var(--gutter); }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:60px; border-top:1px solid #ccc; }
.value-grid>div { min-height:180px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:25px; }
.value-grid em { color:var(--vurgu); font-size:.7rem; font-style:normal; }
.value-grid h3 { font-family:"Bebas Neue"; font-size:2.6rem; font-weight:400; margin-top:65px; }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.team-grid article h3 { font-family:"Bebas Neue"; font-size:2rem; font-weight:400; margin:20px 0 3px; }
.team-grid article>b { color:var(--vurgu); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.team-grid article>p { color:#888; font-size:.76rem; line-height:1.6; }
.avatar { aspect-ratio:.82; display:grid; place-items:center; background:#222; font-family:"Bebas Neue"; font-size:7rem; color:#333; position:relative; overflow:hidden; }
.avatar::before { content:""; position:absolute; width:75%; aspect-ratio:1; border-radius:50%; background:var(--vurgu); bottom:-30%; opacity:.85; }
.avatar-photo::before{display:none}.avatar-photo img{width:100%;height:100%;object-fit:cover}
.avatar-1 { background:#e9e9e4; color:#c8c8c0; }
.avatar-2::before { border-radius:0; transform:rotate(45deg); }
.avatar-3 { background:#260a0a; }
.why-grid { display:grid; grid-template-columns:1fr 1fr; margin-top:60px; border-top:1px solid #ccc; }
.why-grid>div { display:grid; grid-template-columns:45px 1fr 40px; align-items:center; min-height:100px; border-bottom:1px solid #ccc; }
.why-grid>div:nth-child(odd) { border-right:1px solid #ccc; padding-right:25px; }
.why-grid>div:nth-child(even) { padding-left:25px; }
.why-grid span { color:var(--vurgu); }
.why-grid h3 { font-size:1rem; }
.why-grid em { color:#aaa; font-size:.65rem; font-style:normal; }
.services-page { padding:80px var(--gutter) 130px; }
.service-block { position:relative; display:grid; grid-template-columns:120px 1fr 1fr 50px; gap:30px; align-items:center; padding:60px 0; border-bottom:1px solid #ccc; }
.service-block>div:first-child { display:flex; flex-direction:column; gap:32px; }
.service-block>div:first-child em { color:var(--vurgu); font-family:"Bebas Neue"; font-size:2.5rem; font-style:normal; }
.service-block>div:first-child span { font-size:.55rem; color:#999; }
.service-block h2 { font-family:"Bebas Neue"; font-size:clamp(3rem,5vw,5.5rem); font-weight:400; text-transform:uppercase; margin:0; }
.service-block>p { line-height:1.7; color:#555; font-size:.9rem; }
.service-tags { grid-column:2/4; display:flex; gap:7px; flex-wrap:wrap; }
.service-tags span,.tool-section span { border:1px solid #ccc; border-radius:20px; padding:8px 13px; font-size:.63rem; }
.service-block>span { font-size:2rem; }
.detail-hero { min-height:85vh; padding:200px var(--gutter) 90px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; }
.detail-hero h1 { font-size:clamp(6rem,13vw,14rem); margin:40px 0 20px; }
.detail-hero h1 span { color:var(--vurgu); }
.detail-hero>p:not(.eyebrow) { max-width:600px; color:#aaa; line-height:1.7; font-size:1.05rem; margin-bottom:40px; }
.detail-split { padding:110px var(--gutter); display:grid; grid-template-columns:30% 1fr; }
/* Kapsam maddeleri üçerli kart ızgarası. Madde sayısı 20'ye çıkabildiği için
tek sütunda alt alta dizmek sayfayı gereksiz uzatıyordu. Kartlar sitenin
geri kalanıyla aynı dilde: beyaz zemin, ince kenar, yuvarlak köşe. */
.scope-list { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; border:0; margin-top:20px; }
.scope-list>div { display:flex; flex-direction:column; align-items:flex-start; gap:16px; min-height:132px;
padding:28px 28px 26px; background:#fff; border:1px solid #e6e6e6; border-radius:20px; position:relative; overflow:hidden;
transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .35s; }
/* Hover'da karttan kırmızı bir zemin yükselir; numara rozeti dolar. */
.scope-list>div::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
background:var(--vurgu); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.scope-list>div:hover { transform:translateY(-5px); border-color:#dcdcdc; box-shadow:0 18px 40px rgba(0,0,0,.09); }
.scope-list>div:hover::after { transform:scaleX(1); }
/* Numara kendi rozetinde; hover'da kırmızıya dolar. */
.scope-list em { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:28px;
border-radius:999px; background:var(--light); color:var(--vurgu); font-style:normal; font-size:.62rem;
font-weight:700; letter-spacing:.12em; transition:background .3s ease,color .3s ease; }
.scope-list>div:hover em { background:var(--vurgu); color:#fff; }
.scope-list h3 { font-size:1rem; line-height:1.45; margin:0; font-weight:600; }
.tool-section { padding:95px var(--gutter); }
.tool-section>div { display:flex; flex-wrap:wrap; gap:13px; margin-top:45px; }
.tool-section span { border-color:#444; color:#bbb; padding:14px 22px; }
.faq { padding:100px var(--gutter); }
/* Her soru kendi kartında; site genelindeki yuvarlak kart diliyle aynı. */
.faq details { background:#fff; border:1px solid #e6e6e6; border-radius:20px; margin-top:14px; overflow:hidden;
transition:border-color .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1); }
.faq details:hover { border-color:#dcdcdc; box-shadow:0 14px 34px rgba(0,0,0,.07); transform:translateY(-2px); }
.faq details[open] { border-color:#dcdcdc; box-shadow:0 16px 38px rgba(0,0,0,.08); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; list-style:none;
padding:26px 28px; font-size:1.05rem; font-weight:700; }
.faq summary span { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
width:34px; height:34px; border-radius:999px; background:var(--light); color:var(--vurgu);
font-size:1.35rem; font-weight:400; line-height:1; transition:background .3s,color .3s,transform .3s; }
.faq details[open] summary span { background:var(--vurgu); color:#fff; }
.faq details p { max-width:760px; line-height:1.75; color:#555; padding:0 28px 28px; margin:0; }
.related-work h2 { margin-bottom:60px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:60px; }
.filters button { border:1px solid #ccc; background:transparent; padding:11px 18px; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.filters button.active,.filters button:hover { background:var(--vurgu); border-color:var(--vurgu); color:white; }
.portfolio { padding:80px var(--gutter) 130px; }
.portfolio-grid { gap:70px 28px; }
.case-hero { min-height:70vh; padding:190px var(--gutter) 70px; display:flex; flex-direction:column; justify-content:flex-end; }
.case-hero h1 { font-size:clamp(5.5rem,12vw,13rem); margin:40px 0 15px; }
.case-hero>p:not(.eyebrow) { color:var(--vurgu); font-weight:700; letter-spacing:.15em; }
.case-art { padding:0 var(--gutter) 80px; }
.case-art .project-art { height:72vh; aspect-ratio:auto; }
.case-summary { padding:110px var(--gutter); display:grid; grid-template-columns:25% 1fr; }
.case-summary h2 { font-size:clamp(1.7rem,3.6vw,4.15rem); line-height:1.28; margin:0; }
/* 4 madde (web sitesi girilmemişse) ya da 5 madde tek satıra sığsın. */
.case-summary>div { grid-column:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:24px 18px; border-top:1px solid #ccc; margin-top:70px; padding-top:30px; }
.case-summary span { display:flex; flex-direction:column; gap:12px; font-size:.8rem; }
.case-summary b { font-size:.6rem; color:#888; text-transform:uppercase; letter-spacing:.12em; }
.case-challenge { padding:120px var(--gutter); display:grid; grid-template-columns:1fr 1fr; gap:10vw; }
.case-challenge h3 { font-family:"Bebas Neue"; font-size:3.5rem; font-weight:400; line-height:1.05; }
.case-challenge p:last-child { color:#aaa; line-height:1.8; }
.case-gallery { padding:40px var(--gutter) 120px; }
.case-gallery-head { display:flex; justify-content:space-between; align-items:center; padding:0 var(--gutter) 35px; }
.case-gallery-head>span { font-size:.58rem; letter-spacing:.15em; color:#777; }
.case-gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.case-gallery-grid figure { margin:0; min-height:420px; background:#e7e7e3; overflow:hidden; }
.case-gallery-grid figure:nth-child(3n) { grid-column:1/-1; min-height:70vh; }
.case-gallery-grid img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.case-gallery-grid figure:hover img { transform:scale(1.025); }
.results { padding:110px var(--gutter); display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; }
.results>.section-no { grid-column:1/-1; margin-bottom:30px; }
.results>div { border-top:1px solid #ccc; padding-top:35px; }
.results b { font-family:"Bebas Neue"; font-size:clamp(3.2rem,4.6vw,5.2rem); font-weight:400; line-height:1; display:block; }
.results span { display:block; color:#666; font-size:.8rem; }
.next-project { display:grid; grid-template-columns:1fr auto; padding:90px var(--gutter); align-items:end; background:var(--vurgu); }
.next-project>span { grid-column:1/-1; font-size:.6rem; letter-spacing:.16em; }
.next-project h2 { margin-top:40px; }
.next-project>span:last-child { font-size:3rem; }
.reference-page { padding:80px var(--gutter) 130px; }
.reference-cards { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid #ccc; border-top:1px solid #ccc; }
.reference-cards article { min-height:290px; padding:30px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; display:flex; flex-direction:column; }
.reference-cards article>div { display:flex; align-items:center; gap:12px; font-size:1.2rem; letter-spacing:.12em; }
.reference-cards article>p { margin-top:auto; margin-bottom:6px; color:#777; font-size:.75rem; }
.reference-cards article>span { font-size:.68rem; }
.reference-cards article>a { margin-top:30px; font-size:.6rem; font-weight:700; letter-spacing:.1em; }
.testimonial-grid { display:grid; grid-template-columns:repeat(2,1fr); margin-top:60px; border-top:1px solid var(--line); }
.testimonial-grid article { min-height:330px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:35px; }
.testimonial-grid article>span { font-size:4rem; color:var(--vurgu); font-family:serif; }
.testimonial-grid blockquote { font-size:1.25rem; line-height:1.55; margin:25px 0 55px; }
.testimonial-grid p { font-size:.75rem; font-weight:700; }
.testimonial-grid small { display:block; color:#777; margin-top:5px; font-weight:400; }
.contact-layout { padding:110px var(--gutter); display:grid; grid-template-columns:30% 1fr; gap:7vw; }
.contact-layout aside { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.contact-layout aside>a { font-family:"Bebas Neue"; font-size:1.7rem; }
.contact-layout aside>div { margin-top:35px; }
.contact-layout aside b { font-size:.62rem; letter-spacing:.15em; }
.contact-layout aside p { line-height:1.7; color:#666; font-size:.8rem; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:30px 25px; }
.field { display:flex; flex-direction:column; gap:9px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.field label small { color:#999; font-weight:400; }
.field input,.field select,.field textarea { background:transparent; color:var(--black); border:0; border-bottom:1px solid #aaa; border-radius:0; padding:14px 0; outline:none; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--vurgu); }
.field input[type=file] { font-size:.75rem; }
.consent { grid-column:1/-1; display:flex; gap:12px; align-items:flex-start; color:#666; font-size:.7rem; line-height:1.6; }
.consent input { accent-color:var(--vurgu); margin-top:3px; }
.submit { justify-self:start; min-width:210px; }
.honeypot { position:absolute!important; left:-9999px!important; }
.form-error { grid-column:1/-1; color:var(--vurgu); font-size:.75rem; }
.thank-you { align-self:center; }
.thank-you>span { width:70px; height:70px; border-radius:50%; background:var(--vurgu); color:white; display:grid; place-items:center; font-size:2rem; }
.thank-you h2 { margin:35px 0 20px; font-size:4.5rem; }
.thank-you p { max-width:550px; line-height:1.7; color:#666; margin-bottom:30px; }
.map-block { min-height:430px; position:relative; overflow:hidden; display:grid; place-items:center; background:linear-gradient(30deg,#151515 12%,transparent 12.5%,transparent 87%,#151515 87.5%),linear-gradient(150deg,#151515 12%,transparent 12.5%,transparent 87%,#151515 87.5%),linear-gradient(30deg,#151515 12%,transparent 12.5%,transparent 87%,#151515 87.5%); background-size:80px 140px; }
.map-block>span { position:absolute; left:var(--gutter); top:35px; color:#777; font-size:.65rem; }
.map-block>b { color:#222; font-family:"Bebas Neue"; font-size:15vw; letter-spacing:.15em; }
.map-pin { position:absolute; width:75px; height:75px; background:var(--vurgu); border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:grid; place-items:center; font-family:"Bebas Neue"; font-size:2.5rem; }
.map-pin::first-letter { transform:rotate(45deg); }
@media (max-width:1050px) {
.desktop-nav,.header-cta { display:none; }
.menu-button { display:block; }
.hero { grid-template-columns:1fr; padding-top:140px; }
.hero-copy { z-index:3; }
.hero-visual { position:absolute; inset:15% -15% 0 45%; opacity:.72; height:auto; }
.hero h1 { font-size:clamp(4.8rem,12vw,8rem); }
.intro { grid-template-columns:1fr; }
.intro>*,.intro-copy,.stats { grid-column:1; }
.intro h2 { margin-top:50px; }
.service-block { grid-template-columns:90px 1fr 40px; }
.service-block>p { grid-column:2; }
.service-tags { grid-column:2; }
.reference-cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
.site-header { height:70px; padding:0 var(--gutter); }
.brand { font-size:1.65rem; }
.header-actions { gap:14px; }
.hero { min-height:850px; padding:125px 20px 60px; display:block; }
.hero h1 { font-size:clamp(4.5rem,21vw,7rem); margin:25px 0; }
.hero-bottom { display:block; margin-top:38px; }
.hero-buttons { margin-top:25px; flex-wrap:wrap; }
.hero-visual { inset:50% -50% 0 20%; opacity:.7; }
.visual-card-a { left:0; width:145px; }
.visual-card-b { display:none; }
.visual-card-c { width:220px; height:140px; }
.hero-stamp { right:18%; }
.scroll-note { display:none; }
.marquee { font-size:1rem; }
.intro,.services-section,.work-section,.process,.clients,.team,.testimonials,.related-work,.story,.values,.why,.services-page,.detail-split,.tool-section,.faq,.portfolio,.reference-page,.contact-layout,.case-summary,.case-challenge,.results { padding:80px var(--gutter); }
.intro h2,.section-head h2,.process>h2,.story h2,.team h2 { font-size:3.9rem; }
.intro-copy { display:block; margin:40px 0 65px; }
.intro-copy p { font-size:1rem; margin-bottom:35px; }
.stats { grid-template-columns:1fr 1fr; }
.stats>div { padding:25px 15px!important; border-bottom:1px solid #ccc; }
.stats b { font-size:3.3rem; }
.section-head { display:block; margin-bottom:40px; }
.section-head>p,.section-head>.text-link { display:block; margin-top:30px; }
.service-row { grid-template-columns:40px 1fr 30px; min-height:100px; }
.service-row p { display:none; }
.service-row h3 { font-size:2rem; }
.featured-grid,.portfolio-grid { grid-template-columns:1fr; gap:50px; }
.card-1,.card-2 { margin-top:0; }
.process-grid { grid-template-columns:1fr; }
.process-grid>div { min-height:auto; border-right:0; padding:25px 0!important; }
.process-grid h3 { margin:18px 0 8px; }
.logo-grid { grid-template-columns:repeat(2,1fr); }
.logo-grid>div { aspect-ratio:1.5; font-size:.72rem; }
.quote-block { margin-top:80px; }
.footer-top { padding-bottom:60px; }
.footer-top h2 { font-size:5rem; }
.round-link { width:80px; height:80px; }
.footer-grid { grid-template-columns:1fr 1fr; gap:50px 20px; }
.footer-grid>.brand { grid-column:1/-1; }
.footer-bottom { flex-wrap:wrap; gap:12px; }
.page-hero { min-height:75vh; padding:140px 20px 60px; }
.page-hero h1 { font-size:4.7rem; }
.page-intro { font-size:.9rem; }
.story { grid-template-columns:1fr; }
.story>div { margin-top:40px; }
.mission { grid-template-columns:1fr; }
.mission>div { padding:70px var(--gutter); min-height:330px; }
.mission h3 { margin-top:70px; }
.value-grid { grid-template-columns:1fr 1fr; }
.team-grid { grid-template-columns:1fr 1fr; }
.why-grid { grid-template-columns:1fr; }
.why-grid>div { border-right:0!important; padding:0!important; }
.service-block { grid-template-columns:55px 1fr 25px; gap:15px; padding:40px 0; }
.service-block h2 { font-size:2.9rem; }
.service-block>p { grid-column:2/4; }
.service-tags { grid-column:2/4; }
.detail-hero { min-height:80vh; padding:150px 20px 70px; }
.detail-hero h1 { font-size:5.8rem; }
.detail-split { grid-template-columns:1fr; }
.scope-list { margin-top:30px; grid-template-columns:1fr; gap:12px; }
.scope-list>div { flex-direction:row; align-items:center; gap:16px; padding:18px 20px; min-height:0; border-radius:16px; }
.reference-cards { grid-template-columns:1fr; }
.testimonial-grid { grid-template-columns:1fr; }
.contact-layout { grid-template-columns:1fr; }
.contact-form { grid-template-columns:1fr; margin-top:45px; }
.field,.field.full { grid-column:1; }
.case-hero { padding:150px var(--gutter) 60px; }
.case-hero h1 { font-size:5.5rem; }
.case-art { padding:0 0 50px; }
.case-art .project-art { height:55vh; }
.case-summary { grid-template-columns:1fr; }
.case-summary h2,.case-summary>div { grid-column:1; margin-top:35px; }
.case-summary>div { grid-template-columns:1fr 1fr; gap:30px; }
.case-challenge { grid-template-columns:1fr; }
.case-gallery { padding:20px 0 80px; }
.case-gallery-head { padding:0 var(--gutter) 25px; }
.case-gallery-grid { grid-template-columns:1fr; gap:8px; }
.case-gallery-grid figure,.case-gallery-grid figure:nth-child(3n) { grid-column:auto; min-height:58vh; }
.results { grid-template-columns:1fr; }
.next-project { padding:70px var(--gutter); }
}
@media (prefers-reduced-motion:reduce) {
* { scroll-behavior:auto!important; animation:none!important; transition-duration:.001ms!important; }
.reveal { opacity:1; transform:none; }
}
/* Management panel */
.admin-shell { min-height:100vh; display:grid; grid-template-columns:260px 1fr; background:#f3f3f1; color:#111; }
.admin-sidebar { position:sticky; top:0; height:100vh; background:#0c0c0c; color:white; padding:28px 18px; display:flex; flex-direction:column; }
.admin-brand { font-family:"Bebas Neue"; font-size:1.8rem; letter-spacing:.05em; padding:0 10px 28px; border-bottom:1px solid #2a2a2a; }
.admin-brand i { color:var(--vurgu); font-style:normal; }.admin-brand small { display:block; color:#777; font-family:"Manrope"; font-size:.5rem; letter-spacing:.2em; margin-top:6px; }
.admin-sidebar nav { display:flex; flex-direction:column; margin-top:20px; overflow:auto; }
.admin-sidebar nav button,.admin-sidebar nav>a { border:0; background:transparent; color:#888; padding:11px 10px; text-align:left; font-size:.72rem; display:flex; gap:11px; align-items:center; }
.admin-sidebar nav button span,.admin-sidebar nav>a span { font-size:.52rem; color:#555; }.admin-sidebar nav button em,.admin-sidebar nav>a em { margin-left:auto; background:var(--vurgu); color:white; border-radius:12px; padding:2px 7px; font-style:normal; }
.admin-sidebar nav button.active,.admin-sidebar nav button:hover,.admin-sidebar nav>a.active,.admin-sidebar nav>a:hover { background:#191919; color:white; }
.admin-sidebar>a { margin-top:auto; padding:15px 10px 0; border-top:1px solid #292929; color:#888; font-size:.68rem; }
.admin-main { padding:35px 3vw 80px; min-width:0; }
.admin-main>header { display:flex; justify-content:space-between; align-items:center; padding-bottom:30px; border-bottom:1px solid #d3d3d0; }
.admin-main>header p,.admin-card-head p { font-size:.55rem; color:#888; letter-spacing:.13em; margin:0 0 8px; }.admin-main>header h1 { font-family:"Bebas Neue"; font-size:2.7rem; font-weight:400; margin:0; }
.admin-user { display:flex; gap:12px; align-items:center; }.admin-user>span { width:40px;height:40px;border-radius:50%;background:var(--vurgu);color:white;display:grid;place-items:center;font-size:.7rem;font-weight:700;}.admin-user div{display:flex;flex-direction:column;font-size:.67rem}.admin-user small{color:#888}.admin-user>a{font-size:.6rem;margin-left:12px;color:#777}
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:28px 0; }.metric-grid article { background:white; padding:24px; border:1px solid #e1e1de; }.metric-grid article>span{font-size:.67rem;color:#777}.metric-grid b{font-family:"Bebas Neue";font-size:3.7rem;font-weight:400;display:block;margin:18px 0 3px}.metric-grid small{font-size:.58rem;color:#6d8f6e}
.admin-columns { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }.admin-card { background:white; border:1px solid #e1e1de; margin-top:28px; padding:24px; }.admin-columns>.admin-card{margin-top:0}
.admin-card-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; border-bottom:1px solid #e5e5e2; }.admin-card-head h2{font-size:1.05rem;margin:0}.admin-card-head button,.editor-actions button,.admin-table-row button,.language-row button{border:1px solid #ddd;background:white;padding:9px 13px;font-size:.6rem}.admin-primary{background:var(--vurgu)!important;color:white!important;border-color:var(--vurgu)!important}
.request-row { display:flex; gap:12px; align-items:center; padding:16px 0; border-bottom:1px solid #eee; }.request-row>span{width:36px;height:36px;background:#eee;display:grid;place-items:center;font-size:.6rem;font-weight:700}.request-row>div{display:flex;flex-direction:column}.request-row b{font-size:.7rem}.request-row small{font-size:.58rem;color:#888;margin-top:3px}.status{margin-left:auto;font-size:.55rem;font-style:normal;background:#fff1da;color:#a36800;padding:5px 8px;border-radius:12px}
.content-status{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.content-status div{background:#f5f5f3;padding:18px}.content-status span{font-size:.6rem;color:#777}.content-status b{display:block;font-family:"Bebas Neue";font-size:2.5rem;margin-top:14px}
.editor-card{max-width:900px}.editor-card>label{display:flex;flex-direction:column;gap:8px;font-size:.65rem;font-weight:700;margin-top:25px}.editor-card textarea{border:1px solid #ddd;background:#fafafa;padding:16px;font-size:1rem;resize:vertical}.editor-actions{display:flex;gap:10px;margin-top:25px}.published{color:#579561;font-size:.58rem}
.admin-table-row{display:grid;grid-template-columns:30px 46px 1fr 100px 75px;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #eee}.drag{color:#aaa}.thumb{height:42px;background:#111;color:white;display:grid;place-items:center;font-family:"Bebas Neue"}.admin-table-row>div:nth-child(3){display:flex;flex-direction:column}.admin-table-row b{font-size:.7rem}.admin-table-row small{font-size:.55rem;color:#999}
.contact-admin-row{display:grid;grid-template-columns:1fr 180px;gap:20px;padding:20px 0;border-bottom:1px solid #eee}.contact-admin-row>div{display:flex;flex-direction:column}.contact-admin-row b{font-size:.8rem}.contact-admin-row small{color:#888;font-size:.6rem;margin-top:4px}.contact-admin-row p{font-size:.7rem;line-height:1.5;max-width:700px}.contact-admin-row select{border:1px solid #ddd;padding:9px;height:38px}
.language-row{display:grid;grid-template-columns:50px 1fr 100px 2fr 70px;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid #eee;font-size:.7rem}.language-row>b{background:#111;color:white;width:36px;height:36px;display:grid;place-items:center}.language-row em{font-style:normal;color:#666}.language-row>div{height:5px;background:#eee;position:relative}.language-row i{position:absolute;height:100%;background:var(--vurgu)}.language-row small{display:block;margin-top:10px;color:#999;font-size:.55rem}
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.module-grid button{border:1px solid #e3e3e0;background:#f8f8f6;padding:22px;text-align:left;display:grid;grid-template-columns:40px 1fr auto;align-items:center}.module-grid button>span{color:var(--vurgu);font-size:.6rem}.module-grid button>b{font-size:.75rem}.module-grid button>small{font-size:.55rem;color:#888}
.admin-empty,.admin-loading{padding:50px;text-align:center;color:#888;font-size:.75rem}.admin-notice{position:fixed;right:30px;top:25px;background:#111;color:white;padding:15px 20px;font-size:.68rem;z-index:10}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.admin-sidebar{position:relative;height:auto}.admin-sidebar nav{display:grid;grid-template-columns:1fr 1fr}.admin-main{padding:25px 15px}.metric-grid{grid-template-columns:1fr 1fr}.admin-columns{grid-template-columns:1fr}.admin-user div,.admin-user>a{display:none}.admin-table-row{grid-template-columns:25px 42px 1fr 65px}.admin-table-row>.published{display:none}.language-row{grid-template-columns:45px 1fr 70px}.language-row>div{display:none}.contact-admin-row{grid-template-columns:1fr}.module-grid{grid-template-columns:1fr}}
.admin-login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#0a0a0a;color:white}
.admin-login>section{padding:7vw;display:flex;flex-direction:column;justify-content:center;max-width:740px;width:100%}
.admin-login-brand{font-family:"Bebas Neue";font-size:2.3rem;letter-spacing:.06em;margin-bottom:80px}.admin-login-brand i,.admin-login h1 span{color:var(--vurgu);font-style:normal}.admin-login-brand small{display:block;font-family:"Manrope";font-size:.5rem;color:#777;letter-spacing:.22em;margin-top:7px}
.admin-login>section>p{font-size:.58rem;letter-spacing:.18em;color:#888}.admin-login h1{font-family:"Bebas Neue";font-size:clamp(4.5rem,8vw,8rem);font-weight:400;line-height:.82;text-transform:uppercase;margin:25px 0 45px}
.admin-login form{display:flex;flex-direction:column;gap:22px}.admin-login label{display:flex;flex-direction:column;gap:8px;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:#999}.admin-login input{background:#141414;border:1px solid #333;color:white;padding:16px;outline:none}.admin-login input:focus{border-color:var(--vurgu)}.admin-login form button{background:var(--vurgu);color:white;border:0;padding:17px;font-size:.68rem;font-weight:700;letter-spacing:.1em}.admin-login form button:disabled{opacity:.6}.admin-login>section>a{margin-top:30px;color:#777;font-size:.65rem}.login-error{color:#ff706b;font-size:.68rem}
.admin-login>aside{position:relative;overflow:hidden;background:#111;display:grid;place-items:center}.admin-login>aside>div{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:var(--vurgu);box-shadow:0 0 100px rgba(225,6,0,.25)}.admin-login>aside>b{font-family:"Bebas Neue";font-size:36vw;line-height:1;color:#0a0a0a;position:relative}.admin-login>aside>span{position:absolute;bottom:45px;font-size:.55rem;letter-spacing:.2em}
@media(max-width:760px){
.admin-login{grid-template-columns:1fr}.admin-login>section{padding:45px 24px}.admin-login-brand{margin-bottom:55px}.admin-login>aside{display:none}}
.form-message{grid-column:1/-1;margin:0;min-height:1.2em}.contact-form[hidden],.thank-you[hidden],[hidden]{display:none!important}
.admin-action,.editor-actions a{border:1px solid #ddd;background:white;padding:9px 13px;font-size:.6rem;color:#111}
.editor-card form>label{display:flex;flex-direction:column;gap:8px;font-size:.65rem;font-weight:700;margin-top:25px}
.editor-card form textarea{border:1px solid #ddd;background:#fafafa;padding:16px;font-size:1rem;resize:vertical}
.admin-help{font-size:.62rem;color:#888}.contact-admin-row form select{border:1px solid #ddd;padding:9px;width:100%}
.setup-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:#0a0a0a}.setup-card{width:min(620px,100%);background:#141414;border:1px solid #333;padding:clamp(28px,6vw,70px);color:white}.setup-card h1{font-family:"Bebas Neue";font-size:clamp(3rem,7vw,5.5rem);font-weight:400;line-height:.9}.setup-card>p{color:#aaa;line-height:1.7}.setup-card form{display:grid;gap:18px}.setup-card label{display:grid;gap:8px;font-size:.65rem;color:#aaa}.setup-card input{background:#0d0d0d;color:white;border:1px solid #333;padding:15px}.setup-card .admin-login-brand{margin-bottom:45px}
.admin-notice-error{background:#9e1612}.cms-editor{max-width:1050px}.cms-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}.cms-form-grid label{display:flex;flex-direction:column;gap:8px;font-size:.65rem;font-weight:700}.cms-form-grid label.full{grid-column:1/-1}.cms-form-grid input,.cms-form-grid textarea{border:1px solid #ddd;background:#fafafa;padding:13px;color:#111}.cms-form-grid textarea{resize:vertical;line-height:1.55}.cms-check{align-self:end;flex-direction:row!important;align-items:center;padding:13px 0}.cms-check input{width:auto}.cms-image-preview{width:180px;height:120px;object-fit:cover;border:1px solid #ddd;margin-top:8px}.cms-list{margin-top:8px}.cms-list-row{display:grid;grid-template-columns:52px 1fr 75px 68px 44px;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid #eee}.cms-list-row>img,.cms-order{width:46px;height:46px;object-fit:cover;background:#111;color:white;display:grid;place-items:center;font-family:"Bebas Neue";font-size:1.2rem}.cms-list-row>div{display:flex;flex-direction:column;gap:4px}.cms-list-row b{font-size:.75rem}.cms-list-row small{font-size:.58rem;color:#888}.cms-list-row>a{font-size:.62rem}.cms-list-row form{margin:0}.cms-list-row button.danger{border:0;background:transparent;color:#b5201b;font-size:.62rem}.reference-cards .reference-logo{max-width:160px;max-height:70px}
.lead-source{font-size:.58rem;color:#8a6513;background:#fff6d8;padding:6px 8px;margin-top:9px;width:max-content}
@media(max-width:760px){.lead-dock{left:10px;right:10px;bottom:10px;justify-content:stretch}.lead-dock>span{display:none}.lead-dock>a{flex:1;text-align:center}.cookie-banner{bottom:70px;grid-template-columns:1fr 1fr}.cookie-banner p{grid-column:1/-1}.cms-form-grid{grid-template-columns:1fr}.cms-form-grid label.full,.cms-form-grid>.full{grid-column:auto}.cms-list-row{grid-template-columns:46px 1fr 58px}.cms-list-row form{grid-column:2}.admin-sidebar nav{grid-template-columns:1fr 1fr}}
/* Cinematic one-page experience */
.site-shell h1,.site-shell h2,.site-shell h3{line-height:.95}
.section-head .section-no{margin-bottom:24px}
.scroll-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none}
.scroll-progress i{display:block;width:100%;height:100%;background:var(--vurgu);transform:scaleX(0);transform-origin:left center;will-change:transform}
.home-page .site-header{position:fixed;transition:height .35s ease,background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
.home-page .site-header.is-scrolled{height:70px;background:rgba(7,7,7,.96);border-color:rgba(255,255,255,.09)}
.home-page section[id],.home-page footer[id]{scroll-margin-top:68px}
.home-page .hero{isolation:isolate}
.home-page .hero::after{content:"";display:none;position:absolute;left:3.5vw;bottom:-.09em;z-index:-1;font-family:"Bebas Neue",Impact,sans-serif;font-size:22vw;line-height:.75;letter-spacing:-.035em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.045);white-space:nowrap;pointer-events:none}
.hero-ambient{position:absolute;width:42vw;aspect-ratio:1;right:4vw;top:18%;border-radius:50%;background:radial-gradient(circle,rgba(225,6,0,.17),rgba(225,6,0,0) 69%);filter:blur(24px);animation:ambientPulse 5s ease-in-out infinite alternate;pointer-events:none}
.hero-coordinate{position:absolute;z-index:4;color:rgba(255,255,255,.42);font-size:.53rem;letter-spacing:.18em;text-transform:uppercase}
.hero-coordinate-top{right:4vw;top:112px}
.hero-coordinate-side{left:18px;top:53%;writing-mode:vertical-rl;transform:rotate(180deg)}
.home-page .hero-copy .eyebrow{opacity:0;animation:heroFade .7s .1s ease forwards}
.home-page .hero-line{display:block;overflow:hidden;opacity:0;transform:translateY(105%);animation:heroLine .9s var(--line-delay,180ms) cubic-bezier(.2,.75,.2,1) forwards}
.home-page .hero-line em{display:inline-block}
.home-page .hero-bottom{opacity:0;transform:translateY(22px);animation:heroFade .8s .58s ease forwards}
.home-page .hero-visual{opacity:0;transform:translate(var(--scene-x,0),var(--scene-y,0)) scale(.94);animation:heroVisual 1.1s .35s cubic-bezier(.2,.75,.2,1) forwards;will-change:transform}
.home-page .red-sun{overflow:hidden;animation:sunBreath 7s ease-in-out infinite alternate}
.home-page .red-sun::before{content:"";position:absolute;inset:-20%;background:repeating-radial-gradient(ellipse at 20% 40%,transparent 0 7px,rgba(255,255,255,.055) 8px 9px);transform:rotate(-18deg)}
.home-page .visual-card{transform:translate(var(--parallax-x,0),var(--parallax-y,0)) rotate(var(--card-rotate,0));transition:transform .25s ease-out;will-change:transform}
.home-page .visual-card-a{--card-rotate:-5deg;animation:cardFloatA 5.5s ease-in-out infinite}
.home-page .visual-card-b{--card-rotate:4deg;animation:cardFloatB 6.5s ease-in-out infinite}
.home-page .visual-card-c{--card-rotate:3deg;animation:cardFloatC 6s ease-in-out infinite}
.home-page .hero-stamp{animation:stampSpin 24s linear infinite}
.home-page .scroll-note{display:flex;align-items:center;gap:12px}
.home-page .scroll-note::before{content:"";display:block;width:36px;height:1px;background:#fff;animation:scrollLine 1.4s ease-in-out infinite;transform-origin:left}
.home-page [data-reveal-section]{opacity:0;transform:translateY(90px) scale(.985);transition:opacity .85s ease,transform 1.05s cubic-bezier(.2,.7,.2,1)}
.home-page [data-reveal-section].visible{opacity:1;transform:none}
.home-page .service-row{position:relative;isolation:isolate;overflow:hidden;border-radius:20px}
.home-page .service-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vurgu);transform:scaleY(0);transform-origin:bottom;transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.home-page .service-row:hover{color:white;transform:translateY(-4px);border-color:var(--vurgu);box-shadow:0 18px 40px rgba(225,6,0,.18)}
.home-page .service-row:hover::before{transform:scaleY(1)}
.home-page .service-row:hover em,.home-page .service-row:hover p{color:white}
.home-page .project-card{position:relative}
.home-page .project-index{position:absolute;right:16px;top:16px;z-index:5;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.58);border-radius:50%;color:white;font-size:.57rem;letter-spacing:.12em;mix-blend-mode:difference;transition:transform .35s ease,background .35s ease}
.home-page .project-card:hover .project-index{transform:rotate(45deg);background:white;color:black}
.home-page .project-art::before{content:"";position:absolute;inset:-25%;z-index:4;background:linear-gradient(105deg,transparent 37%,rgba(255,255,255,.24) 50%,transparent 63%);transform:translateX(-75%) rotate(5deg);transition:transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.home-page .project-card:hover .project-art::before{transform:translateX(75%) rotate(5deg)}
.home-page .project-card:hover .project-art{transform:scale(.98)}
.home-page .project-meta h3{transition:color .25s ease,transform .25s ease}
.home-page .project-card:hover .project-meta h3{color:var(--vurgu);transform:translateX(7px)}
.home-page .process-grid>div{transition:background .3s ease,padding .3s ease}
.home-page .process-grid>div:hover{background:#151515;padding-left:26px}
.home-page .logo-grid>div{transition:background .3s ease,transform .3s ease}
.home-page .logo-grid>div:hover{position:relative;z-index:2;background:white;transform:scale(1.025);box-shadow:0 18px 45px rgba(0,0,0,.08)}
.home-page .quote-block blockquote{position:relative}
.home-page .quote-block blockquote::after{content:"";display:block;width:64px;height:3px;background:var(--vurgu);margin:36px auto 0}
.home-page .footer-top h2{transition:letter-spacing .55s ease}
.home-page .footer-top:hover h2{letter-spacing:.012em}
.home-page .round-link{box-shadow:0 0 0 0 rgba(225,6,0,.34);animation:ctaPulse 2.4s ease-out infinite}
@keyframes heroLine{to{opacity:1;transform:none}}
@keyframes heroFade{to{opacity:1;transform:none}}
@keyframes heroVisual{to{opacity:1;transform:translate(var(--scene-x,0),var(--scene-y,0)) scale(1)}}
@keyframes ambientPulse{to{transform:scale(1.12);opacity:.72}}
@keyframes sunBreath{to{transform:scale(1.035);box-shadow:0 0 165px rgba(225,6,0,.3)}}
@keyframes cardFloatA{0%,100%{margin-top:0}50%{margin-top:-12px}}
@keyframes cardFloatB{0%,100%{margin-top:0}50%{margin-top:10px}}
@keyframes cardFloatC{0%,100%{margin-bottom:0}50%{margin-bottom:12px}}
@keyframes stampSpin{to{transform:rotate(369deg)}}
@keyframes scrollLine{0%,100%{transform:scaleX(.35);opacity:.45}50%{transform:scaleX(1);opacity:1}}
@keyframes ctaPulse{70%{box-shadow:0 0 0 18px rgba(225,6,0,0)}100%{box-shadow:0 0 0 0 rgba(225,6,0,0)}}
@media(max-width:760px){
.hero-coordinate{display:none}
.home-page .hero::after{font-size:39vw;bottom:0}
.hero-ambient{width:100vw;right:-40vw;top:38%}
.home-page .site-header.is-scrolled{height:64px}
.home-page [data-reveal-section]{transform:translateY(55px)}
.home-page .service-row:hover{padding-left:8px}
.home-page .project-index{width:36px;height:36px;right:12px;top:12px}
}
@media(prefers-reduced-motion:reduce){
.home-page .hero-copy .eyebrow,.home-page .hero-line,.home-page .hero-bottom,.home-page .hero-visual,.home-page [data-reveal-section]{opacity:1!important;transform:none!important}
.hero-ambient,.home-page .red-sun,.home-page .visual-card,.home-page .hero-stamp,.home-page .round-link{animation:none!important}
}
.cms-form-grid>.full{grid-column:1/-1}
.cms-gallery-field{display:flex;flex-direction:column;gap:8px;font-size:.65rem;font-weight:700}
.cms-gallery-field>label{display:flex;flex-direction:column;gap:8px}
.cms-gallery-field>small{color:#888;font-weight:400}
.cms-gallery-remove{cursor:pointer;font-weight:700}
.cms-logo-field{display:flex;flex-direction:column;gap:8px;font-size:.65rem;font-weight:700}
.cms-logo-field>label{display:flex;flex-direction:column;gap:8px}
.cms-logo-preview{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cms-logo-preview img{max-width:200px;max-height:80px;object-fit:contain;border:1px solid #ddd;background:#fafafa;padding:8px}
.cms-logo-preview label{display:flex;align-items:center;gap:6px;color:#a21d18;font-size:.58rem;cursor:pointer}
.cms-logo-preview input{width:auto}
.brand-logo{display:block;width:auto;max-width:230px;object-fit:contain}
.featured-more{display:flex;justify-content:center;margin-top:60px}
/* Bölüm göründüğünde içindeki kartlar da sırayla belirir. */
.home-page [data-reveal-section] .service-row,
.home-page [data-reveal-section] .featured-grid>a,
.home-page [data-reveal-section] .stats>div,
.home-page [data-reveal-section] .process-grid>div,
.home-page [data-reveal-section] .clients-head,
.home-page [data-reveal-section] .client-rail,
.home-page [data-reveal-section] .quote-block{
opacity:0;transform:translateY(52px);
transition:opacity .7s ease,transform .85s cubic-bezier(.2,.7,.2,1);
}
.home-page [data-reveal-section].visible .service-row,
.home-page [data-reveal-section].visible .featured-grid>a,
.home-page [data-reveal-section].visible .stats>div,
.home-page [data-reveal-section].visible .process-grid>div,
.home-page [data-reveal-section].visible .clients-head,
.home-page [data-reveal-section].visible .client-rail,
.home-page [data-reveal-section].visible .quote-block{opacity:1;transform:none}
.home-page [data-reveal-section].visible>*>:nth-child(1),
.home-page [data-reveal-section].visible .service-row:nth-child(1){transition-delay:.05s}
.home-page [data-reveal-section].visible .service-row:nth-child(2),
.home-page [data-reveal-section].visible .featured-grid>a:nth-child(2),
.home-page [data-reveal-section].visible .stats>div:nth-child(2),
.home-page [data-reveal-section].visible .process-grid>div:nth-child(2),
.home-page [data-reveal-section].visible .logo-grid>div:nth-child(2){transition-delay:.12s}
.home-page [data-reveal-section].visible .service-row:nth-child(3),
.home-page [data-reveal-section].visible .featured-grid>a:nth-child(3),
.home-page [data-reveal-section].visible .stats>div:nth-child(3),
.home-page [data-reveal-section].visible .process-grid>div:nth-child(3),
.home-page [data-reveal-section].visible .logo-grid>div:nth-child(3){transition-delay:.19s}
.home-page [data-reveal-section].visible .service-row:nth-child(4),
.home-page [data-reveal-section].visible .featured-grid>a:nth-child(4),
.home-page [data-reveal-section].visible .stats>div:nth-child(4),
.home-page [data-reveal-section].visible .process-grid>div:nth-child(4),
.home-page [data-reveal-section].visible .logo-grid>div:nth-child(4){transition-delay:.26s}
.home-page [data-reveal-section].visible .service-row:nth-child(n+5),
.home-page [data-reveal-section].visible .logo-grid>div:nth-child(n+5){transition-delay:.33s}
/* ---------- Hero slider ---------- */
/* Slaytlar aynı grid gözünde üst üste durur; kutu en uzun slayta göre yükselir. */
.hero-slides{display:grid}
.hero-slide{
grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(18px);
transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),visibility .7s;
pointer-events:none;
}
.hero-slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hero-slide.is-active .eyebrow{animation:heroIn .7s .05s both}
.hero-slide.is-active h1{animation:heroIn .8s .12s both}
.hero-slide.is-active .hero-bottom{animation:heroIn .8s .22s both}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Slayt görselleri — yumuşak köşeli, hafif yakınlaşan panel */
.hero-media{position:absolute;inset:0;display:grid;border-radius:28px;overflow:hidden;z-index:1}
.hero-media-img{
grid-area:1/1;width:100%;height:100%;object-fit:cover;
opacity:0;transform:scale(1.08);transition:opacity 1s ease,transform 6s ease-out;
}
.hero-media-img.is-active{opacity:1;transform:scale(1)}
.hero-has-media .hero-visual{position:relative;border-radius:28px}
.hero-has-media .visual-card,.hero-has-media .hero-stamp{z-index:3}
.hero-has-media .red-sun{opacity:.55}
.hero-has-media .hero-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(160deg,rgba(0,0,0,.15),rgba(0,0,0,.55));
}
/* Slayt noktaları */
.hero-dots{
position:absolute;left:max(var(--gutter),24px);bottom:34px;z-index:6;
display:flex;gap:10px;align-items:center;
}
.hero-dots button{
width:34px;height:5px;padding:0;border:0;border-radius:999px;cursor:pointer;
background:rgba(255,255,255,.26);overflow:hidden;transition:width .4s ease,background .3s;
}
.hero-dots button:hover{background:rgba(255,255,255,.45)}
.hero-dots button.is-active{width:64px;background:rgba(255,255,255,.24)}
.hero-dots button i{display:block;height:100%;width:0;background:var(--vurgu);border-radius:999px}
.hero-dots button.is-active i{animation:heroDot 6s linear forwards}
@keyframes heroDot{from{width:0}to{width:100%}}
/* ---------- Yumuşak köşeler ---------- */
.visual-card,.project-art,.case-art .project-art,.reference-cards article,
.team-grid article,.testimonial-grid article,.case-gallery-grid figure,
.stats>div,.process-grid>div,.value-grid>div,.why-grid>div,
.contact-form input,.contact-form textarea,.contact-form select,
.button,.header-cta,.admin-login input{border-radius:16px}
.button,.header-cta{border-radius:999px}
.hero-visual,.map-block,.map-block iframe{border-radius:28px}
.hero-stamp{border-radius:999px}
.project-art{overflow:hidden}
.logo-grid>div{border-radius:14px}
@media(max-width:760px){
.hero-media,.hero-visual,.map-block,.map-block iframe{border-radius:20px}
.hero-dots{left:20px;bottom:20px}
}
/* ---------- İletişim formu ---------- */
.contact-form{
background:#fff;border:1px solid #e6e6e6;border-radius:22px;
padding:clamp(24px,3.5vw,42px);box-shadow:0 18px 50px rgba(0,0,0,.06);
gap:22px 20px;
}
.contact-form .field{gap:8px}
.contact-form .field label{color:#444;font-size:.62rem}
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea{
background:#fafafa;border:1px solid #e0e0e0;border-radius:14px;
padding:15px 17px;font-size:.92rem;font-family:inherit;color:var(--black);
transition:border-color .2s,background .2s,box-shadow .2s;
}
.contact-form .field textarea{min-height:130px;line-height:1.6}
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder{color:#aaa}
.contact-form .field input:hover,
.contact-form .field textarea:hover{border-color:#cfcfcf}
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus{
background:#fff;border-color:var(--vurgu);
box-shadow:0 0 0 4px rgba(225,6,0,.09);outline:none;
}
/* Tarayıcının "zorunlu alan boş" uyarısını sessizce göstermesin, sadece dolduktan sonra */
.contact-form .field input:not(:placeholder-shown):invalid{border-color:#e0a0a0}
.contact-form .consent{
background:#fafafa;border:1px solid #ededed;border-radius:14px;
padding:15px 17px;font-size:.72rem;color:#555;transition:border-color .2s;
}
.contact-form .consent:hover{border-color:#dcdcdc}
.contact-form .consent input{width:17px;height:17px;flex:none;cursor:pointer}
.contact-form .consent span{cursor:pointer}
.contact-form .submit{
grid-column:1/-1;justify-self:start;padding:16px 34px;font-size:.74rem;
border:0;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;
}
.contact-form .submit:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(225,6,0,.28)}
.contact-form .submit:disabled{opacity:.55;cursor:wait;transform:none;box-shadow:none}
.contact-form .form-message{font-size:.78rem;color:#666}
.contact-form .form-message.form-error{color:var(--vurgu);font-weight:700}
.thank-you{
background:#fff;border:1px solid #e6e6e6;border-radius:22px;
padding:clamp(30px,var(--gutter),54px);box-shadow:0 18px 50px rgba(0,0,0,.06);
display:flex;flex-direction:column;align-items:flex-start;
}
@media(max-width:760px){
.contact-form .submit{justify-self:stretch;width:100%;text-align:center}
}
/* ---------- Etkileşim detayları ---------- */
/* Menüde alttan büyüyen çizgi */
.desktop-nav a{position:relative;padding-bottom:3px}
.desktop-nav a::after{
content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
background:var(--vurgu);transform:scaleX(0);transform-origin:right;
transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.desktop-nav a:hover::after{transform:scaleX(1);transform-origin:left}
/* Metin bağlantılarında ok ileri kayar */
.text-link{position:relative;transition:color .2s}
.text-link span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.text-link:hover{color:var(--vurgu)}
.text-link:hover span{transform:translate(4px,-4px)}
/* Düğmelerde ok hareketi */
.button span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.button:hover span{transform:translate(4px,-4px)}
/* İç sayfalardaki proje kartları da canlansın */
.inner-page .project-card .project-art{transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.inner-page .project-card:hover .project-art{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.inner-page .project-card:hover .project-meta h3{color:var(--vurgu)}
.inner-page .project-card .project-meta h3{transition:color .25s}
/* Referans kartları */
.reference-cards article{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.reference-cards article:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.1)}
.reference-cards .reference-logo{transition:filter .35s,transform .35s}
.reference-cards article:hover .reference-logo{filter:none;transform:scale(1.04)}
/* Ekip ve yorum kartları */
.team-grid article,.testimonial-grid article{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.team-grid article:hover,.testimonial-grid article:hover{transform:translateY(-5px)}
.team-grid article:hover .avatar{transform:scale(1.05)}
.team-grid .avatar{transition:transform .35s}
/* İletişim sayfası yan sütun bağlantıları */
.contact-layout aside a{transition:color .2s,padding-left .25s}
.contact-layout aside a:hover{color:var(--vurgu);padding-left:6px}
/* SSS açılır başlıkları */
.faq summary{cursor:pointer;transition:color .2s}
.faq summary:hover{color:var(--vurgu)}
.faq summary span{display:inline-block;transition:transform .3s}
.faq details[open] summary span{transform:rotate(45deg)}
/* Sabit hızlı iletişim çubuğu */
.lead-dock>a{transition:transform .25s,background .25s}
.lead-dock>a:hover{transform:translateY(-2px)}
/* Klavyeyle gezenler için görünür odak halkası */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
outline:2px solid var(--vurgu);outline-offset:3px;
}
/* Hareket azaltma tercihini yapan kullanıcıda animasyon çalışmaz. */
@media(prefers-reduced-motion:reduce){
.home-page [data-reveal-section],
.home-page [data-reveal-section] .service-row,
.home-page [data-reveal-section] .featured-grid>a,
.home-page [data-reveal-section] .stats>div,
.home-page [data-reveal-section] .process-grid>div,
.home-page [data-reveal-section] .logo-grid>div,
.home-page [data-reveal-section] .quote-block,
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.marquee div{animation:none}
.text-link span,.button span,.desktop-nav a::after,
.inner-page .project-card .project-art,.reference-cards article,
.team-grid article,.testimonial-grid article{transition:none!important}
}
/* Gerçek Google haritası — dekoratif kutunun yerini aldı. */
/* Harita koyu bloğun içinde üstten ve alttan eşit boşlukla durur; üst boşluk
verilmediğinde iletişim formuna yapışık görünüyordu. */
.map-block{min-height:0;display:block;background:#111;padding:90px var(--gutter);overflow:hidden}
.map-block iframe{display:block;width:100%;height:clamp(320px,46vh,520px);border:0;filter:grayscale(1) contrast(1.05)}
.map-block iframe:hover{filter:none}
.cms-gallery-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.cms-gallery-preview>span{position:relative;border:1px solid #ddd;background:white;padding:7px}
.cms-gallery-preview img{display:block;width:100%;aspect-ratio:1.35;object-fit:cover}
.cms-gallery-remove{display:flex;align-items:center;gap:6px;margin-top:7px;color:#a21d18;font-size:.58rem}
.cms-gallery-remove input{width:auto}
@media(max-width:760px){.cms-gallery-preview{grid-template-columns:repeat(2,1fr)}}
/* ---------- BLOG ---------- */
.blog-list { padding:120px var(--gutter); }
.blog-empty { text-align:center; padding:60px 0 40px; }
.blog-empty h2 { font-family:"Bebas Neue"; font-size:clamp(2.6rem,5vw,4.4rem); font-weight:400; text-transform:uppercase; margin:18px 0; }
.blog-empty p:last-child { color:#5a5a5a; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:60px 28px; }
.post-card { display:block; color:var(--black); }
.post-card-art { overflow:hidden; aspect-ratio:1.45; background:#e4e2dd; }
.post-card-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.75,.2,1); }
.post-card:hover .post-card-art img { transform:scale(1.05); }
.post-card-art-blank { display:grid; place-items:center; background:var(--black); }
.post-card-art-blank span { font-family:"Bebas Neue"; font-size:6rem; line-height:1; color:var(--vurgu); }
.post-card-meta { padding-top:22px; }
.post-card-meta>span { display:block; font-size:.6rem; letter-spacing:.14em; font-weight:700; color:#7a7a7a; text-transform:uppercase; }
.post-card-meta h3 { font-family:"Bebas Neue"; font-size:1.95rem; font-weight:400; text-transform:uppercase; line-height:1.05; margin:12px 0 0; }
.post-card-meta p { color:#5a5a5a; font-size:.92rem; line-height:1.65; margin:12px 0 0; }
.post-card-meta em { display:inline-block; margin-top:18px; font-style:normal; font-size:.6rem; font-weight:700; letter-spacing:.12em; border-bottom:2px solid var(--vurgu); padding-bottom:6px; }
.post-card-meta em span { margin-left:14px; }
.post-hero { padding:180px var(--gutter) 0; }
.post-hero h1 { font-family:"Bebas Neue",Impact,sans-serif; text-transform:uppercase; font-size:clamp(3.4rem,7vw,7.4rem); line-height:.88; font-weight:400; letter-spacing:-.02em; margin:32px 0; max-width:1100px; }
.post-hero .page-intro { margin-left:0; max-width:720px; }
.post-author { margin-top:26px; font-size:.62rem; letter-spacing:.14em; font-weight:700; text-transform:uppercase; color:var(--vurgu); }
.post-cover { padding:0 var(--gutter); margin-top:70px; }
.post-cover img { display:block; width:100%; aspect-ratio:2.1; object-fit:cover; }
.post-body { padding:110px var(--gutter); margin-top:70px; }
.post-prose { max-width:760px; margin:0 auto; font-size:1.06rem; line-height:1.85; color:#242424; }
.post-prose > :first-child { margin-top:0; }
.post-prose p { margin:0 0 28px; }
.post-prose h2 { font-family:"Bebas Neue"; text-transform:uppercase; font-size:clamp(2rem,3.4vw,3rem); font-weight:400; line-height:1.05; margin:58px 0 22px; }
.post-prose h3 { font-family:"Bebas Neue"; text-transform:uppercase; font-size:1.55rem; font-weight:400; margin:44px 0 16px; }
.post-prose ul,.post-prose ol { margin:0 0 28px; padding-left:22px; }
.post-prose li { margin-bottom:10px; }
.post-prose li::marker { color:var(--vurgu); font-weight:700; }
.post-prose a { color:var(--black); border-bottom:2px solid var(--vurgu); }
.post-prose a:hover { color:var(--vurgu); }
.post-prose strong { font-weight:700; }
.post-prose blockquote { margin:38px 0; padding:6px 0 6px 28px; border-left:3px solid var(--vurgu); font-size:1.25rem; line-height:1.55; font-weight:500; }
.post-cta { padding:110px var(--gutter); display:flex; align-items:flex-end; justify-content:space-between; gap:40px; border-top:1px solid var(--line); }
.post-cta h2 { font-family:"Bebas Neue"; text-transform:uppercase; font-size:clamp(2.6rem,5.5vw,5rem); font-weight:400; line-height:.9; margin:22px 0 0; }
@media(max-width:1000px){ .post-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:760px){
.blog-list,.post-body,.post-cta { padding:80px var(--gutter); }
.post-grid { grid-template-columns:1fr; gap:50px; }
.post-hero { padding:140px var(--gutter) 0; }
.post-cover { padding:0 var(--gutter); margin-top:45px; }
.post-cover img { aspect-ratio:1.5; }
.post-body { margin-top:45px; }
.post-cta { flex-direction:column; align-items:flex-start; }
}
/* Kod ile gelen demo görselleri logo değil, tam kadraj görsellerdir:
hücreyi doldururlar. Panelden yüklenen gerçek logolar contain kalır. */
.reference-cover { max-width:100%; max-height:none; width:100%; height:100%; object-fit:cover; }
.logo-grid>div:has(.reference-cover) { padding:0; overflow:hidden; }
.reference-cards article>div:has(.reference-cover) { display:block; aspect-ratio:1.75; overflow:hidden; margin:-30px -30px 18px; }
.reference-cards .reference-cover { max-width:100%; max-height:none; }
.logo-grid>div:has(.reference-cover) { position:relative; }
.logo-caption { position:absolute; left:14px; bottom:12px; font-family:"Bebas Neue"; font-style:normal; font-size:1.15rem; letter-spacing:.08em; color:var(--white); text-shadow:0 2px 14px rgba(0,0,0,.55); pointer-events:none; }
.reference-name { display:block; font-family:"Bebas Neue"; font-size:1.5rem; letter-spacing:.08em; margin-bottom:4px; }
/* ---------- PROJE GALERİSİ: PARALLAX + GÖRÜNTÜLEYİCİ ---------- */
/* Görsel çerçevesinden uzun; --py ile kayar, --ps ile hover'da büyür.
Eski doğrudan transform kuralının yerini alır ki ikisi çakışmasın. */
.case-gallery-grid .case-shot { display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:pointer; overflow:hidden; }
.case-gallery-grid img,
.case-gallery-grid figure:hover img { height:122%; margin-top:-11%; transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1)); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.case-gallery-grid figure:hover img { --ps:1.04; }
.case-gallery-grid .case-shot:focus-visible { outline:3px solid var(--vurgu); outline-offset:-3px; }
.shot-viewer { position:fixed; inset:0; z-index:120; display:grid; place-items:center; background:rgba(8,8,8,.94); opacity:0; transition:opacity .22s ease; }
/* display:grid, tarayıcının [hidden] kuralını ezer; kapalıyken görünmez ama
ekranı kaplayan bir katman olarak tıklamaları yutmasın diye açıkça gizlenir. */
.shot-viewer[hidden] { display:none; }
.shot-viewer.is-open { opacity:1; }
/* Yan oklar görselin üstüne binmesin diye sahneye kenarlardan pay bırakılır. */
.shot-stage,.shot-stage img { max-width:min(88vw,calc(100vw - 230px)); max-height:82vh; }
.shot-stage { transition:transform .42s cubic-bezier(.2,.75,.2,1),opacity .3s ease; will-change:transform; touch-action:pan-y; }
.shot-stage img { display:block; width:auto; height:auto; user-select:none; -webkit-user-drag:none; }
.shot-close,.shot-nav { position:absolute; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:var(--white); cursor:pointer; display:grid; place-items:center; transition:background .25s,border-color .25s,transform .25s; }
.shot-close:hover,.shot-nav:hover { background:var(--vurgu); border-color:var(--vurgu); }
.shot-close { top:24px; right:26px; width:48px; height:48px; border-radius:50%; font-size:1.7rem; line-height:1; }
.shot-nav { top:50%; margin-top:-30px; width:60px; height:60px; border-radius:50%; font-size:2.2rem; line-height:1; }
.shot-prev { left:26px; } .shot-next { right:26px; }
.shot-prev:hover { transform:translateX(-3px); } .shot-next:hover { transform:translateX(3px); }
.shot-close:focus-visible,.shot-nav:focus-visible { outline:3px solid var(--vurgu); outline-offset:3px; }
.shot-counter { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); margin:0; font-family:"Bebas Neue"; font-size:1.15rem; letter-spacing:.16em; color:rgba(255,255,255,.62); }
.shot-counter b { color:var(--white); font-weight:400; }
@media(max-width:760px){
.shot-close { top:14px; right:14px; width:42px; height:42px; }
.shot-nav { width:46px; height:46px; margin-top:-23px; font-size:1.7rem; }
.shot-prev { left:10px; } .shot-next { right:10px; }
/* Dar ekranda oklar görselin üstünde yüzer; yer kısıtlı. */
.shot-stage,.shot-stage img { max-width:94vw; max-height:74vh; }
}
@media(prefers-reduced-motion:reduce){
.case-gallery-grid img,.case-gallery-grid figure:hover img { height:100%; margin-top:0; transform:none; transition:none; }
.shot-viewer,.shot-stage { transition:none; }
}
/* ---------- TAM EKRAN PROJE KARELERİ (yapışkan akış) ---------- */
/* Track yüksekliği kare sayısı kadar ekran; sahne yapışıp yerinde kalır,
sayfa kaydıkça JS her karenin clip-path'ini açar. */
.case-reel { --reel-pad:34px; position:relative; background:var(--black); padding:0 var(--gutter); }
.case-reel-track { height:calc(var(--reel-count,4) * 100vh); position:relative; }
.case-reel-stage { position:sticky; top:0; height:100vh; overflow:hidden; }
.case-reel-shot { position:absolute; inset:0; margin:0; overflow:hidden; will-change:clip-path; }
.case-reel-shot img { display:block; width:100%; height:100%; object-fit:cover; will-change:transform; }
.case-reel-ui { position:absolute; left:0; right:0; bottom:0; z-index:60; padding:0 var(--reel-pad) 34px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; pointer-events:none; text-shadow:0 2px 18px rgba(0,0,0,.6); }
.case-reel-ui .section-no { color:rgba(255,255,255,.72); margin:0; }
.case-reel-count { margin:0; display:flex; align-items:center; gap:12px; font-family:"Bebas Neue"; color:var(--white); font-size:1.5rem; letter-spacing:.1em; line-height:1; }
.case-reel-count i { width:26px; height:1px; background:rgba(255,255,255,.5); }
.case-reel-count span { color:rgba(255,255,255,.6); }
.case-reel-bar { position:absolute; left:var(--reel-pad); right:var(--reel-pad); bottom:20px; height:2px; background:rgba(255,255,255,.18); }
.case-reel-bar i { display:block; height:100%; width:0; background:var(--vurgu); transform-origin:left; }
@media(max-width:760px){
.case-reel { --reel-pad:20px; }
.case-reel-count { font-size:1.2rem; }
}
/* Hareket azaltma: yapışkan akış yerine sade dikey liste. */
@media(prefers-reduced-motion:reduce){
.case-reel-track { height:auto; }
.case-reel-stage { position:static; height:auto; }
.case-reel-shot { position:relative; inset:auto; clip-path:none !important; height:70vh; }
.case-reel-shot img { transform:none !important; }
.case-reel-ui { position:static; padding:26px var(--gutter); background:var(--black); }
.case-reel-bar { display:none; }
}
.case-site { color:var(--black); border-bottom:2px solid var(--vurgu); align-self:flex-start; }
.case-site:hover { color:var(--vurgu); }
.case-site span { margin-left:6px; }
/* Alt sınır verilmezse 760px altındaki tek sütun kuralını ezerdi. */
@media(min-width:761px) and (max-width:1000px){ .results { grid-template-columns:repeat(2,1fr); } }
/* ---------- BİZE GÜVENENLER: AKAN REFERANS ŞERİTLERİ ---------- */
.clients-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.clients-head h2 { font-family:"Bebas Neue"; text-transform:uppercase; font-size:clamp(2.8rem,6vw,6.4rem); font-weight:400; line-height:.88; letter-spacing:-.02em; margin:24px 0 0; }
.clients-head h2 em { font-style:normal; color:var(--vurgu); }
.clients-head h2 span { color:var(--vurgu); }
.clients-note { display:flex; align-items:baseline; gap:14px; margin:0; max-width:320px; }
.clients-note b { font-family:"Bebas Neue"; font-size:4rem; line-height:.9; font-weight:400; color:var(--vurgu); }
.clients-note span { font-size:.82rem; line-height:1.5; color:#5f5f5f; }
/* Şerit gutter içinde kalır; kartlar bu sütunun kenarlarından girip çıkar. */
.client-rail { margin-top:44px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.client-track { display:flex; width:max-content; animation:clientRail calc(var(--kart,5) * 6s) linear infinite; }
.client-rail.is-reverse .client-track { animation-direction:reverse; }
.client-rail:hover .client-track { animation-play-state:paused; }
/* --kayma JS tarafından bir kopyanın tam genişliğiyle doldurulur; JS yoksa
-%50 makul bir yedektir. */
@keyframes clientRail { from { transform:translate3d(0,0,0); } to { transform:translate3d(calc(var(--kayma,50%) * -1),0,0); } }
.client-card { width:clamp(210px,20vw,280px); flex:0 0 auto; margin-right:22px; display:block; color:inherit; }
.client-card-art { aspect-ratio:1.4; overflow:hidden; background:var(--black); border-radius:14px; }
.client-card-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.client-card:hover .client-card-art img { transform:scale(1.07); }
.client-card-blank { display:grid; place-items:center; width:100%; height:100%; font-family:"Bebas Neue"; font-size:4.5rem; color:var(--vurgu); }
.client-card h3 { font-family:"Bebas Neue"; font-size:1.5rem; font-weight:400; letter-spacing:.06em; text-transform:uppercase; margin:16px 0 0; transition:color .3s; }
.client-card:hover h3 { color:var(--vurgu); }
@media(max-width:760px){
.clients-head h2 { margin-top:18px; }
.clients-note b { font-size:3rem; }
.client-rail { margin-top:30px; }
.client-card { width:200px; }
}
/* Hareket azaltma: akış durur, şerit parmakla kaydırılır. */
@media(prefers-reduced-motion:reduce){
.client-track { animation:none; }
.client-rail { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}
/* Panelden yüklenen gerçek logo: kırpılmaz, açık zeminde ortalanır. */
.client-card-art.is-logo { background:var(--white); display:grid; place-items:center; padding:26px; border:1px solid #e2e2df; }
.client-card-art.is-logo img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
/* ---------- SAYFA GEÇİŞLERİ ---------- */
/* Destekleyen tarayıcıda sayfalar birbirine akar; desteklemeyende hiçbir şey
değişmez, eski davranış aynen sürer. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation:sayfaCik .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation:sayfaGir .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sayfaCik { to { opacity:0; transform:translateY(-12px); } }
@keyframes sayfaGir { from { opacity:0; transform:translateY(22px); } }
/* Proje kartından proje sayfasına geçerken görsel büyüyerek kapak olur. */
.case-art .project-art { view-transition-name:proje-gorsel; }
::view-transition-group(proje-gorsel) { animation-duration:.62s; animation-timing-function:cubic-bezier(.2,.7,.2,1); }
::view-transition-old(proje-gorsel),
::view-transition-new(proje-gorsel) { animation:none; height:100%; object-fit:cover; }
/* Başlık ve alt iletişim çubuğu geçiş boyunca yerinde kalsın. */
.site-header { view-transition-name:site-basligi; }
.lead-dock { view-transition-name:iletisim-cubugu; }
@media(prefers-reduced-motion:reduce){
@view-transition { navigation: none; }
::view-transition-old(root),::view-transition-new(root) { animation:none; }
}
/* ---------- NİŞANGÂH İMLEÇ ---------- */
/* Çizgiler fareyi birebir, kesişim kutusu gecikmeli takip eder. Tıklanabilir
öğede kutu büyür; data-imlec taşıyan öğede kırmızı doldurup siyah etiketi
gösterir. Genişlik JS'ten --kutu-w / --kutu-h ile gelir ki metne göre
yumuşak açılsın. */
.imlec { position:fixed; inset:0; z-index:200; pointer-events:none; opacity:0; transition:opacity .25s ease; }
.imlec.is-gorunur { opacity:1; }
.imlec i { font-style:normal; }
.imlec-yatay,.imlec-dikey { position:fixed; top:0; left:0; background:rgba(225,6,0,.4); will-change:transform; }
.imlec-yatay { width:100%; height:1px; }
.imlec-dikey { height:100%; width:1px; }
.imlec-kutu { position:fixed; top:0; left:0; display:grid; place-items:center; will-change:transform;
width:var(--kutu-w,22px); height:var(--kutu-h,22px); border:1px solid var(--vurgu); background:transparent;
transition:width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1),background .25s ease; }
.imlec-kutu b { font-family:"Bebas Neue"; font-weight:400; font-style:normal; font-size:.8rem; letter-spacing:.13em;
color:var(--black); white-space:nowrap; opacity:0; transform:scale(.85);
transition:opacity .2s ease,transform .28s cubic-bezier(.2,.7,.2,1); }
.imlec-koord { position:fixed; top:0; left:0; font-family:"Bebas Neue"; font-style:normal; font-size:.7rem; letter-spacing:.14em;
color:rgba(225,6,0,.75); white-space:nowrap; will-change:transform; }
.imlec.is-etiketli .imlec-kutu { background:var(--vurgu); }
.imlec.is-etiketli .imlec-kutu b { opacity:1; transform:scale(1); }
.imlec.is-etiketli .imlec-koord { opacity:0; }
.imlec-koord { transition:opacity .2s ease; }
/* Yerleşik imleç yalnızca nişangâh devredeyken gizlenir; metin alanlarında
yazı imleci gerektiği için orada geri açılır. */
body.imlec-acik, body.imlec-acik a, body.imlec-acik button { cursor:none; }
body.imlec-acik input, body.imlec-acik textarea, body.imlec-acik select { cursor:auto; }
@media(hover:none),(pointer:coarse){ .imlec { display:none; } body.imlec-acik,body.imlec-acik a,body.imlec-acik button { cursor:auto; } }
/* ---------- BAŞLIKLARDA SATIR SATIR AÇILIŞ ---------- */
/* Her satır kendi taşma kutusunda; içteki katman alttan yukarı süzülür. */
h2.satirli { display:block; }
/* Satır kutuları olduğu için, kapsayıcıdaki genel span kuralları
(örn. .case-summary span{font-size:.8rem}) başlığın boyutunu eziyordu.
Yazı tipiyle ilgili her şey başlıktan miras alınır. */
h2.satirli .satir, h2.satirli .satir-ic { font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; }
h2.satirli .satir { display:block; overflow:hidden; }
h2.satirli .satir-ic { display:block; transform:translateY(108%); opacity:0;
transition:transform 1s cubic-bezier(.16,.84,.24,1) var(--satir-gecikme,0ms),
opacity .7s ease var(--satir-gecikme,0ms); }
h2.satirli.satir-acildi .satir-ic { transform:none; opacity:1; }
/* ---------- PROJE KARTINDA DERİNLİK ---------- */
.project-card .project-art > img,
.project-card .project-art .art-orbit,
.project-card .project-art .art-panel { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.project-card:hover .project-art > img { transform:translate3d(var(--kart-x,0),var(--kart-y,0),0) scale(1.06); }
.project-card:hover .project-art .art-orbit { transform:translate3d(calc(var(--kart-x,0px) * 1.6),calc(var(--kart-y,0px) * 1.6),0); }
.project-card:hover .project-art .art-panel { transform:translate3d(calc(var(--kart-x,0px) * -1),calc(var(--kart-y,0px) * -1),0); }
.project-card .project-meta span { display:block; transition:transform .45s cubic-bezier(.2,.7,.2,1),color .3s; }
.project-card:hover .project-meta span { transform:translateY(-3px); color:var(--vurgu); }
/* ---------- PORTFOLYO FİLTRESİ ---------- */
.portfolio-grid .project-card { will-change:transform,opacity; }
/* ---------- HİZMET SATIRI ÖNİZLEMESİ ---------- */
.hizmet-onizleme { position:fixed; top:0; left:0; z-index:190; width:clamp(210px,17vw,290px); aspect-ratio:1.35;
border-radius:14px; overflow:hidden; pointer-events:none; opacity:0; will-change:transform;
transition:opacity .3s ease, clip-path .5s cubic-bezier(.2,.7,.2,1);
clip-path:inset(45% 45% 45% 45% round 14px); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.hizmet-onizleme.is-acik { opacity:1; clip-path:inset(0 round 14px); }
.hizmet-onizleme img { display:block; width:100%; height:100%; object-fit:cover; }
@media(prefers-reduced-motion:reduce){
h2.satirli .satir-ic { transform:none; opacity:1; transition:none; }
.hizmet-onizleme { display:none; }
.project-card:hover .project-art > img { transform:none; }
}
/* Panel liste satırındaki "Kopyala" düğmesi. */
.cms-list-row form.cms-copy{margin:0}
.cms-list-row form.cms-copy button{border:1px solid #ddd;background:#fafafa;color:#333;font-size:.6rem;padding:6px 9px;cursor:pointer;border-radius:4px}
.cms-list-row form.cms-copy button:hover{border-color:#111;background:#fff}
@media(max-width:760px){.cms-list-row{grid-template-columns:46px 1fr 58px}.cms-list-row form.cms-copy{grid-column:2}}
/* Orta genişlikte iki sütun; dar ekranda tek sütuna mobil kuralı düşürür. */
@media(min-width:761px) and (max-width:1080px){ .scope-list { grid-template-columns:repeat(2,1fr); } }
/* Kart düzenine geçen bölümlerin dar ekran davranışı. */
@media(max-width:760px){
.stats { grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; }
.stats>div { padding:22px 20px 20px; border-radius:16px; }
.faq summary { padding:20px 22px; font-size:.95rem; }
.faq details p { padding:0 22px 22px; }
.service-list { gap:10px; margin-top:28px; }
.service-row { padding:18px 20px; border-radius:16px; gap:12px; }
.service-row>span { width:36px; height:36px; font-size:1rem; }
}
/* ---------- SSS: 3 sıra kart ---------- */
.faq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.faq-grid details { margin-top:0; }
.faq summary { align-items:flex-start; padding:24px; font-size:.98rem; line-height:1.4; }
/* Artı işareti satır yüksekliğinden bağımsız; kayma yapmaz. */
.faq summary span { display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; margin-top:-2px; }
.faq details p { padding:0 24px 24px; }
@media (max-width:1100px){ .faq-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .faq-grid { grid-template-columns:1fr; } }
/* ---------- Hizmet metni tam genişlik ---------- */
.detail-hero>p:not(.eyebrow) { max-width:none; width:min(100%,1180px); }
/* ---------- Anasayfa hizmetleri: sabit başlık + 2 sıra kart ---------- */
@media (min-width:981px){
.home-page .services-section { display:grid; grid-template-columns:minmax(300px,34%) 1fr; gap:60px; align-items:start; }
.home-page .services-section .section-head {
position:sticky; top:120px; display:flex; flex-direction:column;
align-items:flex-start; margin-bottom:0; gap:24px;
}
.home-page .services-section .section-head>p { max-width:none; }
.home-page .service-list { grid-template-columns:repeat(2,1fr); gap:18px; margin-top:0; }
.home-page .service-row {
grid-template-columns:1fr 44px; grid-template-rows:auto auto auto;
align-items:start; row-gap:10px; min-height:230px; align-content:start;
}
.home-page .service-row em { grid-column:1/3; }
.home-page .service-row h3 { grid-column:1/3; font-size:clamp(1.7rem,2vw,2.3rem); }
.home-page .service-row p { grid-column:1; max-width:none; align-self:end; }
.home-page .service-row>span { grid-column:2; grid-row:3; align-self:end; justify-self:end; }
}
/* Kartlar tek tek, scroll ilerledikçe belirir. */
.home-page .service-row { opacity:0; transform:translateY(52px);
transition:opacity .7s ease,transform .85s cubic-bezier(.2,.7,.2,1); }
.home-page [data-reveal-section].visible .service-row { opacity:0; transform:translateY(52px); }
.home-page .service-row.card-in,
.home-page [data-reveal-section].visible .service-row.card-in { opacity:1; transform:none; }
.home-page [data-reveal-section].visible .service-row:nth-child(n){ transition-delay:0s; }
@media(prefers-reduced-motion:reduce){
.home-page .service-row { opacity:1!important; transform:none!important; }
}
/* ---------- Anasayfada tüm bölümler: sabit başlık + scroll ile beliren kartlar ---------- */
@media (min-width:981px){
.home-page .work-section,
.home-page .process {
display:grid; grid-template-columns:minmax(300px,34%) 1fr; gap:60px; align-items:start;
}
.home-page .work-section .section-head,
.home-page .process .section-head {
position:sticky; top:120px; display:flex; flex-direction:column;
align-items:flex-start; margin-bottom:0; gap:24px;
}
.home-page .work-section .featured-grid { gap:56px 24px; }
.home-page .work-section .featured-more { grid-column:2; margin-top:40px; justify-content:flex-start; }
.home-page .process .process-grid { grid-template-columns:repeat(2,1fr); border-top:0; }
.home-page .process .process-grid>div {
min-height:0; padding:28px 26px; border:1px solid var(--line); border-radius:20px;
}
.home-page .process .process-grid { gap:18px; }
.home-page .process .process-grid h3 { margin:26px 0 14px; }
}
/* Başlık iki sütuna bölünmüş bölümlerde açıklama kutusu genişlemesin. */
.home-page .work-section .section-head>p,
.home-page .process .section-head>p { max-width:none; }
/* Her kart kendi görünürlüğüne göre belirir (bölüm gelince topluca değil). */
.home-page .featured-grid>a,
.home-page .process-grid>div,
.home-page .stats>div {
opacity:0; transform:translateY(52px);
transition:opacity .7s ease,transform .85s cubic-bezier(.2,.7,.2,1);
}
.home-page [data-reveal-section].visible .featured-grid>a,
.home-page [data-reveal-section].visible .process-grid>div,
.home-page [data-reveal-section].visible .stats>div { opacity:0; transform:translateY(52px); }
.home-page .featured-grid>a.card-in,
.home-page .process-grid>div.card-in,
.home-page .stats>div.card-in,
.home-page [data-reveal-section].visible .featured-grid>a.card-in,
.home-page [data-reveal-section].visible .process-grid>div.card-in,
.home-page [data-reveal-section].visible .stats>div.card-in { opacity:1; transform:none; transition-delay:0s; }
@media(prefers-reduced-motion:reduce){
.home-page .featured-grid>a,
.home-page .process-grid>div,
.home-page .stats>div { opacity:1!important; transform:none!important; }
}
/* ==================================================================
BERBER DEMOSU
Ajans sitesinin karanlık/kırmızı dili korundu; buradaki eklemeler
yalnızca berber bölümleri için.
================================================================== */
/* Üst bölüm ------------------------------------------------------- */
.berber-hero { grid-template-columns:56% 44%; }
.berber-hero h1 { margin:26px 0 18px; }
.google-puan { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.google-puan b { font-family:"Bebas Neue",Impact,sans-serif; font-size:2.6rem; line-height:1; }
.google-puan small { color:var(--gray); font-size:.8rem; }
.yildiz { color:#f5b301; letter-spacing:.12em; font-size:1.05rem; }
.hero-saat { color:var(--gray); font-size:.86rem; line-height:1.7; margin-top:26px; }
.hero-foto { width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05); }
/* Ortak bölüm iskeleti -------------------------------------------- */
.bolum { padding:96px var(--gutter); border-top:1px solid var(--line); }
.bolum-bas { margin-bottom:44px; }
.bolum-bas h2 { font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(2.6rem,5.2vw,4.4rem);
letter-spacing:-.01em; line-height:.95; margin:18px 0 0; font-weight:400; text-transform:uppercase; }
.bolum-buton { margin-top:38px; }
/* Fiyat listesi --------------------------------------------------- */
.fiyat-liste { display:flex; flex-direction:column; }
.fiyat-satir { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:22px;
padding:22px 0; border-bottom:1px solid var(--line); }
.fiyat-satir.one-cikan { border-left:2px solid var(--vurgu); padding-left:18px; }
.fiyat-ad b { display:block; font-size:1.06rem; font-weight:700; }
.fiyat-ad span { display:block; color:var(--gray); font-size:.85rem; margin-top:5px; line-height:1.5; }
.fiyat-satir em { color:var(--gray); font-style:normal; font-size:.8rem; letter-spacing:.08em; }
.fiyat-satir strong { font-family:"Bebas Neue",Impact,sans-serif; font-size:1.9rem; letter-spacing:.02em; color:var(--vurgu); }
/* Galeri ---------------------------------------------------------- */
.galeri-izgara { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.galeri-kare { margin:0; position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface); }
.galeri-kare img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.galeri-kare:hover img { transform:scale(1.05); }
.galeri-kare figcaption { position:absolute; left:0; bottom:0; padding:10px 14px; font-size:.68rem;
letter-spacing:.14em; text-transform:uppercase; background:rgba(10,10,10,.72); }
/* Yorumlar -------------------------------------------------------- */
.yorum-izgara { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.yorum { margin:0; padding:26px; background:var(--surface); border:1px solid var(--line); }
.yorum p { line-height:1.7; font-size:.94rem; margin:14px 0 20px; }
.yorum footer b { display:block; font-size:.9rem; }
.yorum footer span { color:var(--gray); font-size:.78rem; }
.yorum-link { display:inline-flex; gap:10px; margin-top:32px; font-size:.72rem; font-weight:700;
letter-spacing:.12em; color:var(--vurgu); }
/* Ekip ------------------------------------------------------------ */
.ekip-izgara { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.ekip-kart { background:var(--surface); border:1px solid var(--line); padding:22px; text-align:center; }
.ekip-kart img { width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:16px; }
.ekip-bas { width:78px; height:78px; margin:0 auto 16px; border-radius:50%; background:var(--vurgu);
display:grid; place-items:center; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.7rem; }
.ekip-kart b { display:block; font-size:1rem; }
.ekip-kart span { color:var(--gray); font-size:.8rem; }
/* Konum ----------------------------------------------------------- */
.konum { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.konum dl { margin:0; }
.konum dl > div { padding:18px 0; border-bottom:1px solid var(--line); }
.konum dt { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); }
.konum dd { margin:8px 0 0; line-height:1.65; }
.konum-harita iframe { width:100%; height:420px; border:0; filter:grayscale(1) invert(.92) contrast(.85); }
/* Randevu --------------------------------------------------------- */
.randevu-bolum { border-top:0; padding-top:0; max-width:760px; }
.randevu-adim { display:flex; align-items:center; gap:14px; margin:42px 0 18px; }
.adim-no { width:28px; height:28px; border-radius:50%; background:var(--vurgu); display:grid; place-items:center;
font-size:.78rem; font-weight:700; }
.randevu-adim h3 { margin:0; font-size:1.05rem; font-weight:700; letter-spacing:.02em; }
.gun-serit { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.gun-kart { flex:0 0 auto; width:82px; padding:14px 0; background:var(--surface); border:1px solid var(--line);
color:var(--white); text-align:center; transition:.18s; }
.gun-kart em { display:block; font-style:normal; font-size:.7rem; color:var(--gray); letter-spacing:.08em; }
.gun-kart b { display:block; font-family:"Bebas Neue",Impact,sans-serif; font-size:2rem; line-height:1.1; margin:4px 0; }
.gun-kart small { display:block; font-size:.68rem; color:var(--gray); }
.gun-kart.secili { background:var(--vurgu); border-color:var(--vurgu); }
.gun-kart.secili em,.gun-kart.secili small { color:rgba(255,255,255,.85); }
.saat-izgara { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:9px; }
.saat-dugme { padding:14px 0; background:var(--surface); border:1px solid var(--line); color:var(--white);
font-size:.94rem; font-weight:600; transition:.16s; }
.saat-dugme:hover { border-color:#666; }
.saat-dugme.secili { background:var(--vurgu); border-color:var(--vurgu); }
.randevu-alanlar { display:grid; grid-template-columns:1fr; gap:14px; }
/* Hizmet seçimi: açılır liste değil, dokunulabilir etiketler. Telefonda
listeyi açıp kapamak fazladan iki dokunuş demekti. */
.hizmet-secim { display:flex; flex-wrap:wrap; gap:10px; }
.hizmet-tik input { position:absolute; opacity:0; pointer-events:none; }
.hizmet-tik span { display:inline-flex; align-items:center; gap:10px; padding:13px 17px;
background:var(--surface); border:1px solid var(--line); font-size:.92rem; transition:.16s; cursor:pointer; }
.hizmet-tik span em { font-style:normal; color:var(--gray); font-size:.82rem; }
.hizmet-tik input:checked + span { background:var(--vurgu); border-color:var(--vurgu); }
.hizmet-tik input:checked + span em { color:rgba(255,255,255,.85); }
.hizmet-tik input:focus-visible + span { outline:2px solid var(--white); outline-offset:2px; }
.randevu-alanlar .field.full { grid-column:1/-1; }
.randevu-form .consent { display:flex; gap:10px; align-items:flex-start; margin:26px 0 18px;
font-size:.82rem; color:var(--gray); line-height:1.55; }
.randevu-form .submit { width:100%; padding:20px; }
.randevu-kapali { padding:44px; background:var(--surface); border:1px solid var(--line); text-align:center; }
.randevu-kapali b { display:block; font-size:1.1rem; margin-bottom:20px; }
@media(max-width:900px){
.berber-hero { grid-template-columns:1fr; }
.berber-hero .hero-visual { display:none; }
.konum { grid-template-columns:1fr; gap:32px; }
.randevu-alanlar { grid-template-columns:1fr; }
.bolum { padding:64px var(--gutter); }
.fiyat-satir { grid-template-columns:1fr auto; }
.fiyat-satir em { display:none; }
}
/* Makas imleci ---------------------------------------------------- */
/* Gerçek imleç yalnızca makas kurulduğunda gizleniyor; JS çalışmazsa
kullanıcı imleçsiz kalmasın. */
body.makas-aktif,
body.makas-aktif a,
body.makas-aktif button { cursor:none; }
body.makas-aktif input,
body.makas-aktif textarea,
body.makas-aktif select,
body.makas-aktif iframe { cursor:auto; }
.makas-imlec { position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
color:var(--vurgu); margin:-22px 0 0 -22px; transition:opacity .18s ease; will-change:transform;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.makas-imlec.gizli { opacity:0; }
/* Ağızlar perçinden dönüyor. transform-origin viewBox koordinatında
verilebilsin diye transform-box:fill-box değil, doğrudan SVG birimi. */
.makas-imlec .agiz-sol,
.makas-imlec .agiz-sag { transform-origin:32px 34px; transition:transform .12s cubic-bezier(.4,0,.3,1); }
/* Duruşta hafif açık, tıkta kapanıyor: kesme hissi buradan geliyor. */
.makas-imlec .agiz-sol { transform:rotate(-7deg); }
.makas-imlec .agiz-sag { transform:rotate(7deg); }
.makas-imlec.kesiyor .agiz-sol { transform:rotate(4deg); }
.makas-imlec.kesiyor .agiz-sag { transform:rotate(-4deg); }
/* Berber şeridi (barber pole) — bölüm ayraçlarında ince bir dokunuş */
.berber-serit { height:5px; background:repeating-linear-gradient(115deg,
var(--vurgu) 0 12px, #fff 12px 24px, #1b60c9 24px 36px, #fff 36px 48px);
opacity:.85; }
/* Ajanstone imzası ------------------------------------------------ */
.ajanstone-imza { display:flex; align-items:center; justify-content:center; gap:9px;
padding:26px var(--gutter); border-top:1px solid var(--line); background:#070707;
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#5e5e5e; }
.ajanstone-imza a { color:#8f8f8f; transition:color .2s; }
.ajanstone-imza a:hover { color:var(--vurgu); }
.ajanstone-imza i { width:5px; height:5px; background:var(--vurgu); border-radius:50%; font-style:normal; }
/* Berber direği --------------------------------------------------- */
/* Fotoğraf yüklenmediğinde hero boş kalmasın diye. Dönen şerit gerçek
berber direğindeki gibi yukarı akıyor. */
.berber-direk { position:absolute; right:14%; top:50%; transform:translateY(-50%);
width:96px; display:flex; flex-direction:column; align-items:center; }
.direk-baslik,.direk-taban { width:96px; height:26px; border-radius:6px;
background:linear-gradient(180deg,#d8d8d8,#8e8e8e 45%,#5c5c5c); box-shadow:0 6px 18px rgba(0,0,0,.45); }
.direk-govde { width:74px; height:min(46vh,420px); margin:6px 0; border-radius:38px; overflow:hidden;
background:#fff; box-shadow:inset 0 0 22px rgba(0,0,0,.35),0 14px 44px rgba(0,0,0,.5); position:relative; }
.direk-govde i { position:absolute; inset:-60% 0; display:block;
background:repeating-linear-gradient(115deg,
var(--vurgu) 0 22px, #fff 22px 44px, #1b60c9 44px 66px, #fff 66px 88px);
animation:direk-don 3.4s linear infinite; }
@keyframes direk-don { from { transform:translateY(0); } to { transform:translateY(-88px); } }
@media(prefers-reduced-motion:reduce){ .direk-govde i { animation:none; } }
/* Yıldızlar: dolu satır, puana göre kırpılıyor -------------------- */
.yildiz-olcek { position:relative; display:inline-block; line-height:1; font-size:1.05rem; letter-spacing:.12em; }
.yildiz-olcek i { font-style:normal; }
.yildiz-bos { color:#4a4a4a; }
.yildiz-dolu { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap;
width:var(--dolu,0%); color:#f5b301; }
/* Hero'daki milimetrik ızgara deseni kaldırıldı: ajans sitesinde
"koordinat" havası veriyordu, kuaför sitesinde sayfayı kaplayan artı
işaretleri gibi duruyor. */
.hero::before { display:none; }
/* Fotoğraflı hero: tam genişlik arka plan --------------------------- */
/* Fotoğraf sağdaki sütunda küçük bir kart olarak duruyordu; artık bütün
bölümü kaplıyor ve yazı üstünde. */
.hero-fotolu { grid-template-columns:1fr; align-items:end; padding-bottom:clamp(56px,9vh,110px); }
.hero-zemin { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-zemin img { width:100%; height:100%; object-fit:cover; object-position:center 35%; filter:contrast(1.06) saturate(1.05); }
/* İki katmanlı karartma: alttan yukarı koyu geçiş yazıyı taşır, hafif
genel karartma da fotoğrafın parlak bölgelerini bastırır. */
.hero-zemin::after { content:""; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.12) 42%,rgba(10,10,10,.82) 100%),
linear-gradient(90deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.28) 48%,rgba(10,10,10,0) 78%); }
.hero-fotolu .hero-copy { position:relative; z-index:2; max-width:760px; }
.hero-fotolu h1 { margin:22px 0 16px; }
.hero-metin { max-width:520px; color:#d2d2d2; line-height:1.65; font-size:.95rem; margin:0 0 26px; }
.hero-fotolu .hero-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.hero-fotolu .hero-saat { margin-top:24px; }
@media(max-width:900px){
.hero-fotolu { padding-top:130px; }
.hero-zemin img { object-position:center 30%; }
}
/* Header ---------------------------------------------------------- */
/* Tepede siyah zemin (logo ve menü fotoğrafın üstünde kaybolmasın),
sayfa kaydırılınca beyaza dönüyor ve yazılar koyulaşıyor. */
.site-header { position:fixed; background:var(--black); border-bottom:1px solid var(--line);
transition:background .28s ease, color .28s ease, border-color .28s ease; }
.site-header.is-scrolled { background:var(--light); color:var(--black);
border-bottom-color:rgba(0,0,0,.12); box-shadow:0 8px 30px rgba(0,0,0,.18); }
.site-header.is-scrolled .brand span { color:var(--black); }
.site-header.is-scrolled .desktop-nav a { color:var(--black); }
.site-header.is-scrolled .desktop-nav a:hover { color:var(--vurgu); }
.site-header.is-scrolled .menu-button span { background:var(--black); }
/* Header artık sabit ve opak: hero'nun üstüne binmesin diye pay bırakılıyor. */
.hero { padding-top:calc(86px + clamp(46px,7vh,90px)); }
@media(max-width:760px){ .hero { padding-top:calc(86px + 34px); } }
/* Hizmet kartları -------------------------------------------------- */
/* Sabit üç sütun: auto-fit ekran genişliğine göre 4+2 gibi yarım satır
bırakıyordu. Üçe bölünce 6 hizmet 3+3, 9 hizmet 3+3+3 — hep tam satır. */
.fiyat-kartlar { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:1000px){ .fiyat-kartlar { grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .fiyat-kartlar { grid-template-columns:1fr; } }
.fiyat-kart { position:relative; display:flex; flex-direction:column; padding:26px 24px 22px;
background:var(--surface); border:1px solid var(--line); transition:border-color .2s, transform .2s; }
.fiyat-kart:hover { border-color:var(--vurgu); transform:translateY(-3px); }
.fiyat-kart.one-cikan { border-color:var(--vurgu); }
.kart-rozet { position:absolute; top:-1px; right:-1px; background:var(--vurgu); color:var(--vurgu-yazi);
font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; }
.fiyat-kart b { font-size:1.12rem; font-weight:700; }
.kart-aciklama { display:block; color:var(--gray); font-size:.86rem; line-height:1.55; margin-top:8px; }
.kart-alt { display:flex; align-items:baseline; gap:10px; margin-top:auto; padding-top:20px; }
.kart-alt strong { font-family:"Bebas Neue",Impact,sans-serif; font-size:2.3rem; line-height:1;
letter-spacing:.02em; color:var(--vurgu); }
.kart-alt em { font-style:normal; color:var(--gray); font-size:.78rem; letter-spacing:.08em; }
/* ==================================================================
TARZLAR — aynı içerik, beş farklı görünüm
Hepsi aynı değişken setini yeniden tanımlıyor; yapı değişmiyor.
Böylece yeni tarz eklemek yeni bir HTML değil, yeni bir renk/tipografi
bloğu yazmak demek. Panelden seçilir, ?tarz=… ile anında denenir.
================================================================== */
/* --- 1berber · Siyah & Pirinç (varsayılan) --- */
/* :root'taki değerler bu tarzı tanımlıyor, ek kurala gerek yok. */
/* --- 2berber · Beyaz Minimal --- */
body.tarz-2berber { --black:#fbfaf8; --surface:#fff; --white:#111; --light:#111;
--gray:#6b6b6b; --line:#e3e0d9; --vurgu:#1a1a1a; --vurgu-koyu:#000; --vurgu-yazi:#fff; }
body.tarz-2berber { background:#fbfaf8; color:#111; }
body.tarz-2berber .site-header { background:#fbfaf8; border-bottom-color:#e3e0d9; }
body.tarz-2berber .site-header.is-scrolled { background:#111; color:#fff; }
body.tarz-2berber .site-header.is-scrolled .brand span,
body.tarz-2berber .site-header.is-scrolled .desktop-nav a { color:#fff; }
body.tarz-2berber .hero h1 { font-weight:400; letter-spacing:-.03em; }
body.tarz-2berber .hero-zemin::after {
background:linear-gradient(180deg,rgba(251,250,248,.9) 0%,rgba(251,250,248,.35) 45%,rgba(251,250,248,.95) 100%),
linear-gradient(90deg,rgba(251,250,248,.96) 0%,rgba(251,250,248,.45) 52%,rgba(251,250,248,0) 82%); }
body.tarz-2berber .fiyat-kart,
body.tarz-2berber .yorum,
body.tarz-2berber .ekip-kart { background:#fff; border-color:#e3e0d9; }
body.tarz-2berber .kart-alt strong { color:#111; }
body.tarz-2berber .ajanstone-imza { background:#f2efe9; border-top-color:#e3e0d9; color:#8a8a8a; }
body.tarz-2berber .konum-harita iframe { filter:none; }
body.tarz-2berber .berber-serit { opacity:.5; }
/* --- 3berber · Vintage Krem --- */
body.tarz-3berber { --black:#f4ece0; --surface:#efe4d4; --white:#2a1d14; --light:#2a1d14;
--gray:#7c6754; --line:#ddcdb6; --vurgu:#7d2b2b; --vurgu-koyu:#9c3636; --vurgu-yazi:#f4ece0; }
body.tarz-3berber { background:#f4ece0; color:#2a1d14; }
body.tarz-3berber .site-header { background:#2a1d14; }
body.tarz-3berber .site-header .brand span,
body.tarz-3berber .site-header .desktop-nav a { color:#f4ece0; }
body.tarz-3berber .site-header.is-scrolled { background:#f4ece0; }
body.tarz-3berber .site-header.is-scrolled .brand span,
body.tarz-3berber .site-header.is-scrolled .desktop-nav a { color:#2a1d14; }
body.tarz-3berber .hero-zemin img { filter:sepia(.42) contrast(1.05) saturate(.88); }
body.tarz-3berber .hero-zemin::after {
background:linear-gradient(180deg,rgba(244,236,224,.86) 0%,rgba(244,236,224,.3) 45%,rgba(244,236,224,.95) 100%),
linear-gradient(90deg,rgba(244,236,224,.94) 0%,rgba(244,236,224,.4) 55%,rgba(244,236,224,0) 84%); }
body.tarz-3berber .bolum-bas h2,
body.tarz-3berber .hero h1 { text-transform:uppercase; }
body.tarz-3berber .fiyat-kart { border-width:2px; }
body.tarz-3berber .konum-harita iframe { filter:sepia(.3); }
body.tarz-3berber .ajanstone-imza { background:#2a1d14; border-top-color:#2a1d14; }
/* --- 4berber · Gece Mavisi & Bakır --- */
body.tarz-4berber { --black:#0c1420; --surface:#131e2e; --vurgu:#c0703a; --vurgu-koyu:#d8834a;
--vurgu-yazi:#0c1420; --line:#22303f; --gray:#8fa0b3; --light:#eef3f8; }
body.tarz-4berber { background:#0c1420; }
body.tarz-4berber .hero-zemin img { filter:saturate(.8) hue-rotate(-8deg) contrast(1.08); }
body.tarz-4berber .hero-zemin::after {
background:linear-gradient(180deg,rgba(12,20,32,.6) 0%,rgba(12,20,32,.15) 42%,rgba(12,20,32,.9) 100%),
linear-gradient(90deg,rgba(12,20,32,.9) 0%,rgba(12,20,32,.3) 50%,rgba(12,20,32,0) 80%); }
body.tarz-4berber .berber-serit { background:repeating-linear-gradient(115deg,
var(--vurgu) 0 12px,#eef3f8 12px 24px,#1b3d63 24px 36px,#eef3f8 36px 48px); }
/* --- 5berber · Yüksek Kontrast --- */
/* Renk yok: yalnızca siyah, beyaz ve tipografi. En "pahalı" duran tarz. */
body.tarz-5berber { --black:#000; --surface:#0d0d0d; --vurgu:#fff; --vurgu-koyu:#e6e6e6;
--vurgu-yazi:#000; --line:#333; --gray:#9a9a9a; }
body.tarz-5berber .hero h1 { font-size:clamp(4.4rem,11vw,11rem); line-height:.82; }
body.tarz-5berber .hero-zemin img { filter:grayscale(1) contrast(1.2); }
body.tarz-5berber .yildiz-dolu { color:#fff; }
body.tarz-5berber .berber-serit { background:repeating-linear-gradient(115deg,#fff 0 14px,#000 14px 28px); }
body.tarz-5berber .fiyat-kart:hover { border-color:#fff; }
body.tarz-5berber .kart-rozet { background:#fff; color:#000; }
/* Açık tarzlarda kontrast düzeltmeleri ------------------------------ */
/* Düğme, yazı ve alt bilgi renkleri koyu zemine göre yazılmıştı; açık
zeminli tarzlarda okunmuyordu. */
body.tarz-2berber .button,
body.tarz-3berber .button { color:var(--white); border-color:rgba(0,0,0,.28); }
body.tarz-2berber .button.primary,
body.tarz-3berber .button.primary { color:var(--vurgu-yazi); border-color:var(--vurgu); }
body.tarz-2berber .button.ghost:hover,
body.tarz-3berber .button.ghost:hover { border-color:var(--white); }
body.tarz-2berber .hero-metin,
body.tarz-3berber .hero-metin,
body.tarz-2berber .hero-saat,
body.tarz-3berber .hero-saat { color:var(--gray); }
body.tarz-2berber .google-puan b,
body.tarz-3berber .google-puan b { color:var(--white); }
body.tarz-2berber .site-footer,
body.tarz-3berber .site-footer { color:var(--white); }
body.tarz-2berber .yildiz-bos,
body.tarz-3berber .yildiz-bos { color:#c9c4ba; }
body.tarz-2berber .lead-dock,
body.tarz-3berber .lead-dock { background:var(--white); }
body.tarz-2berber .lead-dock span,
body.tarz-3berber .lead-dock span { color:var(--black); }
/* Logo yazısı header'ın kendi rengini almalı: header zemini sayfa
zemininden farklı olan tarzlarda (3berber koyu, 2berber kaydırınca
koyu) markanın ilk parçası zemine karışıyordu. */
.site-header { color:var(--white); }
.site-header .brand,
.site-header .brand span { color:inherit; }
.site-header .brand i { color:var(--vurgu); }
body.tarz-3berber .site-header { color:#f4ece0; }
body.tarz-3berber .site-header.is-scrolled { color:#2a1d14; }
body.tarz-2berber .site-header { color:#111; }
body.tarz-2berber .site-header.is-scrolled { color:#fff; }
/* Galeri: 3'lü iki sıra, yatay kare -------------------------------- */
/* Altı kare, üçerli iki satır. Yatay oranda duruyorlar; object-fit:cover
+ object-position:center fotoğrafı ortadan kırpar, en-boy oranı
bozulmaz, yalnızca kenarlar kesilir. */
.galeri-izgara { grid-template-columns:repeat(3,1fr); gap:12px; }
.galeri-kare { aspect-ratio:3/2; cursor:pointer; }
.galeri-kare img { object-position:center center; }
@media(max-width:1100px){
/* Dar ekranda sıkıştırmak yerine yana kaydırılan tek şerit. */
.galeri-izgara { display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
padding-bottom:10px; -webkit-overflow-scrolling:touch; }
.galeri-kare { flex:0 0 76%; scroll-snap-align:start; }
}
/* ==================================================================
SOHBET BOTU
Sabit alt çubuğun (lead-dock) üstünde duruyor; ikisi çakışmasın diye
yükseklik payı bırakıldı.
================================================================== */
.bot-dugme { position:fixed; right:var(--gutter); bottom:86px; z-index:80; display:flex; align-items:center;
gap:10px; padding:13px 18px 13px 14px; border:0; border-radius:40px; background:var(--vurgu);
color:var(--vurgu-yazi); font-size:.8rem; font-weight:700; letter-spacing:.06em;
box-shadow:0 12px 34px rgba(0,0,0,.45); transition:transform .2s ease; }
.bot-dugme:hover { transform:translateY(-2px); }
.bot-dugme-ikon { font-size:1.15rem; line-height:1; }
.bot { position:fixed; right:var(--gutter); bottom:86px; z-index:90; width:min(360px,calc(100vw - 2*var(--gutter)));
max-height:min(620px,calc(100vh - 150px)); display:flex; flex-direction:column; overflow:hidden;
background:var(--surface); border:1px solid var(--line); border-radius:16px;
box-shadow:0 26px 70px rgba(0,0,0,.55); opacity:0; transform:translateY(14px) scale(.98);
transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1); }
.bot.acik { opacity:1; transform:none; }
.bot-baslik { display:flex; align-items:center; gap:11px; padding:14px 14px 13px;
border-bottom:1px solid var(--line); background:var(--black); }
.bot-avatar { width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:var(--vurgu);
color:var(--vurgu-yazi); display:grid; place-items:center; font-size:1rem; }
.bot-baslik b { display:block; font-size:.92rem; }
.bot-baslik small { color:var(--gray); font-size:.72rem; }
.bot-kapat { margin-left:auto; border:0; background:none; color:var(--gray); font-size:1.6rem;
line-height:1; padding:0 4px; }
.bot-akis { flex:1 1 auto; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:9px; }
.bot-balon { max-width:86%; padding:11px 14px; border-radius:14px; font-size:.88rem; line-height:1.55;
background:var(--black); border:1px solid var(--line); }
.bot-balon a { color:var(--vurgu); text-decoration:underline; }
.bot-kisi { align-self:flex-end; background:var(--vurgu); color:var(--vurgu-yazi); border-color:var(--vurgu); }
.bot-satir { display:flex; justify-content:space-between; gap:14px; margin-top:7px;
padding-top:7px; border-top:1px solid var(--line); }
.bot-satir em { font-style:normal; color:var(--vurgu); font-weight:700; white-space:nowrap; }
/* Yazıyor göstergesi */
.bot-yaziyor { display:flex; gap:5px; align-items:center; }
.bot-yaziyor i { width:6px; height:6px; border-radius:50%; background:var(--gray);
animation:bot-zipla 1s infinite ease-in-out; }
.bot-yaziyor i:nth-child(2){ animation-delay:.15s } .bot-yaziyor i:nth-child(3){ animation-delay:.3s }
@keyframes bot-zipla { 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-4px); opacity:1 } }
@media(prefers-reduced-motion:reduce){ .bot-yaziyor i { animation:none } }
.bot-secenekler { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:7px; padding:12px 14px 14px;
border-top:1px solid var(--line); max-height:190px; overflow-y:auto; }
.bot-secenek { padding:9px 13px; border:1px solid var(--line); border-radius:20px; background:transparent;
color:var(--white); font-size:.82rem; transition:.15s; }
.bot-secenek:hover { border-color:var(--vurgu); color:var(--vurgu); }
.bot-secenek-ana { background:var(--vurgu); border-color:var(--vurgu); color:var(--vurgu-yazi); font-weight:700; }
.bot-secenek-ana:hover { color:var(--vurgu-yazi); }
.bot-form { display:grid; gap:8px; width:100%; }
.bot-form input { padding:11px 13px; background:var(--black); border:1px solid var(--line);
border-radius:10px; color:var(--white); font-size:.88rem; }
.bot-form input:focus { outline:none; border-color:var(--vurgu); }
.bot-form button { padding:12px; border:0; border-radius:10px; background:var(--vurgu);
color:var(--vurgu-yazi); font-weight:700; font-size:.84rem; letter-spacing:.05em; }
@media(max-width:760px){
.bot, .bot-dugme { bottom:78px; }
.bot { max-height:calc(100vh - 140px); }
.bot-dugme-yazi { display:none; }
.bot-dugme { padding:15px; border-radius:50%; }
}
/* ==================================================================
MAKASMAN — botu açan berber karakteri
Renkler tarzdan geliyor: ten ve saç sabit, önlük/makas vurgu rengini
alıyor. Böylece beş tarzda da yabancı durmuyor.
================================================================== */
/* Alt sabit çubuğun (lead-dock) üstünde dursun: 70px'de ayakları çubuğa
giriyordu. */
.makasman { position:fixed; right:calc(var(--gutter) - 6px); bottom:96px; z-index:80;
border:0; background:none; padding:0; line-height:0; cursor:pointer;
filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));
animation:mm-suzul .6s cubic-bezier(.2,.9,.3,1) both; }
@keyframes mm-suzul { from { transform:translateY(30px); opacity:0 } to { transform:none; opacity:1 } }
.makasman:hover { transform:translateY(-4px); transition:transform .25s ease; }
.mm-ten { fill:#e8b98f; }
.mm-sac { fill:#241c17; }
.mm-kil { stroke:#241c17; stroke-width:3; stroke-linecap:round; fill:none; }
.mm-biyik { fill:#241c17; }
.mm-goz { fill:#241c17; }
.mm-agiz { stroke:#8a5b45; stroke-width:2.4; stroke-linecap:round; fill:none; }
.mm-onluk { fill:var(--vurgu); }
.mm-yaka { fill:var(--surface); }
.mm-kol { stroke:var(--vurgu); stroke-width:9; stroke-linecap:round; fill:none; }
.mm-makas { stroke:#d8d8dc; stroke-width:4; stroke-linecap:round; fill:none; }
/* Göz kırpma: 4 saniyede bir, çok kısa. */
.mm-gozler { animation:mm-kirp 4.2s infinite; transform-origin:60px 54px; }
@keyframes mm-kirp { 0%,95%,100% { transform:scaleY(1) } 97% { transform:scaleY(.08) } }
/* Makas ağızları: normalde hafif açık, tıklayınca kapanıyor. */
.mm-agiz-sol,.mm-agiz-sag { transform-origin:104px 122px; transition:transform .13s cubic-bezier(.4,0,.3,1); }
.mm-agiz-sol { transform:rotate(-8deg); }
.mm-agiz-sag { transform:rotate(8deg); }
.makasman:hover .mm-agiz-sol,
.makasman.kesiyor .mm-agiz-sol { transform:rotate(5deg); }
.makasman:hover .mm-agiz-sag,
.makasman.kesiyor .mm-agiz-sag { transform:rotate(-5deg); }
/* Konuşma baloncuğu: bir kez, birkaç saniye sonra. */
.makasman-balon { position:absolute; right:calc(100% + 10px); bottom:96px; white-space:nowrap;
padding:10px 14px; border-radius:14px 14px 2px 14px; background:var(--vurgu); color:var(--vurgu-yazi);
font-size:.8rem; font-weight:700; line-height:1.2;
animation:mm-balon .35s cubic-bezier(.2,.9,.3,1) both; }
@keyframes mm-balon { from { transform:translateY(6px) scale(.9); opacity:0 } to { transform:none; opacity:1 } }
@media(prefers-reduced-motion:reduce){
.makasman,.mm-gozler,.makasman-balon { animation:none; }
}
@media(max-width:760px){
.makasman { bottom:86px; }
.makasman-govde { width:86px; height:108px; }
.makasman-balon { bottom:70px; font-size:.72rem; }
}
/* Form alanları: kutu ------------------------------------------------
İki sorun vardı: yazı rengi --black'ti, koyu zeminde yazdığın
görünmüyordu; bir de alanlar tek çizgiden ibaretti. Artık çerçeveli
kutu ve zeminle aynı kontrastta yazı. */
.field label,
.randevu-alanlar .field { color:var(--white); }
.field input,
.field select,
.field textarea,
.randevu-alanlar input,
.randevu-alanlar select,
.randevu-alanlar textarea {
background:var(--surface);
color:var(--white);
border:1px solid var(--line);
border-radius:10px;
padding:14px 15px;
outline:none;
}
.field input::placeholder,
.field textarea::placeholder { color:var(--gray); opacity:1; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color:var(--vurgu); box-shadow:0 0 0 3px color-mix(in srgb,var(--vurgu) 22%,transparent); }
/* Tarayıcının otomatik doldurma sarısı koyu temada okunmuyor. */
.field input:-webkit-autofill {
-webkit-text-fill-color:var(--white);
-webkit-box-shadow:0 0 0 40px var(--surface) inset;
}
.randevu-form .field { gap:7px; }
.randevu-form .field select option { background:var(--surface); color:var(--white); }
/* Logo biraz büyütüldü: "KUAFÖR BA&HA." iki kelime olunca 2rem'de
header içinde kaybolmuştu. */
.brand { font-size:2.45rem; }
.brand-compact { font-size:1.45rem; }
@media(max-width:760px){ .brand { font-size:1.75rem; } }
/* ==================================================================
MOBİLDE YATAY KAYMA DÜZELTMESİ
Alt bilgideki başlık clamp(5rem,10vw,11rem) ile ölçekleniyordu; 375px
ekranda 80px punto tek satıra sığmayınca .footer-top satırı taşıyor ve
yanındaki yuvarlak ok ekranın dışına çıkıyordu. Sayfa 419px genişliğe
uzayıp sağa sola kayıyordu (alt çubuk ve sabit öğeler de bu yüzden
ekrandan taşmış görünüyordu).
Çözüm: dar ekranda başlık ile oku alt alta almak ve puntoyu ekrana
göre sınırlamak. Ayrıca uzun kelimeler taşırmasın diye kırılma izni.
================================================================== */
@media(max-width:760px){
.footer-top { flex-direction:column; align-items:flex-start; gap:26px; padding-bottom:46px; }
.footer-top h2 { font-size:clamp(2.6rem,13vw,4.2rem); margin-top:18px; overflow-wrap:anywhere; }
.footer-top .round-link { align-self:flex-end; }
/* Emniyet kemeri: hiçbir öğe ekranı aşmasın. */
html { overflow-x:hidden; }
}
/* ==================================================================
FİYAT ŞERİDİ — dikey kartlar, soldan sağa
Izgara yerine kaydırmalı şerit: hizmet sayısı kaç olursa olsun satır
yarım kalmıyor, telefonda da aynı davranıyor.
================================================================== */
.serit { position:relative; }
.serit-yol { display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth;
scroll-snap-type:x mandatory; padding:4px 2px 14px; scrollbar-width:none; }
.serit-yol::-webkit-scrollbar { display:none; }
.serit-yol.fiyat-kartlar { grid-template-columns:none; }
.serit-yol .fiyat-kart { flex:0 0 240px; scroll-snap-align:start; min-height:260px;
display:flex; flex-direction:column; justify-content:space-between; }
.kart-ust b { display:block; font-size:1.1rem; font-weight:700; }
.serit-yol .kart-alt { padding-top:26px; }
/* Oklar: yalnızca taşma varsa görünür (site.js açıp kapatıyor). */
.serit-ok { position:absolute; top:50%; transform:translateY(-50%); z-index:5;
width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
background:var(--black); color:var(--white); font-size:1.5rem; line-height:1;
display:none; place-items:center; transition:.18s; }
.serit.tasiyor .serit-ok { display:grid; }
.serit-ok:hover { background:var(--vurgu); color:var(--vurgu-yazi); border-color:var(--vurgu); }
.serit-ok[disabled] { opacity:.25; pointer-events:none; }
.serit-sol { left:-18px; }
.serit-sag { right:-18px; }
@media(max-width:900px){ .serit-sol{left:-4px} .serit-sag{right:-4px} }
/* ==================================================================
YORUM BANDI — çift sıra, ters yönlerde akıyor
================================================================== */
.yorum-bant { display:grid; gap:14px; }
.yorum-sira { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.yorum-akis { display:flex; gap:14px; width:max-content; }
/* Liste iki kez basıldığı için -%50'de başa dönmek dikişsiz oluyor. */
.yorum-ust .yorum-akis { animation:yorum-sol 46s linear infinite; }
.yorum-alt .yorum-akis { animation:yorum-sag 52s linear infinite; }
@keyframes yorum-sol { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes yorum-sag { from { transform:translateX(-50%) } to { transform:translateX(0) } }
/* Okumak isteyen üstüne gelince duruyor. */
.yorum-bant:hover .yorum-akis { animation-play-state:paused; }
.yorum-bant .yorum { flex:0 0 300px; margin:0; }
@media(prefers-reduced-motion:reduce){
.yorum-akis { animation:none; }
.yorum-sira { overflow-x:auto; }
}
@media(max-width:760px){
.yorum-bant .yorum { flex:0 0 250px; }
.serit-yol .fiyat-kart { flex:0 0 210px; }
}
.bot-not { display:block; color:var(--gray); font-size:.8rem; margin-top:2px; }
/* Ustalar ---------------------------------------------------------- */
.usta-yetenek { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:10px; }
.usta-yetenek i { font-style:normal; font-size:.68rem; padding:3px 8px; border-radius:20px;
border:1px solid var(--line); color:var(--gray); }
.usta-secim { display:flex; flex-wrap:wrap; gap:10px; }
.usta-tik input { position:absolute; opacity:0; pointer-events:none; }
.usta-tik span { display:flex; flex-direction:column; gap:2px; padding:12px 16px; cursor:pointer;
background:var(--surface); border:1px solid var(--line); border-radius:10px; transition:.16s; }
.usta-tik b { font-size:.92rem; }
.usta-tik small { color:var(--gray); font-size:.74rem; }
.usta-tik input:checked + span { border-color:var(--vurgu); background:color-mix(in srgb,var(--vurgu) 14%,var(--surface)); }
.usta-tik input:focus-visible + span { outline:2px solid var(--white); outline-offset:2px; }
.gun-bos { color:var(--gray); font-size:.88rem; padding:14px 2px; margin:0; }
/* ==================================================================
HEADER — tek yükseklik, tek renk kuralı
İki sorun vardı:
1) Ana sayfaya özel eski kural (.home-page .site-header.is-scrolled)
benim kuralımdan daha güçlüydü; kaydırınca zemin koyu kalıyor ama
yazı koyuya dönüyordu — menü görünmez oluyordu.
2) Sabit hâlin yüksekliği 70px'e düşüyordu, üstteki 86px ile
oynuyordu; kaydırırken başlık zıplıyordu.
Artık yükseklik tek değişkenden geliyor ve iki hâl de aynı.
================================================================== */
:root { --header-h:91px; }
@media(max-width:760px){ :root { --header-h:76px; } }
.site-header,
.home-page .site-header,
.site-header.is-scrolled,
.home-page .site-header.is-scrolled { height:var(--header-h); }
/* Kaydırılmış hâl: açık zemin + koyu yazı. Eski kuralı yenmek için
aynı özgüllükte (.home-page ile) yazıldı. */
.home-page .site-header.is-scrolled,
.site-header.is-scrolled {
background:var(--light);
color:var(--black);
border-color:rgba(0,0,0,.12);
}
.home-page .site-header.is-scrolled .brand,
.home-page .site-header.is-scrolled .brand span,
.home-page .site-header.is-scrolled .desktop-nav a { color:var(--black); }
.home-page .site-header.is-scrolled .brand i { color:var(--vurgu); }
.home-page .site-header.is-scrolled .desktop-nav a:hover { color:var(--vurgu); }
.home-page .site-header.is-scrolled .menu-button span { background:var(--black); }
.home-page .site-header.is-scrolled .header-cta { color:var(--vurgu-yazi); }
/* Hero'nun üst boşluğu başlığın gerçek yüksekliğini izliyor. */
.hero { padding-top:calc(var(--header-h) + clamp(46px,7vh,90px)); }
@media(max-width:760px){ .hero { padding-top:calc(var(--header-h) + 34px); } }
/* Açık zeminli tarzlarda kaydırılmış başlık koyu olsun ki ayırt edilsin */
body.tarz-2berber .home-page .site-header.is-scrolled,
body.tarz-2berber .site-header.is-scrolled { background:#111; color:#fff; }
body.tarz-2berber .home-page .site-header.is-scrolled .brand,
body.tarz-2berber .home-page .site-header.is-scrolled .brand span,
body.tarz-2berber .home-page .site-header.is-scrolled .desktop-nav a { color:#fff; }
body.tarz-3berber .home-page .site-header.is-scrolled,
body.tarz-3berber .site-header.is-scrolled { background:#f4ece0; color:#2a1d14; }
body.tarz-3berber .home-page .site-header.is-scrolled .brand,
body.tarz-3berber .home-page .site-header.is-scrolled .brand span,
body.tarz-3berber .home-page .site-header.is-scrolled .desktop-nav a { color:#2a1d14; }
/* ==================================================================
MAKASMAN — PNG sürümü
Elle çizilen SVG kaldırıldı; karakter artık assets/botbarber.png.
Göz kırpma ve makas animasyonu SVG parçalarına bağlıydı, onların
yerine görselin kendisine küçük bir "selam verme" hareketi kondu:
tıklayınca hafifçe eğilip düzeliyor.
================================================================== */
.makasman-govde { width:150px; height:auto; display:block;
filter:drop-shadow(0 14px 22px rgba(0,0,0,.45));
transition:transform .18s cubic-bezier(.3,.9,.4,1); transform-origin:bottom center; }
.makasman:hover .makasman-govde { transform:translateY(-4px) rotate(-2deg); }
.makasman.kesiyor .makasman-govde { transform:translateY(-2px) rotate(3deg) scale(.97); }
.makasman { filter:none; }
@media(max-width:760px){
.makasman-govde { width:104px; }
}