/* ==========================================================================
   CSKPEDIA — optik.css
   OPTIVERA mağaza paneli ve yönetici katalog ekranları.
   Sıralama: base.css → cskpedia.css → hesap.css → optik.css
   Aynı panel dili (beyaz kâğıt, 1px çizgi, gölge yok); OPTIVERA mavisi
   yalnız sistem adında, seçili sekmede ve odakta konuşur.
   ========================================================================== */

:root{
  --optivera:      #002695;          /* beyazda 12.6:1 */
  --optivera-acik: #E8ECFA;
  --temsili:       #8A5200;
  --temsili-zemin: #FFF6E5;
}

::selection{ background: var(--optivera-acik); color: var(--optivera) }

/* geniş panel: katalog tablosu yer ister */
.optik-sayfa{
  max-width: 1160px; margin: 0 auto;
  padding: calc(24px + var(--safe-t)) 20px calc(56px + var(--safe-b));
}
.optik-sayfa.dar{ max-width: 760px }

.optik-ust{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.optik-kilit{ display: flex; align-items: center; gap: 12px; min-width: 0 }
.optik-kilit .marka{ font-size: 17px }
.optik-kilit .ayrac{ width: 1px; height: 18px; background: var(--line) }
.sistem-adi{
  font-family: var(--font-marka); font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--optivera);
}
.optik-nav{ display: flex; gap: 6px; flex-wrap: wrap }
.optik-nav a[aria-current="page"]{
  background: var(--optivera); border-color: var(--optivera); color: #FFFFFF;
}

