/* PAYON · Tanıtım sitesi: üç yeni pano (04.11.2026) — Mekânın dünyası, Kendiniz kurun, Donanım kataloğu.
   Pano dünyasının kuralları korunur: 12 renk jetonu, oluk satırı, damga durum etiketi, gölge yalnız panoya konan nesnede (cihaz gövdesi, fiş). */

/* ---------- Mekânın dünyası: seçilebilir pano satırları + canlı ekran ---------- */
.dv-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 0 56px; align-items: start; margin-top: 8px; }
.dv-satir { cursor: pointer; border-radius: 4px; outline-offset: 2px; }
.dv-satir[aria-checked="true"] { background: linear-gradient(90deg, color-mix(in srgb, var(--kehribar) 16%, transparent), transparent 70%); }
.dv-satir[aria-checked="true"] .sm-fiyat { color: var(--murekkep); }
.dv-satir:focus-visible { outline: 3px solid var(--murekkep); }
.dv-satir:hover { background: color-mix(in srgb, var(--oluk) 45%, transparent); }
.dv-yuva { margin: 0; justify-self: center; width: min(100%, 340px); }
.dv-cihaz { padding: 14px 12px 18px; border-radius: 14px; background: var(--murekkep-2); box-shadow: 0 24px 40px -26px rgba(17, 42, 74, .6), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.dv-ekran { position: relative; aspect-ratio: 375 / 680; overflow: hidden; border-radius: 4px; background: var(--zemin); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.dv-olcek { position: absolute; left: 0; top: 0; width: 375px; height: 680px; transform-origin: 0 0; transform: scale(var(--olcek, .8)); }
.dv-olcek iframe { display: block; width: 375px; height: 680px; border: 0; background: var(--zemin); pointer-events: none; transition: opacity .35s var(--ease); }
.dv-olcek iframe.gec { opacity: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) { .dv-olcek iframe { pointer-events: auto; } }
.dv-yuva figcaption { margin-top: 12px; font-size: 13px; color: var(--soluk); }
.dv-yuva figcaption a { color: var(--murekkep); }
.dv-alt { margin-top: 22px; }

/* ---------- Kendiniz kurun: rehberin canlı durumlu örneği ---------- */
.kr-ic { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 0 56px; align-items: start; margin-top: 8px; }
.kr-kart { padding: 18px; background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 10px; }
.kr-ozet { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--oluk-koyu); }
.kr-halka { flex: none; position: relative; width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center; background: conic-gradient(var(--nane) calc(var(--p, 100) * 1%), var(--oluk) 0); transition: background .5s var(--ease); font: 800 17px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; color: var(--murekkep); }
.kr-halka::before { content: ""; position: absolute; inset: 6px; border-radius: 999px; background: var(--beyaz); }
.kr-halka span { position: relative; }
.kr-ozet b { display: block; font-size: 18px; font-weight: 700; } .kr-ozet small { display: block; margin-top: 2px; font-size: 14px; color: var(--soluk); }
.kr-b { margin: 16px 0 4px; font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }
.kr-s { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--oluk); font-size: 16px; }
.kr-s:last-child { border-bottom: 0; }
.kr-ik { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--oluk-koyu); display: grid; place-items: center; font: 800 13px/1 "Barlow", sans-serif; color: transparent; transition: border-color .3s, color .3s; }
.kr-s.ok .kr-ik { border-color: var(--nane-koyu); color: var(--nane-koyu); }
.kr-s small { display: block; font-size: 13px; color: var(--soluk); margin-top: 1px; }
.kr-damga { font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-2deg); white-space: nowrap; color: var(--kehribar-koyu); }
.kr-s.hazir .kr-damga { color: var(--nane-koyu); animation: damga-bas .35s var(--ease) both; }
.kr-alt { margin-top: 16px; }

/* ---------- Donanım kataloğu: sayılı pano satırları + talep fişi ---------- */
.kt-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 0 56px; align-items: start; margin-top: 8px; }
.kt-satir { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.kt-ikon { width: 56px; height: 56px; display: grid; place-items: center; border: 1.5px solid var(--oluk-koyu); border-radius: 6px; background: var(--beyaz); color: var(--murekkep); }
.kt-satir.dolu .kt-ikon { border-color: var(--murekkep); }
.kt-satir.pop .kt-ikon svg { animation: kt-zipla .4s var(--ease); } @keyframes kt-zipla { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-4deg); } 100% { transform: none; } }
.kt-fis-ik { display: inline-block; vertical-align: -6px; margin-right: 8px; color: var(--murekkep-2); }
@media (prefers-reduced-motion: reduce) { .kt-satir.pop .kt-ikon svg { animation: none; } }
.kt-adet { display: inline-flex; align-items: center; gap: 6px; }
.kt-adet button { width: 44px; height: 44px; border-radius: 6px; border: 1.5px solid var(--murekkep); background: var(--beyaz); color: var(--murekkep); font: 800 22px/1 "Barlow Condensed", sans-serif; cursor: pointer; transition: transform .2s var(--ease); }
.kt-adet button:active { transform: scale(.94); }
.kt-adet button:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 2px; }
.kt-adet output { min-width: 28px; text-align: center; font: 800 20px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.kt-satir.dolu { background: linear-gradient(90deg, color-mix(in srgb, var(--kehribar) 16%, transparent), transparent 70%); }
.kt-fis .fis-s { animation: none; } .kt-fis .fis-s.yeni { animation: fis-yaz .55s var(--ease) both; }
.kt-fis .fis-s { grid-template-columns: 1fr auto; }
.kt-not { margin: 14px 0 0; font-size: 13px; color: var(--soluk); }
#kt-gonder[aria-disabled="true"] { opacity: .5; pointer-events: none; }

@media (max-width: 900px) {
  .dv-ic, .kr-ic, .kt-ic { grid-template-columns: 1fr; gap: 28px 0; }
  .dv-yuva { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .dv-olcek iframe, .kr-halka, .kr-ik { transition: none; } .kr-s.hazir .kr-damga, .kt-fis .fis-s.yeni { animation: none; } }