/* Ui:FeaturesUiPolishC: second visual layer of the Sala feature pages (/ozellikler, /ozellikler/{slug}). Loaded only while the flag is on (after sala-ozl.css and ozellikler-ui2.css).
   Rules: every selector starts with .sl-ozl.sl-ui2c (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, shadow and layout only, built on the --sl-* tokens of sala-ozl.css (and white, which that file already uses). */
.sl-ozl.sl-ui2c{
  --c-r:12px;--c-r-lg:16px;
  --c-sh:0 1px 2px rgba(2,28,58,.06),0 4px 14px rgba(2,28,58,.07);
  --c-gap:clamp(16px,2vw,28px);
}

/* ---------- 1. guide links of the hub: topic cards instead of a wall of links ---------- */
.sl-ozl.sl-ui2c .sl-prof{display:flex;flex-wrap:wrap;justify-content:center;gap:12px var(--c-gap);max-width:1040px;margin:0 auto}
.sl-ozl.sl-ui2c .sl-prof>li{flex:0 1 calc((100% - 2 * var(--c-gap)) / 3);min-width:0}
.sl-ozl.sl-ui2c .sl-prof a{height:100%;display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px;background:#fff;border:1px solid var(--sl-line);border-radius:var(--c-r);box-shadow:var(--c-sh);color:var(--sl-dark);font-weight:600;text-decoration:none;transition:border-color .2s}
.sl-ozl.sl-ui2c .sl-prof a:hover{border-color:var(--sl-primary)}
.sl-ozl.sl-ui2c .sl-prof-name{flex:1;min-width:0;line-height:1.35;overflow-wrap:anywhere}
.sl-ozl.sl-ui2c .sl-prof-go{color:var(--sl-primary);flex:none}
.sl-ozl.sl-ui2c .sl-block{text-align:left}
.sl-ozl.sl-ui2c .sl-block>.sl-box-title{text-align:center;margin-bottom:var(--c-gap)}
.sl-ozl.sl-ui2c .sl-gg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--c-gap);align-items:stretch}
.sl-ozl.sl-ui2c .sl-gg{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sl-line);border-radius:var(--c-r);box-shadow:var(--c-sh);padding:clamp(16px,2vw,24px)}
.sl-ozl.sl-ui2c .sl-gg-title{display:flex;align-items:center;gap:12px;font-size:1.0625rem;line-height:1.35;font-weight:600;color:var(--sl-dark);margin-bottom:var(--c-gap)}
.sl-ozl.sl-ui2c .sl-gg-title .sl-icon{flex:none}
.sl-ozl.sl-ui2c .sl-gg-n{margin-left:auto;flex:none;padding:2px 10px;border:1px solid var(--sl-line);border-radius:999px;background:var(--sl-bg);color:var(--sl-text2);font-size:.8125rem;font-weight:500;line-height:1.5}
.sl-ozl.sl-ui2c .sl-gg-list li{border-top:1px solid var(--sl-line)}
.sl-ozl.sl-ui2c .sl-gg-list li a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:.9375rem;line-height:1.4;color:var(--sl-primary);text-decoration:none}
.sl-ozl.sl-ui2c .sl-gg-list li a:hover{text-decoration:underline;text-underline-offset:3px}
.sl-ozl.sl-ui2c .sl-gg>.sl-more{margin-top:var(--c-1,4px)}
.sl-ozl.sl-ui2c .sl-gg .sl-more summary{justify-content:space-between}
@media (max-width:1099px){
  .sl-ozl.sl-ui2c .sl-gg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-ozl.sl-ui2c .sl-prof>li{flex-basis:calc((100% - var(--c-gap)) / 2)}
}
@media (max-width:640px){
  .sl-ozl.sl-ui2c .sl-gg-grid{grid-template-columns:minmax(0,1fr)}
  .sl-ozl.sl-ui2c .sl-prof>li{flex-basis:calc((100% - var(--c-gap)) / 2)}
  .sl-ozl.sl-ui2c .sl-prof a{padding:8px 12px;gap:8px;font-size:.9375rem}
  .sl-ozl.sl-ui2c .sl-prof-go{display:none}
  .sl-ozl.sl-ui2c .sl-gg-list li a{min-height:44px;padding:6px 0}
  .sl-ozl.sl-ui2c .sl-gg-title{margin-bottom:var(--c-4,16px)}
}
@media (max-width:400px){
  .sl-ozl.sl-ui2c .sl-prof .sl-icon{display:none}
}

/* ---------- 3. no empty picture frames ---------- */
.sl-ozl.sl-ui2c .sl-feat-nf .sl-icon{margin-bottom:var(--c-gap)}
.sl-ozl.sl-ui2c .sl-feat-nf .sl-icon+.sl-box-title{margin-top:0}
/* a feature page without any picture: the text uses the whole hero, no empty second column */
.sl-ozl.sl-ui2c .sl-hero.sl-hero-solo .sl-row>.sl-col-lg-6:last-child{display:none}
@media (min-width:992px){
  .sl-ozl.sl-ui2c .sl-hero.sl-hero-solo .sl-row>.sl-col-lg-6:first-child{flex:0 0 100%;max-width:100%}
}
.sl-ozl.sl-ui2c .sl-hero.sl-hero-solo .sl-hero-text{max-width:820px}
.sl-ozl.sl-ui2c .sl-hero.sl-hero-solo{padding-bottom:clamp(40px,5vw,64px)}