.optik-baslik{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; margin: 28px 0 6px;
}
.optik-baslik h1{
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: 28px; line-height: 1.15; letter-spacing: .01em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.optik-baslik .rol{ margin-left: 10px; vertical-align: middle }
.optik-ozet{ font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 6px 0 0; max-width: 70ch }

.rol-hap{
  display: inline-block; font-family: var(--font-marka); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  background: var(--optivera-acik); color: var(--optivera);
}

/* TEMSİLİ damgası — OptiLens ile aynı sarı etiket */
.temsili-etiket{
  display: inline-block; font-family: var(--font-marka); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  background: var(--temsili-zemin); color: var(--temsili);
  border: 1px solid #F0D9A8;
}

/* liste künyesi: hangi fiyat listesi geçerli */
.kunye{
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  margin: 18px 0 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  font-size: 13px; color: var(--ink-2);
}
.kunye b{ color: var(--ink); font-weight: 600 }

/* ---------------------------------------------------------------- sekmeler */
.sekmeler{
  display: flex; gap: 2px; margin: 26px 0 0;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.sekmeler::-webkit-scrollbar{ display: none }
.sekme{
  position: relative; flex: 0 0 auto;
  font-family: var(--font-marka); font-size: 14px; font-weight: 600; color: var(--ink-2);
  padding: 12px 16px 13px; min-height: 46px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .16s;
}
.sekme .adet{
  font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; background: var(--panel-solid); color: var(--ink-3);
}
.sekme[aria-selected="true"]{ color: var(--optivera) }
.sekme[aria-selected="true"]::after{
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: var(--optivera); border-radius: 2px;
}
.sekme[aria-selected="true"] .adet{ background: var(--optivera-acik); color: var(--optivera) }
@media (hover: hover) and (pointer: fine){ .sekme:hover{ color: var(--ink) } }

/* ---------------------------------------------------------------- filtreler */
.filtreler{
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.filtreler input[type=search], .filtreler select{
  font: inherit; font-size: 13.5px; color: var(--ink);
  height: 40px; padding: 0 12px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .16s, background .16s;
}
.filtreler input[type=search]{ flex: 1 1 220px; min-width: 0 }
.filtreler select{ flex: 0 1 auto; max-width: 220px; padding-right: 30px }
.filtreler input:focus, .filtreler select:focus{ outline: none; border-color: var(--optivera); background: #FFFFFF }
.filtreler .kutucuk{
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.filtreler .kutucuk input{ width: 17px; height: 17px; accent-color: var(--optivera) }
.filtre-temizle{
  font-family: var(--font-marka); font-size: 12.5px; font-weight: 600;
  color: var(--optivera); padding: 0 8px; height: 40px;
}
.filtre-temizle[hidden]{ display: none }
.sonuc-sayisi{
  font-size: 12.5px; color: var(--ink-3); margin: 12px 0 4px;
  font-variant-numeric: tabular-nums;
}

/* filtre seçimleri: masaüstünde hep açık, telefonda düğmeyle açılır */
.filtre-secimler{ display: contents }
.filtre-ac{
  display: none; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 9px; border: 1px solid var(--line); background: #FFFFFF;
  font-family: var(--font-marka); font-size: 13px; font-weight: 600; color: var(--ink);
}
.filtre-ac svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8 }
.filtre-ac .adet{
  min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 11.5px;
  background: var(--optivera); color: #FFFFFF; font-variant-numeric: tabular-nums;
}
.filtre-ac .adet:empty{ display: none }

/* ---------------------------------------------------------------- katalog tablosu
   Masaüstünde ızgara satırlar; 820px altında her ürün bir blok. */
.katalog{ margin: 0; padding: 0; list-style: none }
.katalog-bas, .k-satir{
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: var(--kolonlar);
}
.katalog-bas{
  font-family: var(--font-marka); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #FFFFFF; z-index: 1;
}
.katalog-bas .sag, .k-satir .sag{ text-align: right; justify-self: end }
.k-satir{
  padding: 12px; border-bottom: 1px solid var(--line-soft);
  transition: background .16s;
}
.k-satir.pasif .k-urun, .k-satir.pasif .k-ozellik{ opacity: .55 }
@media (hover: hover) and (pointer: fine){ .k-satir:hover{ background: var(--panel) } }

.k-urun{ min-width: 0 }
.k-ad{ font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35 }
.k-kod{
  font-size: 12px; color: var(--ink-3); margin-top: 2px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.k-ozellik{ display: flex; flex-wrap: wrap; gap: 4px; min-width: 0 }
.ozellik{
  font-size: 12px; line-height: 1; padding: 5px 7px; border-radius: 5px;
  background: var(--panel-solid); color: var(--ink-2); white-space: nowrap;
}
.ozellik.vurgu{ background: var(--optivera-acik); color: var(--optivera); font-weight: 600 }
.k-aralik{ font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.5 }
.k-aralik b{ color: var(--ink); font-weight: 600 }
.k-fiyat{ font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap }
.k-fiyat small{ display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3) }
.k-fiyat.soluk{ color: var(--ink-3); font-weight: 500 }
.k-fiyat.ustu-cizili{ color: var(--ink-3); text-decoration: line-through; font-weight: 500 }

/* satır içi fiyat girişi (yalnız sahip) */
.fiyat-giris{ position: relative; width: 112px }
.fiyat-giris input{
  width: 100%; height: 38px; font: inherit; font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--ink);
  padding: 0 24px 0 8px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .16s, background .16s, box-shadow .2s;
}
.fiyat-giris::after{
  content: "₺"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 12.5px; color: var(--ink-3); pointer-events: none;
}
.fiyat-giris input::placeholder{ color: var(--ink-3); font-weight: 500 }
.fiyat-giris input:focus{ outline: none; border-color: var(--optivera); background: #FFFFFF }
.fiyat-giris input[aria-invalid="true"]{ border-color: var(--red) }
.fiyat-giris.kaydedildi input{ border-color: var(--onay); box-shadow: 0 0 0 3px rgba(23,99,63,.12) }
.fiyat-giris.kaydediliyor input{ opacity: .6 }
.marj{ display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums }
.marj.eksi{ color: var(--red) }

/* satışta anahtarı */
.anahtar{ position: relative; display: inline-flex; align-items: center; cursor: pointer; min-height: 44px; min-width: 44px; justify-content: center }
.anahtar input{ position: absolute; opacity: 0; width: 1px; height: 1px }
.anahtar .ray{
  width: 38px; height: 22px; border-radius: 999px; background: #CFD7E2;
  position: relative; transition: background .2s var(--ease-out);
}
.anahtar .ray::after{
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(12,23,48,.25);
  transition: transform .2s var(--ease-out);
}
.anahtar input:checked + .ray{ background: var(--optivera) }
.anahtar input:checked + .ray::after{ transform: translateX(16px) }
.anahtar input:focus-visible + .ray{ outline: 2px solid var(--turkuaz); outline-offset: 3px }
.anahtar input:disabled + .ray{ opacity: .5 }
.durum-yazi{ font-size: 12.5px; color: var(--ink-2) }

/* tür başına kolon düzeni (sahip / çalışan) */
.katalog-kap{ --kolonlar: minmax(200px, 2.2fr) minmax(170px, 2fr) minmax(110px, 1.1fr) 104px 120px 64px }
.katalog-kap.sahip{ --kolonlar: minmax(190px, 2fr) minmax(150px, 1.7fr) minmax(104px, 1fr) 96px 120px 120px 64px }

.bos-katalog{
  border: 1px dashed var(--line); border-radius: 14px;
  padding: 40px 24px; margin: 18px 0; text-align: center;
}
.bos-katalog h2{ font-family: var(--font-marka); font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 6px }
.bos-katalog p{ font-size: 13.5px; color: var(--ink-2); margin: 0 auto; max-width: 52ch; line-height: 1.6 }
.bos-katalog .dugme{ width: auto; display: inline-block; margin-top: 16px }

/* yükleniyor iskeleti */
.iskelet{ display: grid; gap: 10px; margin-top: 16px }
.iskelet span{
  height: 52px; border-radius: 8px;
  background: linear-gradient(90deg, var(--panel) 0%, var(--line-soft) 50%, var(--panel) 100%);
  background-size: 200% 100%; animation: iskelet 1.4s linear infinite;
}
@keyframes iskelet{ to{ background-position: -200% 0 } }

.daha-fazla{ display: flex; justify-content: center; margin: 18px 0 0 }
.daha-fazla .dugme{ width: auto }

@media (max-width: 820px){
  .katalog-bas{ display: none }
  .k-satir{
    grid-template-columns: 1fr auto; grid-template-areas:
      "urun durum" "ozellik ozellik" "aralik aralik" "fiyat fiyat";
    gap: 8px 12px; padding: 14px 4px;
  }
  .k-urun{ grid-area: urun }
  .k-ozellik{ grid-area: ozellik }
  .k-aralik{ grid-area: aralik }
  .k-durum{ grid-area: durum }
  .k-fiyatlar{ grid-area: fiyat; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: start }
  .k-satir .k-fiyatlar > *{ text-align: left; justify-self: stretch }
  .k-fiyatlar .fiyat-giris{ width: 100% }
  .k-fiyat small{ display: inline; margin-left: 4px }
  .k-fiyatlar .etiketli::before{
    content: attr(data-etiket); display: block; margin-bottom: 4px;
    font-family: var(--font-marka); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  }
  .marj{ text-align: left }
  .filtreler select{ flex: 1 1 140px; max-width: none }
  .filtre-ac{ display: inline-flex }
  .filtre-secimler{ display: none; flex-basis: 100% }
  .filtre-secimler.acik{ display: flex }
}
@media (min-width: 821px){ .k-fiyatlar{ display: contents } }

/* ---------------------------------------------------------------- personel */
.alan input.davet-giris{
  font-family: var(--font-marka); font-size: 20px; font-weight: 500;
  letter-spacing: .16em; text-align: center; text-transform: uppercase;
}
.davet-kutu{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px; border: 1px solid var(--line); border-radius: 14px; margin: 14px 0 0;
}
.davet-kod{
  font-family: var(--font-marka); font-weight: 500; font-size: 30px;
  letter-spacing: .18em; color: var(--optivera); font-variant-numeric: tabular-nums;
  user-select: all;
}
.davet-kutu .bilgi{ flex: 1 1 220px; font-size: 13px; color: var(--ink-2); line-height: 1.55 }
.liste-satir{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.liste-satir .ana{ flex: 1 1 200px; min-width: 0 }
.liste-satir .ana b{ display: block; font-size: 14px; color: var(--ink); font-weight: 600 }
.liste-satir .ana span{ font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere }
.liste-satir .kod{ display: block; font-family: var(--font-marka); letter-spacing: .14em; font-weight: 600; font-size: 15px; color: var(--ink) }

/* ---------------------------------------------------------------- katalog yükleme */
.dosya-alani{
  display: grid; place-items: center; text-align: center; gap: 8px;
  padding: 34px 20px; border: 1.5px dashed #C3CCDA; border-radius: 14px;
  background: var(--panel); cursor: pointer;
  transition: border-color .16s, background .16s;
}
.dosya-alani:focus-within, .dosya-alani.uzerinde{ border-color: var(--optivera); background: var(--optivera-acik) }
.dosya-alani input{ position: absolute; opacity: 0; width: 1px; height: 1px }
.dosya-alani svg{ width: 34px; height: 34px; stroke: var(--optivera); fill: none; stroke-width: 1.6 }
.dosya-alani b{ font-family: var(--font-marka); font-size: 15px; color: var(--ink) }
.dosya-alani span{ font-size: 12.5px; color: var(--ink-3) }

.ozet-izgara{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 }
.ozet-hucre{ border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px }
.ozet-hucre span{
  display: block; font-family: var(--font-marka); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.ozet-hucre b{ display: block; margin-top: 4px; font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums }
.ozet-hucre b.kucuk{ font-size: 14px }

.hata-listesi{
  margin: 12px 0 0; padding: 0; list-style: none;
  border: 1px solid rgba(179,38,30,.25); border-radius: 10px; background: var(--red-dim);
  max-height: 320px; overflow: auto;
}
.hata-listesi li{ padding: 9px 14px; font-size: 13px; color: var(--ink); border-bottom: 1px solid rgba(179,38,30,.12) }
.hata-listesi li:last-child{ border-bottom: 0 }
.hata-listesi b{ color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums }

.secenek-satiri{ display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 13.5px; color: var(--ink) }
.secenek-satiri input{ width: 18px; height: 18px; accent-color: var(--optivera) }

.gecmis-satir{ display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft) }
.gecmis-satir .ust{ font-size: 14px; font-weight: 600; color: var(--ink) }
.gecmis-satir .alt{ font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums }
.gecmis-satir.geri .ust{ color: var(--ink-3); text-decoration: line-through }

.optik-sayfa .dugme.birincil-mavi{ background: var(--optivera); border-color: var(--optivera) }
.optik-sayfa .dugme:focus-visible,
.optik-sayfa a:focus-visible,
.optik-sayfa button:focus-visible{ outline: 2px solid var(--turkuaz); outline-offset: 3px }

@media (prefers-reduced-motion: reduce){
  .iskelet span{ animation: none }
  .anahtar .ray, .anahtar .ray::after, .k-satir, .sekme{ transition: none }
}


/* ==========================================================================
   OPTISMART — optik-optismart.html
   Solda reçete formu (masaüstünde yapışkan), sağda öneriler.
   ========================================================================== */
.os-notlar{ display: grid; gap: 8px; margin: 18px 0 0 }
.os-not{
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.os-not.taslak{ background: var(--temsili-zemin); border-color: #F0D9A8; color: #5C3A00 }
.os-not.gizli{ background: var(--optivera-acik); border-color: #CBD5F2; color: var(--ink) }
.os-not > span:last-child{ flex: 1 1 auto; min-width: 0 }
.os-not .temsili-etiket{ flex: none }
.os-not.gizli svg{ width: 18px; height: 18px; flex: none; stroke: var(--optivera); fill: none; stroke-width: 1.6 }

.os-izgara{ display: grid; gap: 24px; margin-top: 22px; align-items: start }
@media (min-width: 1000px){
  .os-izgara{ grid-template-columns: 400px minmax(0, 1fr); gap: 32px }
  .os-form{ position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow: auto; scrollbar-width: thin }
}

.os-form{ border: 1px solid var(--line); border-radius: 14px; padding: 6px 18px 16px; background: #FFFFFF }
.os-kume{ border: 0; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line-soft); min-width: 0 }
.os-kume:last-of-type{ border-bottom: 0 }
.os-kume legend{
  padding: 0; margin-bottom: 10px;
  font-family: var(--font-marka); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}
.os-kume legend small{ font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--ink-3); margin-left: 6px }

/* reçete ızgarası: göz | SPH | CYL */
.recete{ display: grid; grid-template-columns: 64px 1fr 1fr; gap: 8px; align-items: center }
.r-bas{ font-family: var(--font-marka); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--ink-3); text-align: center }
.r-goz{ font-family: var(--font-marka); font-size: 14px; font-weight: 600; color: var(--ink) }
.r-goz small{ display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--ink-3) }
.r-giris{
  width: 100%; height: 48px; min-width: 0;
  font-family: var(--font-marka); font-size: 19px; font-weight: 500; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  transition: border-color .16s, background .16s;
}
.r-giris::placeholder{ color: #A3ADC0; font-weight: 400 }
.r-giris:focus{ outline: none; border-color: var(--optivera); background: #FFFFFF; box-shadow: 0 0 0 3px var(--optivera-acik) }
.r-giris[aria-invalid="true"]{ border-color: var(--red); background: #FFFFFF }
.recete-add{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; margin-top: 10px }
.recete-add label{ font-family: var(--font-marka); font-size: 14px; font-weight: 600; color: var(--ink) }
.recete-add label small{ display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3) }
.os-ipucu{ font-size: 12.5px; line-height: 1.55; color: var(--ink-3); margin: 10px 0 0 }
.os-hatalar{ margin: 8px 0 0; padding: 0; list-style: none }
.os-hatalar li{ font-size: 13px; color: var(--red); padding: 4px 0 }

/* segment ve seçenek kartları — dokunmatikte 44px+ */
.segment{ display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.segment label{ position: relative; cursor: pointer }
.segment label + label{ border-left: 1px solid var(--line) }
.segment input, .secenek-kartlar input, .cipler input{ position: absolute; opacity: 0; width: 1px; height: 1px }
.segment span{
  display: grid; place-content: center; text-align: center; min-height: 48px; padding: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background .16s, color .16s;
}
.segment small{ font-size: 11px; font-weight: 500; color: inherit; opacity: .8 }
.segment input:checked + span{ background: var(--optivera); color: #FFFFFF }
.segment input:focus-visible + span{ outline: 2px solid var(--turkuaz); outline-offset: -3px }

.secenek-kartlar{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.secenek-kartlar label{ cursor: pointer; position: relative }
.secenek-kartlar span{
  display: block; height: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .16s, background .16s;
}
.secenek-kartlar b{ display: block; font-size: 14px; color: var(--ink) }
.secenek-kartlar small{ display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4 }
.secenek-kartlar input:checked + span{ border-color: var(--optivera); background: var(--optivera-acik); box-shadow: inset 0 0 0 1px var(--optivera) }
.secenek-kartlar input:checked + span b{ color: var(--optivera) }
.secenek-kartlar input:checked + span small{ color: var(--ink-2) }   /* mavi açık zeminde --ink-3 4,1:1 kalıyordu */
.kural-listesi li.uygulandi .kural-cip{ background: #FFFFFF }
.secenek-kartlar input:focus-visible + span{ outline: 2px solid var(--turkuaz); outline-offset: 2px }

.cipler{ display: flex; flex-wrap: wrap; gap: 8px }
.cipler label{ cursor: pointer; position: relative }
.cipler span{
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: border-color .16s, background .16s, color .16s;
}
.cipler input:checked + span{ background: var(--optivera); border-color: var(--optivera); color: #FFFFFF }
.cipler input:checked + span::before{
  content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}
.cipler input:focus-visible + span{ outline: 2px solid var(--turkuaz); outline-offset: 2px }
@media (hover: hover) and (pointer: fine){
  .segment input:not(:checked) + span:hover, .cipler input:not(:checked) + span:hover{ background: var(--panel) }
  .secenek-kartlar input:not(:checked) + span:hover{ border-color: #B9C3D6 }
}
.os-form .alan select{
  width: 100%; height: 44px; font: inherit; font-size: 14px; color: var(--ink);
  padding: 0 10px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line);
}
.os-form .alan input{ height: 44px }
.os-form .alan select:focus, .os-form .alan input:focus{ outline: none; border-color: var(--optivera); background: #FFFFFF }
.os-form .ikili{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.os-form .ikili .alan{ margin: 0 }
.os-eylem{ display: flex; justify-content: flex-end; padding-top: 10px }

/* sonuç */
.os-sonuc{ min-width: 0 }
.os-bos{ border: 1px dashed var(--line); border-radius: 14px; padding: 48px 24px; text-align: center }
.os-bos svg{ width: 56px; height: 56px; stroke: var(--optivera); fill: none; stroke-width: 1.6; margin-bottom: 8px }
.os-bos h2{ font-family: var(--font-marka); font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 6px }
.os-bos p{ font-size: 13.5px; color: var(--ink-2); margin: 0 auto; max-width: 44ch; line-height: 1.6 }

.os-ozet{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden }
.os-ozet-hucre{ padding: 14px 16px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft) }
.os-ozet-hucre span{
  display: block; font-family: var(--font-marka); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.os-ozet-hucre b{ display: block; margin: 4px 0; font-family: var(--font-marka); font-size: 20px; font-weight: 500; color: var(--optivera); line-height: 1.2 }
.os-ozet-hucre small{ display: block; font-size: 12px; line-height: 1.5; color: var(--ink-2) }

.kural-cip{
  display: inline-block; font-family: var(--font-marka); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 4px; background: var(--panel-solid); color: var(--ink-3);
  font-variant-numeric: tabular-nums; vertical-align: 1px; text-decoration: none;
}
@media (hover: hover) and (pointer: fine){ a.kural-cip:hover{ background: var(--optivera-acik); color: var(--optivera) } }

.os-uyarilar, .os-bilgiler{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px }
.os-uyarilar li{
  padding: 10px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink);
  border: 1px solid var(--line); background: var(--panel);
}
.os-uyarilar li b{ font-family: var(--font-marka); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-right: 6px }
.os-uyarilar li.yuksek{ background: #FDECEC; border-color: rgba(179,38,30,.3) }
.os-uyarilar li.yuksek b{ color: var(--red) }
.os-uyarilar li.orta{ background: var(--temsili-zemin); border-color: #F0D9A8 }
.os-uyarilar li.orta b{ color: var(--temsili) }
.os-uyarilar li.dusuk b{ color: var(--ink-3) }
.os-bilgiler li{ font-size: 13px; line-height: 1.55; color: var(--ink-2); padding-left: 16px; position: relative }
.os-bilgiler li::before{ content: ""; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--optivera) }

.os-urun-bas{ display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--line) }
.os-urun-bas h2{ font-family: var(--font-marka); font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; flex: 1 1 auto }
.os-urun-bas .adet{ font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--optivera-acik); color: var(--optivera); vertical-align: 2px }
.os-urun-bas .kutucuk{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; min-height: 40px }
.os-urun-bas .kutucuk input{ width: 17px; height: 17px; accent-color: var(--optivera) }
.os-ara-baslik{ font-family: var(--font-marka); font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 22px 0 8px }

.os-urunler{ list-style: none; margin: 0; padding: 0; counter-reset: urun }
.os-urun{ padding: 14px 4px 14px 36px; border-bottom: 1px solid var(--line-soft); position: relative; counter-increment: urun }
.os-urun::before{
  content: counter(urun); position: absolute; left: 4px; top: 15px;
  font-family: var(--font-marka); font-size: 15px; font-weight: 300; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.os-urun.one-cikan::before{ color: var(--optivera); font-weight: 600 }
.os-urun.uygun-degil, .os-urun.satista-degil{ opacity: .62 }
.os-urun-ust{ display: flex; justify-content: space-between; gap: 12px; align-items: flex-start }
.os-urun-ust b{ display: block; font-size: 14.5px; color: var(--ink) }
.os-urun-ust .k-kod{ display: block }
.os-fiyat{ text-align: right; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums }
.os-fiyat small{ font-size: 11.5px; font-weight: 500; color: var(--ink-3) }
.os-fiyat .teslim{ display: block; margin-top: 2px }
.os-urun .k-ozellik{ margin-top: 8px }
.os-neden{ list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px }
.os-neden li{ font-size: 12.5px; color: var(--ink-2); padding-left: 16px; position: relative }
.os-neden li.arti::before{
  content: ""; position: absolute; left: 2px; top: .38em; width: 8px; height: 4px;
  border-left: 2px solid #17633F; border-bottom: 2px solid #17633F; transform: rotate(-45deg);
}
.os-neden li.eksi{ color: var(--temsili) }
.os-neden li.eksi::before{
  content: ""; position: absolute; left: 3px; top: .5em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--temsili);
}

/* kurallar */
.os-kurallar{ margin-top: 32px; border: 1px solid var(--line); border-radius: 14px; padding: 0 18px }
.os-kurallar summary{
  cursor: pointer; list-style: none; padding: 16px 0; min-height: 44px;
  font-family: var(--font-marka); font-size: 15px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.os-kurallar summary::-webkit-details-marker{ display: none }
.os-kurallar summary::after{ content: "+"; margin-left: auto; font-size: 20px; font-weight: 300; color: var(--ink-3) }
.os-kurallar[open] summary::after{ content: "−" }
.os-kurallar summary .adet{ font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--temsili-zemin); color: var(--temsili) }
.kural-listesi{ list-style: none; margin: 8px 0 18px; padding: 0 }
.kural-listesi li{ padding: 12px 0; border-top: 1px solid var(--line-soft); scroll-margin-top: 20px }
.kural-listesi li.uygulandi{ background: var(--optivera-acik); margin: 0 -18px; padding-left: 18px; padding-right: 18px }
.kural-listesi li:target{ outline: 2px solid var(--optivera); outline-offset: -2px }
.kural-ust{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.kural-ust b{ font-size: 14px; color: var(--ink) }
.kural-durum{ margin-left: auto; font-family: var(--font-marka); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--temsili) }
.kural-listesi p{ font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 6px 0 0; max-width: 90ch }

/* dar ekranda öneriler formun altında: alttaki şerit özeti gösterir ve oraya götürür */
.os-serit{ display: none }
@media (max-width: 999px){
  .os-serit{
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); z-index: 20;
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
    background: var(--optivera); color: #FFFFFF; text-decoration: none;
    box-shadow: 0 10px 30px -12px rgba(0, 38, 149, .55);
    transform: translateY(0); transition: transform .22s var(--ease-out), opacity .22s;
  }
  .os-serit[hidden]{ display: flex; transform: translateY(140%); opacity: 0; pointer-events: none }
  .os-serit b{ font-family: var(--font-marka); font-weight: 600; font-size: 15px }
  .os-serit span{ font-size: 13px; opacity: .85; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .os-serit svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex: none }
  .optik-sayfa#optismart{ padding-bottom: calc(96px + var(--safe-b)) }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce){ .os-serit{ transition: none } }

@media (max-width: 520px){
  .os-ozet{ grid-template-columns: 1fr 1fr }
  .os-ozet-hucre b{ font-size: 17px }
  .os-urun-ust{ flex-direction: column; gap: 4px }
  .os-fiyat{ text-align: left }
}
@media (prefers-reduced-motion: reduce){
  .segment span, .secenek-kartlar span, .cipler span, .r-giris{ transition: none }
}

/* --- Başvuru: hizmet seçimi (OPTIVERA dekor / OptiSmart) --- */
.hizmet-secim{ border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 8px }
.hizmet-secim legend{ padding: 0; margin-bottom: 8px; font-family: var(--font-marka); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }
.alan .secim-satir{
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 13px 14px; border-radius: 11px; cursor: pointer;
  font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); transition: border-color .16s, background .16s;
}
.alan .secim-satir input{ width: 18px; height: 18px; flex: none; margin: 1px 0 0; padding: 0 }
.alan .secim-satir b{ font-family: var(--font-marka); font-weight: 600 }
.alan .secim-satir:has(input:checked){ border-color: var(--turkuaz) }
.alan .secim-satir:has(input:focus-visible){ outline: 2px solid var(--turkuaz); outline-offset: 2px }

/* ==========================================================================
   OptiSmart — Master Handoff 2.0 (3 Ekim 2026): AKS, prizma, marka, bütçe,
   cam çapı ölçüleri; durum kodları, en fazla üç öneri kartı, elenenler.
   ========================================================================== */
.recete{ grid-template-columns: 56px 1fr 1fr 0.8fr }
.recete-ek{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-top: 12px }
.recete-ek .kutucuk{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer }
.recete-ek .kutucuk input{ width: 18px; height: 18px; accent-color: var(--optivera) }
.recete-ek .alan{ margin: 0; min-width: 170px }
.recete-ek .alan label small, .olcu-izgara label small{ font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-left: 4px }
.os-form .alan input[type="date"]{ width: 100%; font: inherit; font-size: 14px; color: var(--ink); padding: 0 10px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); color-scheme: dark }
.segment.dortlu{ grid-template-columns: repeat(4, 1fr); margin-top: 10px }
.olcu-ac{ margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px }
.olcu-ac summary{ cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-family: var(--font-marka); font-size: 14px; font-weight: 600; color: var(--ink); list-style: none }
.olcu-ac summary::-webkit-details-marker{ display: none }
.olcu-ac summary small{ font-weight: 500; color: var(--ink-3) }
.olcu-ac summary::after{ content: "+"; margin-left: auto; font-size: 20px; font-weight: 300; color: var(--ink-3) }
.olcu-ac[open] summary::after{ content: "−" }
.olcu-izgara{ display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px }
.olcu-izgara .alan{ margin: 0 }

.os-sonuc{ display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--ink); border: 1px solid var(--line) }
.os-sonuc code{ font-size: 12px; opacity: .8 }
.os-sonuc-ok{ background: rgba(120,200,150,.12); border-color: rgba(120,200,150,.45) }
.os-sonuc-need-measurement, .os-sonuc-no-suitable-product{ background: var(--red-dim, rgba(255,138,128,.12)); border-color: rgba(255,138,128,.4) }
.os-sonuc-need-optician-review{ background: rgba(233,207,138,.14); border-color: rgba(233,207,138,.5) }
.os-durumlar{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px }
.os-durumlar li{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--ink); border: 1px solid var(--line) }
.os-durumlar li.dur{ background: var(--red-dim, rgba(255,138,128,.12)); border-color: rgba(255,138,128,.4) }
.os-durumlar li.uyari{ background: var(--temsili-zemin) }
.os-durumlar code, .os-elenen code{ font: 700 11px var(--font-marka); letter-spacing: .08em; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.25); color: var(--ink) }
.os-durumlar span{ flex: 1 1 200px }
.os-kesin-yok{ margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line); font-size: 14px; color: var(--ink-2) }
.os-kesin-yok b{ color: var(--ink) }
.os-surum-k{ font-family: var(--font-marka); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-3) }

.os-kartlar{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 4px }
.os-kart{ display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel) }
.os-kart.rol-tam{ border-color: var(--optivera); box-shadow: inset 0 0 0 1px var(--optivera) }
.os-kart header{ display: flex; justify-content: space-between; align-items: flex-start; gap: 8px }
.os-rol{ font-family: var(--font-marka); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--optivera) }
.os-puan{ font-family: var(--font-marka); font-size: 22px; font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums }
.os-puan small{ font-size: 11px; font-weight: 500; color: var(--ink-3) }
.os-kart h3{ margin: 0; font-family: var(--font-marka); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3 }
.os-kart .k-kod{ margin: -4px 0 0; font-size: 12.5px; color: var(--ink-3) }
.os-kart-fiyat{ display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line-soft, var(--line)); border-bottom: 1px solid var(--line-soft, var(--line)) }
.os-kart-fiyat b{ font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums }
.os-kart-fiyat small{ font-size: 12px; color: var(--ink-3) }
.os-kart .os-neden{ display: grid; gap: 4px }
.os-kriter{ margin: 0; display: grid; gap: 5px }
.os-kriter div{ display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; align-items: center }
.os-kriter dt{ font-size: 12px; color: var(--ink-2) }
.os-kriter dt small{ color: var(--ink-3) }
.os-kriter dd{ margin: 0; display: flex; align-items: center; gap: 6px }
.os-cubuk{ flex: 1; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--optivera) var(--v), rgba(127,127,127,.2) 0) }
.os-deger{ width: 24px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2) }
.os-surum{ margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3) }
.os-onay{ margin-top: auto; min-height: 44px; border-radius: 10px; border: 1px dashed var(--line); background: transparent; font: 600 13.5px var(--font-marka); color: var(--ink-2); cursor: pointer; transition: background-color .16s, color .16s, transform .16s var(--ease-out, ease-out) }
.os-onay[aria-pressed="true"]{ border-style: solid; border-color: var(--optivera); background: var(--optivera-acik); color: var(--optivera) }
.os-onay:active{ transform: scale(.98) }
.os-onay:focus-visible{ outline: 2px solid var(--optivera); outline-offset: 2px }

