/* ==========================================================================
   Kozmetik — pudra, açık tema, ton şeridi
   ========================================================================== */

.cos-hero { padding-top: clamp(50px, 7vw, 100px); overflow: hidden; background: radial-gradient(80% 70% at 85% 0%, #f3d9cf, transparent 70%); }
.cos-hero__in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.cos-hero .display { margin-top: 18px; }
.cos-hero .display em { color: var(--accent-text); }

.sweep { margin-top: clamp(40px, 6vw, 70px); overflow: hidden; padding-block: 30px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sweep__track { display: flex; gap: 14px; width: max-content; animation: marquee 60s linear infinite; }
.sweep:hover .sweep__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.sweep__pill {
  width: 64px;
  height: 140px;
  border-radius: 32px 32px 8px 8px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .35) 0 18%, transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff) 0%, var(--c) 40%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  transform: rotate(var(--r));
  box-shadow: 0 20px 30px -16px rgba(80, 30, 30, .45);
  transition: transform .5s var(--ease);
}
.sweep__pill:hover { transform: rotate(0) translateY(-12px) scale(1.06); }
.cos-cats { padding-block: 10px 30px; }

.cos-list { padding-block: 48px 40px; }
.cos-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 20px; }
.cos-item { position: relative; }
.cos-item .card__media { background: linear-gradient(180deg, #f6e9e2, #ecd7cd); border-radius: 120px 120px var(--r) var(--r); }
.cos-dot { position: absolute; left: 50%; top: -14px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: var(--c); transform: translateX(-50%); box-shadow: 0 0 0 4px var(--bg), 0 6px 14px -4px rgba(0, 0, 0, .35); }

.undertone { background: #2a2023; color: #f6ece6; --fg: #f6ece6; --fg-2: #dcc9c1; --muted: rgba(246, 236, 230, .6); --line: rgba(233, 179, 160, .25); --accent: #e9b3a0; --accent-text: #f0bfae; }
.undertone__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.undertone__copy .lead { margin: 18px 0 30px; color: var(--fg-2); }
.undertone__pick { display: grid; gap: 10px; }
.undertone__pick button { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); text-align: left; font: 500 1.3rem var(--font-d); transition: all .3s var(--ease); }
.undertone__pick button:hover { border-color: var(--accent); }
.undertone__pick [aria-checked="true"] { background: var(--accent); color: #2a2023; border-color: var(--accent); }
.undertone__pick i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
.undertone__result { min-height: 300px; padding: clamp(28px, 4vw, 50px); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.undertone__wait { font: italic 500 1.5rem/1.3 var(--font-d); color: var(--muted); }
.undertone__title { font: 500 clamp(1.7rem, 3vw, 2.5rem)/1.1 var(--font-d); }
.undertone__sw { display: flex; gap: 10px; }
.undertone__sw i { width: 54px; height: 54px; border-radius: 50%; background: var(--c); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5); animation: pop .6s var(--ease-out) backwards; }
.undertone__sw i:nth-child(2) { animation-delay: .06s; }
.undertone__sw i:nth-child(3) { animation-delay: .12s; }
.undertone__sw i:nth-child(4) { animation-delay: .18s; }
.undertone__result > p:last-child { color: var(--fg-2); }
@keyframes pop { from { transform: scale(0); } }

.cos-promise { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; padding-block: 40px; font-size: .9rem; color: var(--fg-2); }
.cos-promise p { display: flex; gap: 10px; align-items: center; }
.cos-promise .i { color: var(--accent); width: 18px; }

@media (max-width: 1100px) { .cos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) {
  .cos-hero__in, .undertone__in { grid-template-columns: 1fr; }
  .cos-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 12px; }
  .sweep__pill { width: 48px; height: 104px; }
}