/* ==========================================================================
   CSKPEDIA — OPTIVERA mobilya kataloğu (optivera.html, 25 Ekim 2026)
   muhur.css'in taş/pirinç dünyasında. Dört bölüm dört ayrı düzen:
   vitrinler gerçek genişlik oranıyla bir duvarda; bankolar sahne + şerit;
   OptiPedia kapasite sekmesi + plan; OptiLens köşesi mozaik.
   ========================================================================== */

.ov-sayfa{ --ov-kart: #0D1733; --ov-yuzey: #0A1229 }

/* ---------------------------------------------------------------- giriş */
.ov-giris{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: end;
  padding-block: clamp(28px, 4vw, 56px) clamp(8px, 2vw, 24px);
}
.ov-giris .madalyon{ --boy: clamp(96px, 9vw, 132px); margin-bottom: 26px }
.ov-giris h1{
  font-family: var(--font-baslik); font-weight: 600;
  font-size: clamp(36px, 4.6vw, 68px); line-height: 1.06; letter-spacing: .01em;
  color: var(--mine); text-wrap: balance; max-width: 15ch;
}
.ov-giris h1 span{ color: var(--altin-acik) }
.ov-giris .ozet{ margin-top: 22px; max-width: 54ch; font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.65; color: #D7D2C6 }

.ov-dizin{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.ov-dizin a{
  position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
  padding: 10px 14px 10px 10px; border-radius: 10px;
  background: var(--ov-yuzey); border: 1px solid var(--cizgi);
  color: var(--yazi); text-decoration: none;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease-out);
}
.ov-dizin img{ width: 76px; height: 76px; object-fit: cover; border-radius: 6px }
.ov-dizin a:last-child:nth-child(odd){ grid-column: 1 / -1 }
.ov-dizin b{ display: block; font: 600 15px/1.25 var(--font-marka); color: var(--mine) }
.ov-dizin small{ display: block; margin-top: 4px; font-size: 13px; color: var(--yazi-3) }
@media (hover: hover){
  .ov-dizin a:hover{ border-color: var(--cizgi-guclu); background: var(--ov-kart); transform: translateY(-2px) }
}

/* ---------------------------------------------------------------- ortak */
.ov-bolum{ padding-top: clamp(80px, 10vw, 140px); scroll-margin-top: 16px }
.ov-bolum > .bolum-bas{ max-width: none }
.ov-bolum > .bolum-bas p{ max-width: 64ch }
.ov-baslik-ek{ display: block; margin-top: 10px; font: 500 clamp(15px, 1.2vw, 18px)/1.3 var(--font-marka); letter-spacing: .02em; color: var(--altin-acik) }
.ov-alt-baslik{ font: 600 13px/1 var(--font-marka); letter-spacing: .14em; text-transform: uppercase; color: var(--altin-acik) }
.ov-not{ font-size: 13.5px; color: var(--yazi-3) }

/* görsel düğmeleri: büyütmeye açılır */
.ov-sayfa [data-buyut]{
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 8px; overflow: hidden;
}
.ov-sayfa [data-buyut] img{ display: block; width: 100%; height: auto; transition: transform .5s var(--ease-out), filter .3s }
@media (hover: hover){
  .ov-sayfa [data-buyut]:hover img{ transform: scale(1.025); filter: brightness(1.06) }
}

.ov-teklif{
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  font: 600 14px var(--font-marka); color: var(--altin-acik);
  text-decoration: underline; text-decoration-color: var(--cizgi-guclu); text-underline-offset: 4px;
}
.ov-teklif::after{ content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat }
.ov-teklif:hover{ color: var(--altin-isik); text-decoration-color: currentColor }

/* ---------------------------------------------------------------- 1 · vitrin duvarı */
.ov-duvar{
  display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 28px); overflow-x: auto; scrollbar-width: thin;
  margin-top: clamp(40px, 5vw, 64px); padding-bottom: 6px;
  border-bottom: 1px solid var(--cizgi-guclu);   /* zemin çizgisi */
}
.ov-vitrin{ flex: none; display: flex; flex-direction: column }
/* Hepsi aynı yükseklikte; genişlik görselin kendi oranından gelir (gerçek ölçü oranı korunur, büyütme yok) */
.ov-vitrin-gorsel{ height: clamp(300px, 28vw, 400px) }
.ov-sayfa .ov-vitrin-gorsel{ width: auto; display: block }
.ov-sayfa .ov-vitrin-gorsel img{ height: 100%; width: auto }
.ov-vitrin-gorsel.bos{ aspect-ratio: 118 / 400; display: grid; place-items: end center; border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(233,207,138,.05) 0 8px, transparent 8px 16px); border: 1px dashed var(--cizgi-guclu) }
.ov-vitrin-gorsel.bos svg{ width: 56%; height: 82%; margin-bottom: 8%; fill: none; stroke: var(--altin); stroke-width: 1.2; opacity: .55 }
.ov-vitrin h3{ margin-top: 18px; max-width: 24ch; font: 600 clamp(15px, 1.25vw, 18px)/1.2 var(--font-marka); color: var(--mine) }
.ov-kapasite{ margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 14px; color: var(--yazi-2) }
.ov-kapasite b{ font: 600 14px var(--font-marka); color: var(--altin-acik); font-variant-numeric: tabular-nums }
.ov-vitrin .ov-not{ margin-top: 4px }
.ov-vitrin .ov-teklif{ margin-top: 6px }