.os-elenen{ margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px }
.os-elenen summary{ cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--font-marka); font-size: 14px; font-weight: 600; color: var(--ink-2) }
.os-elenen ul{ list-style: none; margin: 0; padding: 0 0 6px; display: grid; gap: 8px }
.os-elenen li{ font-size: 13px; line-height: 1.5; color: var(--ink-2) }
.os-elenen li b{ color: var(--ink) }

/* --- Fiyat kuralları (optik-fiyat.html, veritabanı 11) --- */
.fiyat-form{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line) }
.fiyat-form .alan{ margin: 0 }
.fiyat-form select, .fiyat-form input{ width: 100%; height: 44px; font: inherit; font-size: 14px; color: var(--ink); padding: 0 10px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line) }
.fiyat-form select:focus, .fiyat-form input:focus{ outline: none; border-color: var(--optivera) }
.fiyat-form .dugme{ height: 44px; width: 100% }
.satir-eylem{ display: flex; gap: 8px; flex-wrap: wrap }
.gecmis-liste{ list-style: none; margin: 8px 0 0; padding: 0 }
.gecmis-liste li{ display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto 92px; gap: 4px 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line-soft, var(--line)); font-size: 13.5px; color: var(--ink-2) }
.g-urun{ color: var(--ink); min-width: 0; overflow-wrap: anywhere }
.g-fiyat{ font-variant-numeric: tabular-nums; white-space: nowrap }
.g-durum{ font: 700 11px var(--font-marka); letter-spacing: .1em; text-transform: uppercase }
.g-durum.d-onay_bekliyor{ color: var(--temsili) }
.g-durum.d-reddedildi{ color: var(--red) }
.g-durum.d-onaylandi, .g-durum.d-uygulandi{ color: var(--optivera) }
.g-gerekce{ grid-column: 2 / -1; font-size: 12.5px; color: var(--ink-3) }
.g-kim{ font-size: 12.5px; color: var(--ink-3); text-align: right }
@media (max-width: 640px){
  .gecmis-liste li{ grid-template-columns: minmax(0, 1fr) auto }
  .g-tarih{ grid-column: 1 / -1; font-size: 12px; color: var(--ink-3) }
  .g-gerekce{ grid-column: 1 / -1 }
}
.os-kart-fiyat .dogrulanmadi{ color: var(--temsili) }
.liste-islem{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px }
.liste-islem input[type="date"]{ height: 36px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; color-scheme: dark }

