/* Ui:FeaturesUiPolish: visual polish of the Sala feature pages (/ozellikler, /ozellikler/{slug}). Loaded only while the flag is on (after sala-ozl.css).
   Rules: every selector starts with .sl-ozl.sl-ui2 (the root class exists only while the flag is on); no @import, no @font-face, no external url();
   NO new colour and NO new font: spacing, type size, radius and shadow tokens only, built on the --sl-* tokens of sala-ozl.css. */
.sl-ozl.sl-ui2{
  --u-1:4px;--u-2:8px;--u-3:12px;--u-4:16px;--u-5:24px;--u-6:32px;--u-7:48px;
  --u-r:12px;--u-r-lg:16px;
  --u-sh:0 1px 2px rgba(2,28,58,.06),0 4px 14px rgba(2,28,58,.07);
  --u-gap:clamp(16px,2vw,28px);
}

/* ---------- hero: calmer title, wider picture ---------- */
.sl-ozl.sl-ui2 .sl-hero .sl-title-xl{font-size:clamp(1.75rem,2.6vw,2.25rem);line-height:1.15;text-wrap:balance;overflow-wrap:break-word}
.sl-ozl.sl-ui2 .sl-hero .sl-lead{margin-top:var(--u-4);max-width:58ch}
.sl-ozl.sl-ui2 .sl-hero .sl-sub{margin-bottom:var(--u-2)}
.sl-ozl.sl-ui2 .sl-hero-text{max-width:none}
.sl-ozl.sl-ui2 .sl-hero .sl-frame{box-shadow:0 16px 40px rgba(2,28,58,.28)}
@media (min-width:992px){
  .sl-ozl.sl-ui2 .sl-hero .sl-row>.sl-col-lg-6:first-child{flex:0 0 46%;max-width:46%}
  .sl-ozl.sl-ui2 .sl-hero .sl-row>.sl-col-lg-6:last-child{flex:0 0 54%;max-width:54%}
  /* a vertical phone picture needs less width than a screen: the title gets the room */
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-row>.sl-col-lg-6:first-child{flex:0 0 56%;max-width:56%}
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-row>.sl-col-lg-6:last-child{flex:0 0 44%;max-width:44%}
}
@media (min-width:1280px){
  .sl-ozl.sl-ui2 .sl-hero .sl-container{max-width:1320px}
}
/* vertical phone picture: smaller, with a soft backdrop (the same accent colour as the frame dots, as a background only) */
.sl-ozl.sl-ui2 .sl-hero-mobile .sl-frame-phone{max-width:240px}
.sl-ozl.sl-ui2 .sl-hero-phone .sl-row>.sl-col-lg-6:last-child{background:radial-gradient(circle at 50% 45%,rgba(27,181,204,.18),transparent 62%)}
@media (max-width:991px){
  /* phone hero on small screens: title, then the picture, then the lead text (the picture is no longer pushed below the first screen) */
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-row{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;margin:0}
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-row>*{flex:0 0 auto;max-width:100%}
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-hero-text{display:contents}
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-hero-text>*{padding:0;order:1}
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-hero-text>.sl-sub{order:1}
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-hero-text>h1{order:2}
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-row>.sl-col-lg-6:last-child{order:3;padding:var(--u-4) 0 0;margin-bottom:var(--u-1)}
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-hero-text>.sl-lead{order:4}
  .sl-ozl.sl-ui2 .sl-hero-phone .sl-frame-phone{max-width:min(190px,46vw);border-width:5px;border-radius:24px;margin-bottom:0}
}
@media (max-width:767px){
  .sl-ozl.sl-ui2 .sl-hero{padding-top:128px;padding-bottom:var(--u-6)}
}
@media (max-width:480px){
  .sl-ozl.sl-ui2 .sl-hero .sl-title-xl{font-size:1.625rem}
}
/* one note under the hero picture, as wide as the picture and easy to read on the dark band */
.sl-ozl.sl-ui2 .sl-hero-shot .gorsel-notu,.sl-ozl.sl-ui2 .sl-hero .gorsel-notu{grid-column:1/-1;margin:var(--u-6) 0 0;font-size:.8125rem;line-height:1.5;color:#e3ecf7;max-width:60ch}
.sl-ozl.sl-ui2 .sl-hero-mobile .gorsel-notu{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- icon boxes of a feature page: balanced counts, equal height, aligned rows ---------- */
.sl-ozl.sl-ui2 ul.sl-grid{gap:var(--u-gap);align-items:stretch}
.sl-ozl.sl-ui2 ul.sl-grid>.sl-icon-box{border-radius:var(--u-r);box-shadow:var(--u-sh);display:flex;flex-direction:column;height:100%}
.sl-ozl.sl-ui2 ul.sl-grid>.sl-icon-box .sl-desc{margin-top:var(--u-3)}
@supports (grid-template-rows:subgrid){
  .sl-ozl.sl-ui2 ul.sl-grid>.sl-icon-box{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}
}
/* no lone last card: odd counts on two columns let the last card span the row */
@media (min-width:768px) and (max-width:991px){
  .sl-ozl.sl-ui2 ul.sl-grid>.sl-icon-box:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:992px){
  .sl-ozl.sl-ui2 ul.sl-n5,.sl-ozl.sl-ui2 ul.sl-n7,.sl-ozl.sl-ui2 ul.sl-n8{grid-template-columns:repeat(12,minmax(0,1fr))}
  /* 5 = 3 + 2 wide cards; 7 = 4 + 3; 8 = 4 + 4 */
  .sl-ozl.sl-ui2 ul.sl-n5>li{grid-column:span 4}
  .sl-ozl.sl-ui2 ul.sl-n5>li:nth-child(n+4){grid-column:span 6}
  .sl-ozl.sl-ui2 ul.sl-n7>li{grid-column:span 3}
  .sl-ozl.sl-ui2 ul.sl-n7>li:nth-child(n+5){grid-column:span 4}
  .sl-ozl.sl-ui2 ul.sl-n8>li{grid-column:span 3}
  /* 4 = 2 x 2 (kept by the markup); 10 = 2 columns until there is room for 5 */
  .sl-ozl.sl-ui2 ul.sl-n10{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
  .sl-ozl.sl-ui2 ul.sl-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sl-ozl.sl-ui2 ul.sl-n10{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* boxes without a link do not lift on hover (no false "clickable" hint) */
.sl-ozl.sl-ui2 li.sl-icon-box:hover{transform:none;border-color:var(--sl-line)}

/* ---------- bullet lists: long lists in two columns ---------- */
@media (min-width:768px){
  .sl-ozl.sl-ui2 .sl-ln6,.sl-ozl.sl-ui2 .sl-ln7,.sl-ozl.sl-ui2 .sl-ln8,.sl-ozl.sl-ui2 .sl-ln9,.sl-ozl.sl-ui2 .sl-ln10,.sl-ozl.sl-ui2 .sl-ln11,.sl-ozl.sl-ui2 .sl-ln12{column-count:2;column-gap:var(--u-7);max-width:none}
  .sl-ozl.sl-ui2 .sl-ln6>li,.sl-ozl.sl-ui2 .sl-ln7>li,.sl-ozl.sl-ui2 .sl-ln8>li,.sl-ozl.sl-ui2 .sl-ln9>li,.sl-ozl.sl-ui2 .sl-ln10>li,.sl-ozl.sl-ui2 .sl-ln11>li,.sl-ozl.sl-ui2 .sl-ln12>li{break-inside:avoid}
}

/* ---------- "Diger ozellikler" cards (output of FeatureMoreH429, old class names) ---------- */
.sl-ozl.sl-ui2 .ozl-boxes{gap:var(--u-gap);align-items:stretch}
@media (min-width:992px){.sl-ozl.sl-ui2 .ozl-boxes-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.sl-ozl.sl-ui2 .ozl-boxes-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sl-ozl.sl-ui2 .ozl-box{display:flex;flex-direction:column;border-radius:var(--u-r);box-shadow:var(--u-sh);padding:clamp(20px,2.4vw,28px)}
.sl-ozl.sl-ui2 .ozl-box .ozl-box-text{flex:1;margin-bottom:var(--u-3)}
.sl-ozl.sl-ui2 .ozl-box .ozl-box-more{margin-top:auto;align-self:flex-start;gap:var(--u-2);font-weight:600;color:var(--sl-primary);text-decoration:none}
.sl-ozl.sl-ui2 .ozl-box .ozl-box-more::after{content:"\2192"/"";transition:transform .2s}
.sl-ozl.sl-ui2 .ozl-box .ozl-box-more:hover{text-decoration:underline;text-underline-offset:3px}
.sl-ozl.sl-ui2 .ozl-box .ozl-box-more:hover::after{transform:translateX(3px)}
.sl-ozl.sl-ui2 .ozl-box:hover{transform:none}
@media (prefers-reduced-motion:reduce){.sl-ozl.sl-ui2 .ozl-box .ozl-box-more::after{transition:none}}

/* ---------- hub: category cards balanced ---------- */
.sl-ozl.sl-ui2 .sl-grid-3{gap:var(--u-gap);align-items:stretch}
.sl-ozl.sl-ui2 .sl-cat{display:flex;flex-direction:column;border-radius:var(--u-r);box-shadow:var(--u-sh)}
.sl-ozl.sl-ui2 .sl-cat .sl-more{margin-top:auto}
.sl-ozl.sl-ui2 .sl-cat>.sl-list-plain+.sl-more{margin-top:var(--u-2)}
.sl-ozl.sl-ui2 .sl-cat .sl-list-plain{flex:0 1 auto}
.sl-ozl.sl-ui2 .sl-cat>.sl-list-plain{margin-bottom:auto}
.sl-ozl.sl-ui2 .sl-cat .sl-more summary{justify-content:space-between}
.sl-ozl.sl-ui2 .sl-cat .sl-extra{margin-top:var(--u-3)}
/* cards that are not links themselves do not lift on hover */
.sl-ozl.sl-ui2 .sl-cat:hover,.sl-ozl.sl-ui2 .sl-qbox:hover{transform:none;border-color:var(--sl-line)}

/* hub: featured cards share their rows (picture | title | text | link), pictures have one shape */
.sl-ozl.sl-ui2 .sl-feat{border-radius:var(--u-r);box-shadow:var(--u-sh)}
.sl-ozl.sl-ui2 .sl-feat .sl-frame{aspect-ratio:16/10;display:flex;flex-direction:column;margin-bottom:var(--u-4);border-radius:var(--u-r)}
.sl-ozl.sl-ui2 .sl-feat .sl-frame picture{display:block;flex:1;min-height:0}
.sl-ozl.sl-ui2 .sl-feat .sl-frame img{width:100%;height:100%;flex:1;min-height:0;object-fit:cover;object-position:top center}
.sl-ozl.sl-ui2 .sl-feat .sl-frame .sl-ph{flex:1;aspect-ratio:auto}
.sl-ozl.sl-ui2 .sl-feat .sl-box-title{display:block}
@supports (grid-template-rows:subgrid){
  .sl-ozl.sl-ui2 .sl-grid-3>.sl-feat{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
}
.sl-ozl.sl-ui2 .sl-feat:hover{transform:none;border-color:var(--sl-line)}

/* hub: quality boxes and steps keep their markup; same radius and shadow */
.sl-ozl.sl-ui2 .sl-qbox{border-radius:var(--u-r);box-shadow:var(--u-sh)}