.ps {
  --ink: #0a2d43;
  --blue: #007faf;
  --copy: #41596a;
  --line: #d4e2ea;
  --gutter: max(6.5%, calc((100% - 1500px) / 2));
  color: var(--ink);
  background: white;
  line-height: 1.45;
  color-scheme: light;
}
.ps * { box-sizing: border-box; min-width: 0; }
.ps [hidden] { display: none !important; }
.ps :is(h1,h2,h3,p,figure,ul) { margin: 0; }
.ps :is(h1,h2,h3) { color: var(--ink); line-height: 1.05; letter-spacing: -.038em; }
.ps h1 { font-size: clamp(48px,5vw,90px); }
.ps h2 { font-size: clamp(26px,2.8vw,48px); }
.ps h3 { font-size: clamp(18px,1.85vw,30px); }
.ps em { font-style: normal; color: var(--blue); }
.ps p { font-size: clamp(14px,1.25vw,19px); color: var(--copy); line-height: 1.48; }
.ps img { display: block; width: 100%; }
.ps a { text-decoration: none; color: #00688e; }
.ps :is(button,select,textarea) { font: inherit; color: inherit; }
.ps :is(button,summary,label:has(input)) { cursor: pointer; }
.ps :is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid #0092bf; outline-offset: 3px; }
.ps .ps-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--blue); border-radius: 4px; font-weight: 600; background: #ffffffcf; }
.ps .ps-cta:hover { background: #e5f6fc; }
.ps small { display: block; font-size: clamp(12px,1vw,15px); color: var(--copy); }
.ps-hero { position: relative; isolation: isolate; padding: clamp(25px,3vw,56px) var(--gutter); min-height: clamp(310px,30vw,515px); display: grid; align-items:center; background: linear-gradient(120deg,#fff,#edf3f7); }
.ps-hero>img { position: absolute; z-index: -1; right: 0; top: 0; width: 65%; height: 100%; object-fit: cover; object-position: center; mask-image: linear-gradient(90deg,transparent,#000 9%); }
.ps-hero>div { width: 37%; }
.ps-hero h3 { margin-top: 12px; }
.ps-hero p { margin: 10px 0 16px; }
.ps-row { display: grid; grid-template-columns: 24% minmax(0,1fr); align-items: center; gap: 2%; padding: clamp(10px,1.1vw,22px) var(--gutter); }
.ps-intro h2:before { content: ""; display: block; width: 29px; height: 2px; background: #008abc; margin: 0 0 12px; }
.ps-intro p { margin-top: 11px; max-width: 31ch; }
.ps-studio { background: linear-gradient(110deg,#fafcfd,#f2f6f9); padding-block: 10px 15px; }
.ps-studio .ps-intro { align-self: start; padding-top: 15px; }
.ps-tabs,.ps-actions,.ps-sides { display: flex; align-items: center; }
.ps-tabs { margin-bottom: 9px; }
.ps-tabs button,.ps-actions button,.ps-sides button,.ps-swatch { background: none; border: 0; }
.ps-tabs button { padding: 5px clamp(15px,2.5vw,40px); min-height: 44px; border-bottom: 2px solid transparent; }
.ps-tabs button[aria-pressed=true] { color: var(--blue); border-color: var(--blue); font-weight: 650; }
.ps-comparison { display: grid; grid-template-columns: minmax(0,1fr) 26%; overflow: hidden; border-radius: 9px; border: 1px solid var(--line); }
.ps-stage { --split: 50%; position: relative; min-height: clamp(215px,21vw,355px); overflow: hidden; background: linear-gradient(130deg,#c1ced9,#eef3f6 36%,#bccad5 58%,#d9e2e7 70%,#c1cdd7); }
.ps-layer { position: absolute; inset-block: 0; overflow: hidden; }
.ps-stage .layer-a { left: 0; width: var(--split); }
.ps-stage .layer-b { right: 0; width: calc(100% - var(--split)); }
.ps-stage[data-layout=single] .ps-layer { width: 100%; }
.ps-stage[data-layout=single] .layer-a { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.ps-stage[data-layout=single] .layer-b { clip-path: inset(0 0 0 var(--split)); }
.ps-tube { position: absolute; bottom: 0; height: 80%; aspect-ratio: 108/170; left: 50%; transform: translateX(-50%); }
.ps-tube svg { display: block; width: 100%; height: 100%; }
.ps-tube[data-color=antrasit] .ps-surface { filter: grayscale(1) brightness(.75); }
.ps-tube[data-color=grafit] .ps-surface { filter: grayscale(.92) brightness(1.4); }
.ps-tube[data-color=beyaz] .ps-surface { filter: grayscale(1) brightness(1.05) contrast(.22) brightness(1.95); }
.ps-caption,.ps-divider span { position: absolute; background: white; color: var(--ink); box-shadow: 0 2px 8px #18354820; }
.ps-caption { top: 8px; left: 50%; transform: translateX(-50%); border-radius: 5px; padding: 2px 12px; font-size: .85em; pointer-events: none; white-space: nowrap; }
.ps-divider { position: absolute; inset-block: 0; left: var(--split); width: 2px; background: white; transform: translateX(-1px); pointer-events: none; }
.ps-divider span { top: 55%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; color: var(--blue); font-weight: 700; }
.ps-stage input { position: absolute; inset: 0; appearance: none; background: transparent; width: 100%; height: 100%; margin: 0; cursor: ew-resize; touch-action: pan-y; }
.ps-stage input::-webkit-slider-runnable-track { background: transparent; }
.ps-stage input::-webkit-slider-thumb { appearance: none; width: 10px; height: 100px; background: transparent; }
.ps-stage:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: -3px; }
.ps-palette { background: #f9fbfd; padding: 9px 10%; display: flex; flex-direction: column; justify-content: center; }
.ps-sides { gap: 4px; }
.ps-sides button { flex: 1; min-height: 38px; font-size: .88em; color: var(--copy); border-bottom: 2px solid var(--line); }
.ps-sides button[aria-pressed=true] { border-color: var(--blue); color: var(--blue); }
.ps-swatch { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; border-bottom: 1px solid var(--line); font-size: .9em!important; }
.ps-swatch i { width: clamp(22px,2.6vw,39px); aspect-ratio: 1; border-radius: 50%; border: 1px solid #63768444; background: linear-gradient(125deg,#ffffff25,transparent),var(--swatch); }
.ps-swatch[data-swatch=antrasit] { --swatch: #363b3e; }
.ps-swatch[data-swatch=grafit] { --swatch: #77808a; }
.ps-swatch[data-swatch=mavi] { --swatch: #6087a1; }
.ps-swatch[data-swatch=beyaz] { --swatch: #f3f3f2; }
.ps-swatch[aria-pressed=true] i { outline: 2px solid var(--blue); outline-offset: 2px; }
.ps-actions { flex-wrap: wrap; gap: 4px 16px; }
.ps-actions button,.ps-actions output { min-height: 44px; display: inline-flex; align-items: center; padding: 0; font-size: .86em; }
.ps-actions button { color: #00688e; text-decoration: underline; text-underline-offset: 3px; }
.ps-alt-view { background: #f3f7fa; border-radius: 8px; overflow: hidden; }
.ps-alt-view>div { padding: 12px 16px; }
.ps-alt-view p { margin-top: 6px; }
.ps-detail-img { aspect-ratio: 691/166; object-fit: cover; }
.ps-reading { display: flex; align-items: start; gap: 2%; }
.ps-reading details { flex: 1; }
.ps details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; }
.ps summary:after { content: "+"; color: var(--blue); }
.ps details[open]>summary:after { content: "−"; }
.ps-reading summary { font-size: clamp(13px,1.1vw,17px); border-bottom: 1px solid var(--line); }
.ps-reading details[open] { flex-grow: 2; }
.ps-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #edf3f6; }
.ps-pair img { height: clamp(116px,13vw,217px); object-fit: cover; }
.ps-pair figure:first-child { clip-path: polygon(0 0,100% 0,92% 100%,0 100%); }
.ps-pair figcaption { padding: 7px 10px; }
.ps-pair small { font-size: .79em; }
.ps-site { background: #f7fafb; }
.ps-planning { display: grid; grid-template-columns: 29% 23% 1fr; align-items: start; gap: 3%; padding: 1.8vw var(--gutter); }
.ps-check { border-inline: 1px solid var(--line); padding-inline: 9%; }
.ps-check ul { list-style: none; padding: 0; font-size: .9em; }
.ps-check li { margin-bottom: 4px; }
.ps-check li:before { content: "☑"; color: var(--blue); margin-right: 10px; }
.ps-planning .ps-cta { margin-top: 10px; }
.ps-prep fieldset { border: 0; padding: 0; }
.ps-prep label { display: flex; align-items: center; gap: 7px; min-height: 44px; flex-wrap: wrap; }
.ps-prep input { accent-color: var(--blue); }
.ps-prep :is(select,textarea) { background: white; border: 1px solid var(--line); max-width: 100%; }
.ps-prep textarea { width: 100%; }
.ps-prep button { min-height: 44px; background: var(--blue); color: white; border: 0; padding: 6px 14px; }
.ps-prep output { display: block; margin-block: 6px; }
.ps-faq details { border-bottom: 1px solid var(--line); }
.ps-faq details p { padding-bottom: 10px; }
.ps-related nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ps-related a { display: block; background: #f6f9fb; color: var(--ink); }
.ps-related img { height: clamp(64px,7.6vw,125px); object-fit: cover; clip-path: polygon(8% 0,100% 0,92% 100%,0 100%); }
.ps-related :is(strong,span) { display: block; padding: 3px 9px; }
.ps-related span { font-size: .78em; color: var(--copy); }
.ps-close { display: grid; grid-template-columns: 44% 1fr; gap: 2%; align-items: center; padding: 1.7vw var(--gutter); background: #e5f1f7 url('/images/profile-studio/closing.webp') no-repeat right center / auto 100%; }
.ps-close p { margin-top: 6px; }
.ps-close>div:last-child { display: grid; justify-items: start; }
.ps-close .ps-cta,.ps-planning .ps-cta { background: var(--blue); color: white; }
.ps-close a:not(.ps-cta) { min-height: 44px; display: inline-flex; align-items: center; }
@media(max-width:700px) {
  .ps { --gutter: 5%; }
  .ps-hero { display: flex; flex-direction: column-reverse; padding: 0; min-height: 0; }
  .ps-hero>div { width: 100%; padding: 22px var(--gutter) 0; }
  .ps-hero>img { position: static; width: 100%; height: auto; mask-image: linear-gradient(180deg,transparent,#000 12%); }
  .ps-row,.ps-planning,.ps-close { grid-template-columns: 1fr; gap: 14px; padding-block: 19px; }
  .ps-intro p { max-width: none; }
  .ps-intro h2 br { display: initial; }
  .ps-studio .ps-intro { padding: 0; }
  .ps-comparison { grid-template-columns: 1fr; }
  .ps-stage { min-height: 205px; }
  .ps-palette { padding: 8px 12px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .ps-palette>div:last-child { grid-column: 1/-1; display: flex; gap: 4px; }
  .ps-swatch { flex: 1; flex-direction: column; justify-content: center; padding: 8px 2px; gap: 3px; }
  .ps-sides button { min-height: 44px; }
  .ps-actions { gap: 0 12px; }
  .ps-actions output { min-height: 22px; }
  .ps-check { border: 0; padding: 0; }
  .ps-check ul,.ps-prep fieldset { display: grid; grid-template-columns: 1fr 1fr; }
  .ps-faq,.ps-check { padding-top: 10px; border-top: 1px solid var(--line); }
  .ps-reading { flex-wrap: wrap; }
  .ps-reading details[open] { min-width: 100%; }
  .ps-pair figcaption { padding: 6px; font-size: .9em; }
  .ps-related span { font-size: .8em; }
  .ps-close { background-size: auto 42%; background-position: right bottom; }
}
@media(prefers-reduced-motion:no-preference) {
  .ps [data-view]:not([hidden]) { animation: ps-enter .18s ease-out; }
  @keyframes ps-enter { from {opacity:.65} to {opacity:1} }
}
.ps-close a:not(.ps-cta) { padding-inline: 9px; border-radius: 4px; background: #f5fafde8; }
.ps-stage input::-moz-range-thumb { border: 0; background: transparent; width: 10px; }

/* Semantic heading levels retain the approved typography. */
.ps .ps-hero .ps-hero-subtitle{font-size:clamp(18px,1.85vw,30px);font-weight:600;line-height:1.05;letter-spacing:-.038em;margin:12px 0 0}
.ps .ps-hero-subtitle::before,.ps .ps-hero-subtitle::after{content:none!important}