/* --- Görsel kullanım profili (Yeni Teknoloji Handoff, 6 Ekim 2026 §1) --- */
.os-profil .os-ipucu{ margin: 0 0 12px }
.os-soru{ display: grid; gap: 6px; margin-top: 12px; min-width: 0 }
.os-soru-ad{ font-size: 13px; font-weight: 600; color: var(--ink) }
.os-soru-ad small{ font-weight: 500; color: var(--ink-3); margin-left: 4px }
.segment.besli{ grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)) }
.segment.besli span{ min-height: 44px; font-size: 12.5px; padding: 4px }
.os-soru .segment.dortlu{ margin-top: 0 }
.os-takip{ margin: 8px 0 0 2px; padding: 2px 0 6px 12px; border-left: 2px solid var(--optivera-acik) }
.os-takip .alan{ margin: 8px 0 0 }
.os-profil .ikili{ margin-top: 2px }
.os-profil .cipler{ margin-top: 12px }

.os-profil-sonuc{ margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel) }
.os-profil-sonuc h2{ margin: 0 0 10px; font-family: var(--font-marka); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink) }
.os-profil-sonuc h2 small{ font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--ink-3); margin-left: 6px }
.os-eksenler{ margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 22px }
.os-eksenler div{ display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center }
.os-eksenler dt{ font-size: 12.5px; color: var(--ink-2) }
.os-eksenler dd{ margin: 0; display: flex; align-items: center; gap: 6px }
.os-eksenler .belirsiz{ font-size: 12px; color: var(--ink-3); font-style: italic }
.os-suruculer{ margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3) }

