/* Yusuf Ercan Tattoo — mobile-first premium experience */
.work-reel{color:#fff;background:#0a0a0a;padding:105px 0 90px;overflow:hidden}
.work-reel-head{justify-content:space-between;align-items:end;gap:50px;margin-bottom:42px;display:flex}
.work-reel-head small,.reviews-title>small,.booking-intro>small{color:#ff4651;letter-spacing:.2em;font-size:8px;font-weight:900}
.work-reel-head h2,.reviews-title h2,.booking-intro h2{letter-spacing:-.065em;margin:12px 0 0;font-size:clamp(46px,6vw,78px);line-height:.95}
.work-reel-head>p{color:#ffffff8a;max-width:410px;margin:0;font-size:11px;line-height:1.8}
.work-reel-track{scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:16px;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;overflow-x:auto}
.work-reel-track::-webkit-scrollbar{display:none}
.work-reel-card{scroll-snap-align:start;flex:0 0 min(36vw,440px)}
.work-reel-card figure{aspect-ratio:4/5;background:#171717;position:relative;overflow:hidden}
.work-reel-card img{object-fit:cover;filter:grayscale(.85) contrast(1.08);height:100%;transition:filter .6s,transform 1s cubic-bezier(.2,.8,.2,1)}
.work-reel-card:hover img{filter:grayscale(0);transform:scale(1.035)}
.work-reel-card figcaption{background:linear-gradient(#0000,#000e);grid-template-columns:42px 1fr 25px;align-items:end;padding:85px 20px 20px;display:grid;position:absolute;inset:auto 0 0}
.work-reel-card figcaption span{color:#ff4651;font-size:9px;font-weight:900}
.work-reel-card figcaption b{letter-spacing:.08em;text-transform:uppercase;font-size:9px}
.work-reel-card figcaption i{color:#ff4651;text-align:right;font-style:normal}
.work-reel-progress{background:#ffffff1c;height:1px;margin-top:38px;position:relative}
.work-reel-progress i{background:var(--red);width:25%;height:2px;display:block;position:absolute;top:-1px;left:0;transform-origin:left}
.studio-reviews{color:#fff;background:#121212;padding:110px 0}
.studio-reviews>.section-shell{grid-template-columns:.62fr 1.38fr;gap:80px;display:grid}
.reviews-title{align-self:start;position:sticky;top:30px}
.reviews-title h2{margin:20px 0}
.reviews-title p{color:#ffffff78;font-size:11px}
.reviews-track{grid-template-columns:1fr 1fr;gap:14px;display:grid}
.reviews-track blockquote{border:1px solid #ffffff17;background:#ffffff08;margin:0;padding:30px;transition:border-color .3s,transform .3s}
.reviews-track blockquote:hover{border-color:#b70d187d;transform:translateY(-4px)}
.reviews-track blockquote>div{color:#ff3d49;letter-spacing:.18em;font-size:10px}
.reviews-track blockquote>p{color:#ffffffe0;min-height:85px;font:italic 19px/1.45 var(--font-serif);margin:22px 0 30px}
.reviews-track blockquote footer{background:none;padding:0;grid-template-columns:36px 1fr;column-gap:11px;display:grid}
.reviews-track blockquote footer span{color:#fff;background:var(--red);border-radius:50%;grid-row:span 2;place-items:center;width:36px;height:36px;font-size:10px;font-weight:900;display:grid}
.reviews-track blockquote footer b{letter-spacing:.06em;font-size:9px}
.reviews-track blockquote footer small{color:#ffffff69;letter-spacing:.12em;font-size:6px}
.booking-lab{grid-template-columns:.85fr 1.15fr;gap:80px;padding:115px 0 130px;display:grid}
.booking-intro{align-self:start;position:sticky;top:40px}
.booking-intro h2{margin:22px 0 28px}
.booking-intro>p{color:var(--muted);max-width:440px;font-size:12px;line-height:1.8}
.booking-intro>div{color:#6d6963;align-items:center;gap:9px;margin-top:42px;font-size:7px;font-weight:800;display:flex}
.booking-intro>div span{color:#fff;background:var(--red);border-radius:50%;place-items:center;width:26px;height:26px;display:grid}
.booking-intro>div i{background:var(--line);flex:1;height:1px}
.booking-form{background:#e5e0d8;grid-template-columns:1fr 1fr;gap:20px;padding:42px;display:grid}
.booking-form label{gap:9px;display:grid}
.booking-form label>span{color:#6d6963;letter-spacing:.16em;font-size:7px;font-weight:900}
.booking-form input,.booking-form select,.booking-form textarea{background:#f6f2eb;border:1px solid #00000012;outline:none;width:100%;padding:15px 16px;font-size:12px;transition:border-color .25s,box-shadow .25s}
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:#b70d187a;box-shadow:0 0 0 3px #b70d1812}
.booking-form .full{grid-column:1/-1}
.booking-form .button{cursor:pointer;width:100%}
.booking-form .button span{margin-left:10px}
.booking-form .form-note{color:#77736d;text-align:center;font-size:8px}
.mobile-action-dock{display:none}
.site-header{transition:background .3s,transform .35s,height .3s}
.site-header.is-condensed{position:fixed;background:#080808e8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.site-header.is-hidden{transform:translateY(-110%)}
@media (width<=760px){
 body{padding-bottom:70px}
 .hero{min-height:max(760px,100svh)}
 .hero-content{margin-bottom:86px}
 .hero h1{font-size:clamp(66px,21.5vw,96px)}
 .hero-copy{margin-top:28px;font-size:22px}
 .hero-actions{gap:9px;margin-top:28px}
 .hero-actions .button{min-height:50px}
 .work-reel{padding:78px 0 70px}
 .work-reel-head{align-items:start;display:block;margin-bottom:30px}
 .work-reel-head h2{font-size:52px}
 .work-reel-head>p{margin-top:20px}
 .work-reel-track{gap:10px;padding:0 16px}
 .work-reel-card{flex-basis:78vw}
 .work-reel-card figure{aspect-ratio:4/5.25}
 .work-reel-card img{filter:grayscale(.45)}
 .work-reel-progress{width:calc(100% - 32px);margin-top:25px}
 .studio-reviews{padding:80px 0}
 .studio-reviews>.section-shell{grid-template-columns:1fr;gap:35px}
 .reviews-title{position:static}
 .reviews-title h2{font-size:52px}
 .reviews-track{scrollbar-width:none;scroll-snap-type:x mandatory;display:flex;overflow-x:auto}
 .reviews-track::-webkit-scrollbar{display:none}
 .reviews-track blockquote{scroll-snap-align:start;flex:0 0 88%;padding:25px}
 .reviews-track blockquote>p{min-height:105px}
 .booking-lab{grid-template-columns:1fr;gap:35px;padding:80px 0 95px}
 .booking-intro{position:static}
 .booking-intro h2{font-size:49px}
 .booking-intro>div{display:none}
 .booking-form{grid-template-columns:1fr;padding:25px 18px}
 .booking-form .full{grid-column:auto}
 .mobile-action-dock{z-index:80;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#090909e8;border-top:1px solid #ffffff1c;grid-template-columns:.72fr .72fr 1.56fr;height:68px;padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -12px 35px #0006}
 .mobile-action-dock a{color:#fff;border-right:1px solid #ffffff12;flex-direction:column;justify-content:center;align-items:center;gap:3px;display:flex}
 .mobile-action-dock a i{color:#ff4651;font-style:normal;font-size:15px}
 .mobile-action-dock a span{letter-spacing:.13em;font-size:7px;font-weight:900}
 .mobile-action-dock .dock-primary{background:var(--red);border:0;flex-direction:row;gap:9px}
 .mobile-action-dock .dock-primary i{color:#fff}
 .mobile-action-dock .dock-primary span{font-size:8px}
 .mobile-action-dock.keyboard-open{transform:translateY(110%)}
 .smart-wa{bottom:82px!important}
 .footer-bottom{padding-bottom:8px}
}
@media (width<=370px){.live-logo-frame{flex-basis:50px;width:50px;height:50px}.live-logo-frame img{width:47px;height:47px}.brand-title{font-size:9px!important}.hero h1{font-size:63px}.work-reel-card{flex-basis:82vw}}
.detail-hero{color:#fff;background:#090909;min-height:720px;position:relative;overflow:hidden}
.detail-hero-art{background-position:center;background-size:cover;animation:13s ease-in-out infinite alternate hero-breathe;position:absolute;inset:-3%}
.detail-hero-shade{background:linear-gradient(90deg,#000000f0 0%,#000000a8 48%,#0004 100%);position:absolute;inset:0}
.detail-title{z-index:2;flex-direction:column;justify-content:end;align-items:flex-start;min-height:720px;padding-bottom:90px;display:flex;position:relative}
.detail-title>a,.detail-title>small{letter-spacing:.18em;font-size:8px;font-weight:900}
.detail-title>a{color:#ffffff8a;margin-bottom:auto;padding-top:145px}
.detail-title>small{color:#ff4651}
.detail-title h1{letter-spacing:-.07em;max-width:1000px;margin:20px 0 0;font-size:clamp(60px,8vw,118px);line-height:.88}
.detail-title time{color:#ffffff85;margin-top:25px;font-size:10px}
.detail-price{color:#fff;background:var(--red);margin-top:30px;padding:13px 18px;font-size:24px}
.detail-layout{grid-template-columns:280px 1fr;gap:85px;padding:100px 0;display:grid}
.detail-layout aside{align-self:start;border-top:1px solid var(--line);padding-top:22px;position:sticky;top:120px}
.detail-layout aside>span{color:var(--red);letter-spacing:.17em;font-size:8px;font-weight:900}
.detail-layout aside>p{color:var(--muted);margin:12px 0 28px;font-size:10px}
.rich-copy{max-width:780px;font-size:15px;line-height:1.85}
.rich-copy h1,.rich-copy h2,.rich-copy h3{letter-spacing:-.04em;margin:40px 0 16px;font-weight:700;line-height:1.1}
.rich-copy h1{font-size:42px}.rich-copy h2{font-size:34px}.rich-copy h3{font-size:25px}
.rich-copy p{color:#5e5a54;margin:0 0 22px}.rich-copy ul,.rich-copy ol{color:#5e5a54;margin:20px 0;padding-left:22px}.rich-copy ul{list-style:disc}.rich-copy ol{list-style:decimal}
.rich-copy img{height:auto!important;margin:30px 0}.rich-copy *{max-width:100%}
.detail-gallery{columns:3 280px;column-gap:12px;background:#0a0a0a;padding:12px}
.detail-gallery a{break-inside:avoid;margin-bottom:12px;display:block;overflow:hidden}
.detail-gallery img{filter:grayscale(.7);transition:filter .5s,transform .8s}.detail-gallery a:hover img{filter:grayscale(0);transform:scale(1.025)}
.detail-end{color:#fff;text-align:center;background:#101010;padding:115px 24px}
.detail-end>small{color:#ff4651;letter-spacing:.2em;font-size:8px;font-weight:900}
.detail-end h2{letter-spacing:-.065em;margin:24px 0 36px;font-size:clamp(58px,8vw,100px);line-height:.88}
.detail-empty{min-height:70vh;padding:180px 0 100px}.detail-empty>small{color:var(--red);font-size:12px}.detail-empty h1{letter-spacing:-.06em;margin:20px 0;font-size:clamp(50px,8vw,90px)}.detail-empty p{color:var(--muted);margin-bottom:30px}
@media (width<=760px){
 .detail-hero,.detail-title{min-height:640px}
 .detail-hero-art{background-position:center;animation:none}
 .detail-hero-shade{background:linear-gradient(#0002,#000e)}
 .detail-title{padding-bottom:60px}
 .detail-title>a{padding-top:115px}
 .detail-title h1{font-size:clamp(51px,15vw,72px)}
 .detail-layout{grid-template-columns:1fr;gap:45px;padding:70px 0}
 .detail-layout aside{position:static}
 .rich-copy{font-size:14px}.rich-copy h1{font-size:34px}.rich-copy h2{font-size:29px}.rich-copy h3{font-size:23px}
 .detail-gallery{columns:2 140px;column-gap:8px;padding:8px}.detail-gallery a{margin-bottom:8px}
 .detail-end{padding:90px 20px}.detail-end h2{font-size:62px}
}
@media (prefers-reduced-motion:reduce){.work-reel-track,.reviews-track{scroll-behavior:auto}.work-reel-card img,.detail-hero-art{transition:none;animation:none}}