.ov-ozellik{ margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start }
.ov-renk-gruplari{ display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 24px clamp(24px, 4vw, 56px) }
.ov-renk-gruplari .ov-alt-baslik{ font-size: 15px }
.ov-renk-gruplari .ov-renkler{ min-width: 0 }
.ov-ozellik > .ov-alt-baslik{ grid-column: 1 / -1 }
.ov-detaylar{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 220px)); gap: 20px }
.ov-detaylar li{ display: flex; flex-direction: column }
.ov-detaylar .ov-teklif{ margin-top: 8px; align-self: flex-start }
.ov-detaylar b{ display: block; margin-top: 12px; font: 600 14.5px/1.3 var(--font-marka); color: var(--mine) }
.ov-detaylar span{ display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--yazi-2) }
.ov-detaylar img{ aspect-ratio: 3 / 2; object-fit: cover }

.ov-renkler{ min-width: 180px }
.ov-renk-listesi{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--yazi) }
.ov-renk-listesi li{ display: flex; align-items: center; gap: 12px }
.ov-renk{ width: 22px; height: 22px; border-radius: 50%; background: var(--r); box-shadow: 0 0 0 1px rgba(233,207,138,.35), inset 0 1px 2px rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.45) }

/* ---------------------------------------------------------------- 2 · bankolar */
.ov-banko-sahne{ margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start }
.ov-kurallar ul{ list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px }
.ov-kurallar li{ position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.6; color: var(--yazi-2) }
.ov-kurallar li::before{ content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; transform: rotate(45deg); background: var(--pirinc-duz) }
.ov-kurallar li b{ color: var(--mine); font-weight: 600 }
.ov-ic-gorunum{ margin: 26px 0 0; max-width: 400px }
.ov-ic-gorunum figcaption{ margin-top: 10px; font-size: 13.5px; color: var(--yazi-3) }

.ov-raf-bas{ margin-top: clamp(56px, 7vw, 88px) }
.ov-raf-bas p{ margin-top: 12px; max-width: 64ch; font-size: 15.5px; line-height: 1.6; color: var(--yazi-2) }
.ov-raf{
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 26vw, 340px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-top: 22px; padding: 4px max(var(--kenar), calc((100% - var(--genislik)) / 2)) 18px;
  scroll-padding-inline: max(var(--kenar), calc((100% - var(--genislik)) / 2));
  scrollbar-width: thin;
}
.ov-model{ scroll-snap-align: start; display: flex; flex-direction: column }
.ov-model [data-buyut] img{ aspect-ratio: 3 / 2; object-fit: cover }
.ov-model h4{ margin-top: 14px; font: 600 17px/1.2 var(--font-marka); color: var(--mine) }
.ov-model p{ margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--yazi-2) }
.ov-model .ov-teklif{ margin-top: auto; padding-top: 6px; align-self: flex-start }