.os-neden-ac{ border-top: 1px solid var(--line-soft, var(--line)); padding-top: 2px }
.os-neden-ac summary{ cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--font-marka); color: var(--ink); list-style: none }
.os-neden-ac summary::-webkit-details-marker{ display: none }
.os-neden-ac summary::after{ content: "+"; margin-left: auto; font-size: 18px; font-weight: 300; color: var(--ink-3) }
.os-neden-ac[open] summary::after{ content: "−" }
.os-neden-ac dl{ margin: 0 0 6px; display: grid; gap: 8px }
.os-neden-ac dt{ font: 700 10.5px var(--font-marka); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3) }
.os-neden-ac dd{ margin: 2px 0 0 }
.os-neden-ac ul{ margin: 0; padding-left: 16px; display: grid; gap: 2px }
.os-neden-ac li{ font-size: 12.5px; line-height: 1.5; color: var(--ink-2) }
.os-neden-ac .belirsiz li{ color: var(--temsili) }

.os-optipedia{ margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.os-optipedia > span{ font-size: 12.5px; color: var(--ink-3); margin-right: 4px }
.os-optipedia a{ display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-decoration: none }
.os-optipedia a:hover{ border-color: var(--optivera); color: var(--ink) }
.os-optipedia a:focus-visible{ outline: 2px solid var(--optivera); outline-offset: 2px }

.os-denetim{ margin-top: 14px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3) }
.os-denetim summary{ cursor: pointer; min-height: 36px; display: flex; align-items: center; font-weight: 600 }
.os-denetim code{ font: 600 11px var(--font-marka); letter-spacing: .06em; color: var(--ink-2) }

/* --- TL → USD/EUR karşılığı (TCMB, bilgi amaçlı) --- */
.os-doviz-sec{ margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3) }
.os-doviz-sec select{ height: 34px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px }
.os-doviz-sec select:focus-visible{ outline: 2px solid var(--optivera); outline-offset: 2px }
.os-kart-fiyat .os-doviz{ color: var(--ink-2); font-variant-numeric: tabular-nums }
.os-kur-not{ margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--ink-3) }
.os-kur-not.hata{ color: var(--temsili) }

/* katalog telefonda (9 Ekim 2026): satır 350 px'ten yarıya iner.
   Özellikler tek satır kayar, ölçü aralığı " · " ile tek paragraf,
   fiyat kutuları yan yana üç sütun. */
.k-ay{ display: none; font-style: normal }
@media (max-width: 820px){
  .k-satir{ gap: 6px 12px; padding: 12px 2px }
  .k-ozellik{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent) }
  .k-ozellik::-webkit-scrollbar{ display: none }
  .k-ozellik .ozellik{ flex: none }
  .k-aralik br{ display: none }
  .k-ay{ display: inline }
  .k-fiyatlar{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px }
  .k-fiyatlar .etiketli::before{ font-size: 10px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
}