/* ---------- 4. section headings of a feature page: the same icon repeated on every heading is dropped (the icon boxes below carry the icons) ---------- */
.sl-ozl-detail.sl-ui2c .sl-title>i,.sl-ozl-detail.sl-ui2c .sl-title>svg{display:none}

/* ---------- 5. MLS.TR band: the logo has dark lettering, so it sits on a white badge (dark text on white, well above 4.5:1) ---------- */
.sl-ozl.sl-ui2c .sl-mls-logo{background:#fff;padding:clamp(16px,2.4vw,28px);border-radius:var(--c-r-lg);box-shadow:0 16px 40px rgba(2,28,58,.28);max-width:340px}

/* ---------- 6. CRM / MLS photo cards: the photo files carry their own grey title box; the picture is cropped above it and the real heading sits under the picture ---------- */
.sl-ozl.sl-ui2c .sl-card-img{width:100%;max-height:none;aspect-ratio:2.9/1;object-fit:cover;object-position:top center;margin:0 0 var(--c-gap);border-radius:var(--c-r)}
.sl-ozl.sl-ui2c .sl-card-img+.sl-box-title{margin-bottom:0}

/* ---------- 7. "Nasil calisir": numbers and text on one line ---------- */
.sl-ozl.sl-ui2c .sl-steps>li{min-height:44px}
.sl-ozl.sl-ui2c .sl-steps>li>.sl-box-title{display:flex;align-items:center;min-height:44px;margin:0}
.sl-ozl.sl-ui2c .sl-steps>li>.sl-box-title+.sl-desc{margin-top:2px}
.sl-ozl.sl-ui2c .sl-steps>li>.sl-desc:only-child{display:flex;align-items:center;min-height:44px;margin:0}
.sl-ozl.sl-ui2c .sl-steps .sl-desc{color:var(--sl-text)}
/* steps without a picture beside them run across the page, joined by a thin line */
@media (min-width:768px){
  .sl-ozl.sl-ui2c .sl-steps-h{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--c-gap)}
  .sl-ozl.sl-ui2c .sl-steps-h>li{margin:0;padding:64px 0 0}
  .sl-ozl.sl-ui2c .sl-steps-h>li>.sl-desc:only-child{display:block;min-height:0}
  .sl-ozl.sl-ui2c .sl-steps-h>li:not(:last-child)::after{content:"";position:absolute;top:21px;left:56px;right:calc(-1 * var(--c-gap) + 12px);height:2px;background:var(--sl-line)}
}

/* ---------- 8. hub: balanced FAQ and quality boxes ---------- */
.sl-ozl.sl-ui2c .sl-heading .sl-title{text-wrap:balance}
.sl-ozl.sl-ui2c .sl-faq:not(:has(.sl-faq-item:nth-child(4))){grid-template-columns:minmax(0,1fr);max-width:820px;margin-left:auto;margin-right:auto}
.sl-ozl.sl-ui2c .sl-qbox .sl-qmore{margin-top:var(--c-gap)}
.sl-ozl.sl-ui2c .sl-qbox .sl-qmore>.sl-desc:first-of-type{margin-top:var(--c-gap)}
.sl-ozl.sl-ui2c .sl-qbox .sl-qnote{margin-top:var(--c-gap)}
.sl-ozl.sl-ui2c .sl-qbox .sl-qtags{margin-bottom:var(--c-gap)}

/* ---------- 9. "Kesfet" block: 6-column grid, so 5 cards are 3 + 2 wide ones (no orphan row) ---------- */
@media (min-width:992px){
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto}
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-kart{grid-column:span 2}
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-kart:nth-child(4):nth-last-child(2),
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-kart:nth-child(5):nth-last-child(1),
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-kart:first-child:nth-last-child(4),
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-kart:first-child:nth-last-child(4)~.kesfet-kart,
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-kart:first-child:nth-last-child(2),
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-kart:first-child:nth-last-child(2)~.kesfet-kart{grid-column:span 3}
}
@media (min-width:640px) and (max-width:991px){
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-kart:last-child:nth-child(odd){grid-column:1/-1}
}

/* ---------- 11. phones: short hero text first, the rest one tap away (the text stays whole in the page; clamped only when scripts run) ---------- */
.sl-ozl.sl-ui2c .sl-lead-more{display:none}
@media (max-width:767px){
  .sl-js .sl-ozl.sl-ui2c .sl-hero .sl-lead:has(+ .sl-lead-more):not(.sl-lead-open){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .sl-js .sl-ozl.sl-ui2c .sl-lead-more{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--c-1,4px);padding:0;background:none;border:0;color:#fff;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .sl-ozl.sl-ui2c .sl-hero .sl-btns{margin-top:var(--c-gap)}
}
@media (max-width:991px){
  .sl-ozl.sl-ui2c .sl-hero-phone .sl-hero-text>.sl-lead-more{order:5}
}
/* U1b: a lone last FAQ item in the two-column grid is centered under the pair instead of hugging the left edge. */
@media (min-width:992px){.sl-ozl.sl-ui2c .sl-faq:has(.sl-faq-item:nth-child(4)) .sl-faq-item:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 24px)}}