.ov-tekli{ list-style: none; margin-top: 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 300px)); gap: 22px clamp(16px, 2vw, 24px) }
.ov-tekli li{ display: flex; flex-direction: column }
.ov-tekli img{ aspect-ratio: 4 / 3; object-fit: cover }
.ov-tekli.ov-kare img{ aspect-ratio: 1 }
.ov-tekli .ov-teklif{ margin-top: auto; padding-top: 8px; align-self: flex-start }
.ov-tekli b{ margin-top: 14px; font: 600 16px/1.2 var(--font-marka); color: var(--mine) }
.ov-tekli li > span:not(.ov-renk-sec){ margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--yazi-2) }
.ov-renk-sec{ display: inline-flex; gap: 8px; margin-top: 12px }
.ov-renk-sec button{
  width: 32px; height: 32px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--r); border: 0;
  box-shadow: 0 0 0 1px rgba(233,207,138,.35), inset 0 1px 2px rgba(255,255,255,.25);
  transition: box-shadow .2s, transform .2s var(--ease-out);
}
.ov-renk-sec button[aria-checked="true"]{ box-shadow: 0 0 0 2px var(--tas), 0 0 0 4px var(--altin-acik) }
.ov-renk-sec button:active{ transform: scale(.92) }
.ov-renk-notu{ margin-top: 18px; font-size: 13.5px; color: var(--yazi-3) }

/* ---------------------------------------------------------------- 3 · OptiPedia masaları */
.ov-masa{ margin-top: clamp(36px, 4.5vw, 56px) }
.ov-kapasite-sec{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.ov-kapasite-sec [role=tab]{
  min-width: 52px; height: 52px; border-radius: 50%;
  font: 600 18px var(--font-marka); font-variant-numeric: tabular-nums; color: var(--yazi);
  background: var(--ov-yuzey); border: 1px solid var(--cizgi); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease-out);
}
.ov-kapasite-sec [role=tab]:hover{ border-color: var(--cizgi-guclu) }
.ov-kapasite-sec [role=tab][aria-selected="true"]{ background: var(--pirinc-duz); color: var(--murekkep); border-color: transparent; box-shadow: 0 6px 16px -8px rgba(0,0,0,.8) }
.ov-kapasite-sec [role=tab]:active{ transform: scale(.94) }
.ov-kapasite-birim{ margin-left: 6px; font: 500 15px var(--font-marka); color: var(--yazi-3) }

.ov-masa-panel{ margin-top: 28px; display: grid; grid-template-columns: auto minmax(0, 520px); justify-content: start; gap: clamp(24px, 4vw, 56px); align-items: start }
.ov-masa-panel:not([hidden]){ animation: ov-belir .45s var(--ease-out) }
@keyframes ov-belir{ from{ opacity: .4; transform: translateY(6px) } }
.ov-masa-gorseller{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 300px); gap: 14px }
.ov-masa-gorseller{ grid-auto-columns: auto; justify-content: start }
.ov-sayfa .ov-masa-gorseller img{ height: 260px; width: auto; max-width: none }
.ov-masa-donanim{ margin-top: 26px; max-width: 72ch; font-size: 14.5px; line-height: 1.6; color: var(--yazi-2) }
.ov-masa-yazi h3{ font: 600 clamp(22px, 2vw, 28px)/1.15 var(--font-baslik); color: var(--mine) }
.ov-masa-yazi > p{ margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--yazi-2) }
.ov-donanim{ margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--cizgi) }
.ov-donanim div{ padding: 14px 0 }
.ov-donanim div + div{ border-left: 1px solid var(--cizgi); padding-left: 16px }
.ov-donanim dt{ font-size: 13px; color: var(--yazi-3) }
.ov-donanim dd{ margin: 4px 0 0; font: 600 28px/1 var(--font-marka); font-variant-numeric: tabular-nums; color: var(--altin-acik) }
.ov-masa-yazi .ov-not{ margin-top: 14px }
.ov-masa-yazi .ov-teklif{ margin-top: 10px }
.ov-masa-alt{ margin-top: 32px; max-width: 72ch; font-size: 14.5px; line-height: 1.6; color: var(--yazi-3) }
.ov-masa-alt a{ color: var(--altin-acik); text-underline-offset: 3px }

