/* YOL Living corporate pages — type scale, gutters and columns measured on yolliving.com at 1440 / 1024 / 767 / 479 / 375px. */
.yol-corp{width:calc(100% - 120px);margin:0 auto;padding-bottom:40px;color:var(--yol-ink,#222)}
.yol-corp p{margin:0 0 26px;font-size:16px;line-height:26px}
.yol-corp .yol-corp-kicker{margin:0 0 25px;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:500;font-size:calc(1rem + .3vw);line-height:1.3}
.yol-corp-heading{margin:0 0 25px;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:500;letter-spacing:0;line-height:1.3}
.yol-corp-heading--lg{font-size:calc(1rem + 2vw)}
.yol-corp-heading--md{font-size:calc(1rem + 1.2vw)}

.yol-corp-cover{margin:0 0 72px}
.yol-corp-cover img,.yol-corp-cover .yol-media-placeholder{display:block;width:100%;height:auto}
.yol-corp-cover--bleed{width:100vw;margin-inline:calc(50% - 50vw);margin-bottom:60px}
.yol-corp-media{margin:0}
.yol-corp-media img,.yol-corp-media .yol-media-placeholder{display:block;width:100%;height:auto}
.yol-corp .yol-media-placeholder{min-height:320px;background:#e5e5e5}

/* Image/text rows: columns are vertically centred against each other. */
.yol-corp-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 80px}
.yol-corp-row .yol-corp-copy>:last-child{margin-bottom:0}
.yol-corp-row--copy-img,.yol-corp-row--img-copy{width:82.6%;margin-inline:auto}
.yol-corp-row .yol-corp-copy{width:58.2%}
.yol-corp-row .yol-corp-media{width:37%}
.yol-page--kurucumuzdan-mesaj .yol-corp-row--copy-img{width:91.3%;margin-inline:0}
.yol-page--kurucumuzdan-mesaj .yol-corp-row .yol-corp-copy{width:52.6%}
.yol-page--kurucumuzdan-mesaj .yol-corp-row .yol-corp-media{width:33.5%}
.yol-corp-row--half-img-copy .yol-corp-copy,.yol-corp-row--half-img-copy .yol-corp-media{width:48%}
.yol-corp-row--columns{display:block;margin-bottom:72px}
.yol-corp-row__title{max-width:70%;margin:0 auto 25px;text-align:center}
.yol-corp-columns{display:flex;justify-content:center;align-items:flex-start;gap:4%}
.yol-corp-columns .yol-corp-copy{width:30.6%}

/* Split rows (About): 30.6% label column + 65.3% copy column, top aligned. */
.yol-corp-split{display:grid;grid-template-columns:30.6% 65.3%;column-gap:4.1%;align-items:start;margin:0 0 60px}
.yol-corp-split>.yol-corp-heading{margin:0}
.yol-corp-split .yol-corp-copy>.yol-corp-heading--md{margin-bottom:25px}
.yol-corp-accordion{padding-top:60px}
.yol-corp-accordion .yol-accordion-item,.yol-corp-accordion .yol-accordion-item:last-child{border:0;margin:0 0 20px}
.yol-corp-accordion .yol-accordion-item button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;border:0;background:none;color:inherit;font:500 20px/40px Arial,"Helvetica Neue",sans-serif;text-transform:uppercase;text-align:start;cursor:pointer}
.yol-corp-accordion .yol-accordion-item button b{font:400 18px/1 Arial,sans-serif;transition:transform .3s ease}
.yol-corp-accordion .yol-accordion-item.is-open button b{transform:rotate(90deg)}
.yol-corp-accordion [data-accordion-panel]{padding:10px 80px 6px 0}

/* Teams: 80px gutters; three or four portraits per row, trailing rows centred. */
.yol-corp-team{margin:0;padding:0 0 60px}
.yol-corp-team>.yol-corp-heading{margin-bottom:25px}
.yol-corp-team ul{display:flex;flex-wrap:wrap;justify-content:center;gap:55px 80px;margin:0;padding:0;list-style:none}
.yol-corp-team li{width:calc((100% - 160px) / 3)}
.yol-corp-team--four li{width:calc((100% - 240px) / 4)}
.yol-corp-team figure{margin:0 0 18px;aspect-ratio:1;overflow:hidden;background:#e5e5e5}
.yol-corp-team figure img,.yol-corp-team figure .yol-media-placeholder{display:block;width:100%;height:100%;min-height:0;object-fit:cover}
.yol-corp-team h3{margin:0;font:400 17px/20px Arial,"Helvetica Neue",sans-serif;color:#444}
.yol-corp-team li p{margin:0;font-size:13.33px;line-height:20px;color:#444}

/* Dealer application: 30.6% image beside a 48% two-column form. */
.yol-corp-row--dealer{justify-content:flex-start;gap:4%}
.yol-corp-row--dealer .yol-corp-media{width:30.6%}
.yol-corp-row--dealer .yol-corp-form{width:48%}
.yol-corp-form .yol-ref-form-section{display:block;padding:0}
.yol-corp-form .yol-inquiry__intro{display:none}
.yol-corp-form .yol-form{grid-template-columns:1fr 1fr}

/* Page masthead on corporate pages: 150px top, 130px below the title (110px below a subtitle). */
.yol-reference-page .yol-ref-hero{min-height:0;padding:150px 60px 130px}
.yol-reference-page .yol-ref-hero--subtitle{min-height:0;padding-bottom:110px}
.yol-ref-hero__inner{margin-inline-start:-.7vw}
.yol-ref-hero h1{font-size:8vw;line-height:10vw}
.yol-ref-hero--subtitle .yol-page-hero__excerpt{width:40%;max-width:none;margin:20px 0 0 .7vw;font-size:20px;line-height:26px}
/* Reference forms use 14px fields and a 14px/36px button. */
.yol-reference-page .yol-form input:not([type=checkbox]),.yol-reference-page .yol-form textarea,.yol-reference-product .yol-form input:not([type=checkbox]),.yol-reference-product .yol-form textarea{font-size:14px}
.yol-reference-page .yol-form .yol-button,.yol-reference-product .yol-form .yol-button{min-height:36px;padding:0 30px;font-size:14px;line-height:36px}

@media(max-width:1024px){
  .yol-corp{width:calc(100% - 80px)}
  .yol-corp-row{margin-bottom:60px}
  .yol-corp-cover{margin-bottom:52px}
  .yol-reference-page .yol-ref-hero{padding:120px 40px 130px}
  .yol-reference-page .yol-ref-hero--subtitle{padding-bottom:110px}
  .yol-ref-hero__inner{margin-inline-start:-.7vw}
  .yol-ref-hero h1{font-size:10vw;line-height:10vw}
  .yol-ref-hero--subtitle .yol-page-hero__excerpt{width:50%;font-size:14px;line-height:20px}
}
@media(max-width:767px){
  .yol-corp{width:calc(100% - 60px)}
  .yol-corp-heading--lg{font-size:24px;line-height:31.2px}
  .yol-corp-heading--md{font-size:20px;line-height:26px}
  .yol-corp .yol-corp-kicker{font-size:16px;line-height:20.8px}
  .yol-corp-row,.yol-corp-row--copy-img,.yol-corp-row--img-copy,.yol-corp-row--half-img-copy,.yol-corp-row--dealer,.yol-page--kurucumuzdan-mesaj .yol-corp-row--copy-img{display:block;width:100%;margin:0 0 80px}
  .yol-corp-row .yol-corp-copy,.yol-corp-row .yol-corp-media,.yol-page--kurucumuzdan-mesaj .yol-corp-row .yol-corp-copy,.yol-page--kurucumuzdan-mesaj .yol-corp-row .yol-corp-media,.yol-corp-row--half-img-copy .yol-corp-copy,.yol-corp-row--half-img-copy .yol-corp-media,.yol-corp-row--dealer .yol-corp-media,.yol-corp-row--dealer .yol-corp-form{width:100%}
  .yol-corp-row>*+*{margin-top:20px}
  .yol-corp-cover{margin-bottom:72px}
  .yol-corp-columns{display:block}
  .yol-corp-columns .yol-corp-copy{width:100%}
  .yol-corp-columns .yol-corp-copy+.yol-corp-copy{margin-top:20px}
  .yol-corp-row__title{max-width:none}
  .yol-corp-split{display:block}
  .yol-corp-split>.yol-corp-heading{margin-bottom:25px}
  .yol-corp-accordion{padding-top:0}
  .yol-corp-form .yol-form{grid-template-columns:1fr}
  .yol-reference-page .yol-ref-hero{padding:120px 30px 130px}
  .yol-reference-page .yol-ref-hero--subtitle{padding-bottom:110px}
  .yol-ref-hero h1{font-size:12vw;line-height:12vw}
  .yol-ref-hero--subtitle .yol-page-hero__excerpt{width:100%;margin-inline-start:.7vw}
}
@media(max-width:479px){
  .yol-corp{width:calc(100% - 40px)}
  .yol-corp-team ul{gap:40px 20px}
  .yol-corp-team li,.yol-corp-team--four li{width:calc((100% - 20px) / 2)}
  .yol-reference-page .yol-ref-hero{padding:120px 20px 130px}
  .yol-reference-page .yol-ref-hero--subtitle{padding-bottom:110px}
  .yol-ref-hero h1{font-size:14vw;line-height:14vw}
}

/* Team portraits stay monochrome until hovered, as on the reference. */
.yol-corp-team figure img{filter:grayscale(1);transition:filter .3s ease}
.yol-corp-team li:hover figure img{filter:none}

/* Motion states apply only once yol-reference-260.js has prepared the page (html.yol-motion). */
.yol-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.yol-word>span{display:inline-block}
.yol-motion .yol-word>span{opacity:0;transform:translateY(60px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94);transition-delay:calc(var(--yol-i,0) * 40ms)}
.yol-motion [data-yol-words].is-in .yol-word>span{opacity:1;transform:none}
.yol-fill{-webkit-text-fill-color:rgba(0,0,0,.1);background-image:linear-gradient(#222,#222);background-repeat:no-repeat;background-size:0% 100%;-webkit-background-clip:text;background-clip:text}
.yol-motion [data-yol-fade]{opacity:0;transform:translateY(60px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.yol-motion [data-yol-fade].is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){.yol-corp-accordion .yol-accordion-item button b,.yol-corp-team figure img{transition:none}}

/* Mega menu follows the page tone like the reference: dark over imagery, light panel on light pages. */
.yol-mega-stack.yol-mega-stack--light .yol-mega-panel{background:rgba(0,0,0,.9);color:#fff}
.yol-mega-stack--dark .yol-mega-panel{background:#eee;color:#222;box-shadow:0 14px 28px rgba(0,0,0,.12)}
.yol-mega-stack--dark .yol-mega-panel__rule{background:#111;opacity:1}
body.mega-open .yol-header--dark{color:#202020;background:#eee;box-shadow:none}
body.mega-open .yol-header--dark .yol-brand__logo--black{display:block}
body.mega-open .yol-header--dark .yol-brand__logo--white{display:none}

/* Masthead titles rise out of an invisible baseline on load, as on the reference. */
@keyframes yol-hero-rise{from{opacity:0;transform:translateY(100%);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.yol-ref-hero h1{animation:yol-hero-rise 1s cubic-bezier(.215,.61,.355,1) .2s both}
.yol-ref-hero--collection h1{animation:none}
.yol-ref-hero--collection h1>span{animation:yol-hero-rise 1s cubic-bezier(.215,.61,.355,1) .2s both}
.yol-ref-hero--collection h1>span+span{animation-delay:.3s}
.yol-ref-hero .yol-page-hero__excerpt{animation:yol-hero-rise .7s cubic-bezier(.215,.61,.355,1) .4s both}
@media(prefers-reduced-motion:reduce){.yol-ref-hero h1,.yol-ref-hero--collection h1>span,.yol-ref-hero .yol-page-hero__excerpt{animation:none}}

/* Widest screens (>1966px): 80px gutters, 3vw masthead title, 30% subtitle — as on the reference. */
@media(min-width:1967px){
  .yol-corp{width:calc(100% - 160px)}
  .yol-reference-page .yol-ref-hero{padding:150px 80px 130px}
  .yol-reference-page .yol-ref-hero--subtitle{padding-bottom:110px}
  .yol-ref-hero h1{font-size:3vw;line-height:3vw}
  .yol-ref-hero--subtitle .yol-page-hero__excerpt{width:30%}
}
/* Row images never upscale past their natural size; only covers stretch (reference behaviour). */
.yol-corp-media img,.yol-corp-cover--bleed img{width:auto;max-width:100%}
/* Form fields scale with the viewport above 767px and drop to 14px below. */
.yol-reference-page .yol-form input:not([type=checkbox]),.yol-reference-page .yol-form textarea,.yol-reference-product .yol-form input:not([type=checkbox]),.yol-reference-product .yol-form textarea{font-size:calc(1rem + .3vw)}
@media(max-width:767px){.yol-reference-page .yol-form input:not([type=checkbox]),.yol-reference-page .yol-form textarea,.yol-reference-product .yol-form input:not([type=checkbox]),.yol-reference-product .yol-form textarea{font-size:14px}}

/* Line arrow icon (YOL_Site::icon): one 12px glyph, rotated per direction, mirrored on RTL. */
.yol-arrow{display:inline-block;flex:none;width:12px;height:12px;vertical-align:middle;overflow:visible;transition:transform .3s cubic-bezier(.25,.46,.45,.94),translate .3s cubic-bezier(.25,.46,.45,.94)}
.yol-arrow--right{transform:rotate(45deg)}
.yol-arrow--down-right{transform:rotate(90deg)}
.yol-arrow--down{transform:rotate(135deg)}
.yol-arrow--down-left{transform:rotate(180deg)}
.yol-arrow--left{transform:rotate(225deg)}
.yol-arrow--up-left{transform:rotate(270deg)}
.yol-arrow--up{transform:rotate(-45deg)}
[dir=rtl] .yol-arrow{scale:-1 1}
a:hover>.yol-arrow--up-right,button:hover>.yol-arrow--up-right,a:focus-visible>.yol-arrow--up-right,button:focus-visible>.yol-arrow--up-right{translate:2px -2px}
a:hover>.yol-arrow--right,button:hover>.yol-arrow--right,a:focus-visible>.yol-arrow--right,button:focus-visible>.yol-arrow--right{translate:3px 0}
button:hover>.yol-arrow--left,button:focus-visible>.yol-arrow--left{translate:-3px 0}
[dir=rtl] a:hover>.yol-arrow--up-right,[dir=rtl] button:hover>.yol-arrow--up-right{translate:-2px -2px}
[dir=rtl] a:hover>.yol-arrow--right,[dir=rtl] button:hover>.yol-arrow--right{translate:-3px 0}
[dir=rtl] button:hover>.yol-arrow--left{translate:3px 0}
.yol-ref-footer__top,.yol-home-footer__top,.yol-ref-footer__social,.yol-home-footer__social{align-items:center}
.yol-form .yol-button .yol-arrow,.yol-search button .yol-arrow{margin-inline-start:6px}
.yol-carousel-controls button .yol-arrow{width:14px;height:14px}

/* About accordion: arrow in a 40px tinted disc, faint until hovered or opened, turns down when open. */
.yol-corp-accordion .yol-accordion-item button b{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.1);opacity:.2;font:inherit;transition:opacity .2s ease,transform .2s ease}
.yol-corp-accordion .yol-accordion-item button:hover b,.yol-corp-accordion .yol-accordion-item button:focus-visible b,.yol-corp-accordion .yol-accordion-item.is-open button b{opacity:1}
.yol-corp-accordion .yol-accordion-item.is-open button b{transform:rotate(90deg)}
[dir=rtl] .yol-corp-accordion .yol-accordion-item.is-open button b{transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){.yol-arrow,.yol-corp-accordion .yol-accordion-item button b{transition:none}}

/* Header controls: no focus ring or tap flash on mouse/touch; keyboard users keep a visible ring. */
.yol-header a,.yol-header button,.yol-brand{-webkit-tap-highlight-color:transparent}
.yol-header a:focus,.yol-header button:focus,.yol-brand:focus{outline:none}
.yol-header a:focus-visible,.yol-header button:focus-visible,.yol-brand:focus-visible{outline:1px solid currentColor;outline-offset:4px}