/* ---------------------------------------------------------------- 4 · OptiLens köşesi: üstte geniş sahne, altta aynı yönde üç dikey kart */
.ov-mozaik{
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 28px clamp(18px, 2.4vw, 32px);
}
.ov-parca{ display: flex; flex-direction: column }
.ov-parca h3{ margin-top: 14px; font: 600 17px/1.25 var(--font-marka); color: var(--mine) }
.ov-parca p{ margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--yazi-2) }
.ov-parca .ov-teklif{ margin-top: 6px; align-self: flex-start }
.ov-parca:not(.ov-parca-genis) [data-buyut] img{ aspect-ratio: 4 / 5; object-fit: cover }
.ov-parca:nth-child(4) [data-buyut]{ background: #EDEAE4 }
.ov-parca:nth-child(4) [data-buyut] img{ object-fit: contain }
.ov-parca-genis{ grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 280px); gap: 24px clamp(20px, 3vw, 40px); align-items: end }
.ov-parca-genis [data-buyut] img{ aspect-ratio: 845 / 418 }
.ov-parca-genis h3{ margin-top: 0 }
#optilens > .ov-masa-alt{ margin-top: 28px }

/* ---------------------------------------------------------------- 1b · lüks vitrin serisi */
.ov-luks{
  margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--cizgi);
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start;
}
.ov-luks-baslik{ font: 600 clamp(24px, 2.4vw, 32px)/1.15 var(--font-baslik); color: var(--mine) }
.ov-luks-bas > p:not(.ov-luks-ad){ margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--yazi-2) }
.ov-luks-sahne{ margin-top: 22px }
.ov-luks-sahne img{ aspect-ratio: 1295 / 1215 }
.ov-luks-ad{ margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; color: var(--yazi-2) }
.ov-luks-ad b{ font: 600 16px var(--font-marka); color: var(--mine) }
.ov-luks-liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 230px)); gap: 26px 20px; align-content: start }
.ov-luks-liste li{ display: flex; flex-direction: column }
.ov-luks-liste img{ aspect-ratio: 1; object-fit: cover }
.ov-luks-liste b{ margin-top: 12px; font: 600 15.5px/1.25 var(--font-marka); color: var(--mine) }
.ov-luks-liste span{ margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--yazi-2) }
.ov-luks-liste .ov-teklif{ margin-top: 4px; align-self: flex-start }

/* ---------------------------------------------------------------- kapanış ve büyüteç */
.ov-temsili{ margin-top: 30px !important; font-size: 13px !important; color: var(--yazi-3) !important }

.ov-buyutec{
  max-width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 10px;
  background: var(--tas-2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); overflow: hidden;
}
.ov-buyutec::backdrop{ background: rgba(4,8,20,.82); backdrop-filter: blur(4px) }
.ov-buyutec img{ display: block; max-width: 100%; max-height: 92vh; width: auto; height: auto; margin: auto }
.ov-buyutec form{ position: absolute; top: 10px; right: 10px }
.ov-kapat{
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cizgi-guclu); cursor: pointer;
  background: rgba(7,13,31,.78); color: var(--mine); display: grid; place-items: center;
}
.ov-kapat svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.ov-buyutec[open]{ animation: ov-buyut .32s var(--ease-out) }
@keyframes ov-buyut{ from{ opacity: 0; transform: scale(.97) } }

/* ---------------------------------------------------------------- 5 · tavan aydınlatması */
.ov-isik-alt{ margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: auto minmax(0, 420px); justify-content: start; gap: 28px clamp(32px, 6vw, 96px); align-items: start }
.ov-isik-renk{ list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 140px); gap: 16px }
.ov-isik-renk img{ width: 140px; height: 188px; object-fit: cover; border-radius: 6px; border: 1px solid var(--cizgi) }
.ov-isik-renk b{ display: block; margin-top: 10px; font: 600 15px var(--font-marka); color: var(--mine); font-variant-numeric: tabular-nums }
.ov-isik-renk span{ display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--yazi-3) }

/* ---------------------------------------------------------------- dar ekran */
@media (max-width: 1080px){
  .ov-detaylar{ grid-template-columns: repeat(2, minmax(0, 220px)) }
  .ov-isik-alt{ grid-template-columns: 1fr }
  .ov-renk-listesi{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
}
@media (max-width: 900px){
  .ov-giris{ grid-template-columns: 1fr; align-items: start }
  .ov-banko-sahne, .ov-masa-panel{ grid-template-columns: 1fr }
  .ov-tekli{ grid-template-columns: repeat(2, minmax(0, 300px)) }
  .ov-mozaik{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .ov-parca-genis{ grid-template-columns: 1fr }
  .ov-luks{ grid-template-columns: 1fr }
  .ov-luks-bas{ max-width: 520px }
}
@media (max-width: 720px){
  /* vitrinler: duvar yatay kaydırılır, oranlar korunur */
  .ov-duvar{ overflow-x: auto; scroll-snap-type: x proximity; margin-inline: 0; padding-inline: var(--kenar); width: auto }   /* bölüm zaten tam genişlik; eksi kenar sayfayı 20 px taşırıyordu */
  .ov-vitrin{ scroll-snap-align: start }
  .ov-vitrin-gorsel{ height: 300px }
  .ov-detaylar{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ov-renk-gruplari{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ov-isik-renk{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .ov-isik-renk img{ width: 100%; height: auto; aspect-ratio: 140 / 188 }
  .ov-masa-gorseller{ grid-auto-flow: row; grid-auto-columns: auto }
  .ov-sayfa .ov-masa-gorseller img{ width: 100%; height: auto; max-width: 520px }
  .ov-dizin{ grid-template-columns: 1fr }
  .ov-dizin a{ grid-template-columns: 60px 1fr }
  .ov-dizin img{ width: 60px; height: 60px }
  .ov-mozaik, .ov-luks-liste{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ov-tekli{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (prefers-reduced-motion: reduce){
  .ov-masa-panel:not([hidden]), .ov-buyutec[open]{ animation: none }
  .ov-sayfa [data-buyut] img, .ov-dizin a{ transition: none }
}

/* ---------------------------------------------------------------- teklif listesi (optivera-liste.html) */
.ol-duzen{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 64px); align-items: start; padding-block: clamp(24px, 3vw, 48px) clamp(64px, 8vw, 120px) }
.ol-bas h1{ font: 600 clamp(32px, 4vw, 56px)/1.08 var(--font-baslik); letter-spacing: .01em; color: var(--mine) }
.ol-bas p{ margin-top: 16px; max-width: 62ch; font-size: 16.5px; line-height: 1.65; color: var(--yazi-2) }
.ol-grup{ margin-top: clamp(36px, 4vw, 56px) }
.ol-grup h2{ font: 600 13px/1 var(--font-marka); letter-spacing: .14em; text-transform: uppercase; color: var(--altin-acik) }
.ol-liste{ list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--cizgi) }
.ol-satir{
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
  padding: 12px 8px 12px 0; border-bottom: 1px solid var(--cizgi);
  transition: background-color .2s;
}
.ol-satir.secili{ background: linear-gradient(90deg, rgba(201,162,74,.09), transparent 70%) }
.ol-satir > img, .ol-bos{ width: 72px; height: 54px; border-radius: 6px; object-fit: cover; display: block }
.ol-bos{ border: 1px dashed var(--cizgi-guclu); background: repeating-linear-gradient(135deg, rgba(233,207,138,.05) 0 6px, transparent 6px 12px) }
.ol-ad b{ display: block; font: 600 15.5px/1.3 var(--font-marka); color: var(--mine) }
.ol-ad small{ display: block; margin-top: 3px; font-size: 13.5px; color: var(--yazi-3) }
.ol-renk select{
  min-height: 40px; padding: 0 34px 0 12px; border-radius: 8px; cursor: pointer;
  font: 500 14px var(--font-govde); color: var(--yazi);
  background: var(--ov-yuzey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23E9CF8A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
  border: 1px solid var(--cizgi); appearance: none;
}
.ol-renk select:hover{ border-color: var(--cizgi-guclu) }
.ol-adet{ display: inline-grid; grid-template-columns: 40px 34px 40px; align-items: center; border: 1px solid var(--cizgi); border-radius: 999px; overflow: hidden }
.ol-adet button{ height: 40px; border: 0; background: var(--ov-yuzey); color: var(--altin-acik); cursor: pointer; display: grid; place-items: center; transition: background-color .15s }
.ol-adet button svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.ol-adet button:hover:not(:disabled){ background: var(--ov-kart) }
.ol-adet button:disabled{ color: var(--yazi-3); opacity: .5; cursor: default }
.ol-adet output{ text-align: center; font: 600 15px var(--font-marka); font-variant-numeric: tabular-nums; color: var(--mine) }

.ol-ozet{ position: sticky; top: 20px; padding: 22px; border-radius: 12px; background: var(--ov-yuzey); border: 1px solid var(--cizgi-guclu); box-shadow: 0 24px 50px -30px rgba(0,0,0,.9) }
.ol-ozet h2{ font: 600 22px/1.2 var(--font-baslik); color: var(--mine) }
.ol-sayac{ margin-top: 8px; font-size: 14.5px; color: var(--yazi-2) }
.ol-secilen{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; max-height: 40vh; overflow: auto }
.ol-secilen li{ display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--yazi) }
.ol-secilen b{ font: 600 14px var(--font-marka); color: var(--altin-acik); font-variant-numeric: tabular-nums }
.ol-not{ display: block; margin-top: 18px; font: 600 13px var(--font-marka); color: var(--yazi-2) }
.ol-not small{ font-weight: 400; color: var(--yazi-3) }
.ol-ozet textarea{
  width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 8px; resize: vertical;
  font: 400 14.5px/1.5 var(--font-govde); color: var(--yazi); background: var(--tas); border: 1px solid var(--cizgi);
}
.ol-ozet textarea::placeholder{ color: var(--yazi-3) }
.ol-ozet textarea:focus{ outline: none; border-color: var(--altin) }
.ol-ozet .dugme-ana{ margin-top: 16px; width: 100%; justify-content: center }
.ol-ozet .dugme-ana[aria-disabled="true"]{ opacity: .45; pointer-events: none; filter: saturate(.6) }
.ol-temizle{ margin-top: 10px; width: 100%; min-height: 40px; border: 0; background: none; cursor: pointer; font: 600 14px var(--font-marka); color: var(--yazi-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--cizgi-guclu) }
.ol-temizle:hover{ color: var(--mine) }
.ol-dipnot{ margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--yazi-3) }

@media (max-width: 960px){
  .ol-duzen{ grid-template-columns: 1fr }
  .ol-ozet{ position: static }
}
@media (max-width: 560px){
  .ol-satir{ grid-template-columns: 56px minmax(0, 1fr); row-gap: 10px }
  .ol-satir > img, .ol-bos{ width: 56px; height: 42px }
  .ol-renk{ grid-column: 2 }
  .ol-adet{ grid-column: 2; justify-self: start }
  .ol-renk select{ width: 100% }
}