/* PAYON Entegrasyon Merkezi: ana sitenin harfli menü panosu dilini (../style.css) geliştirici yüzeyine taşır. */
code { font: 500 .88em/1.3 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; background: color-mix(in srgb, var(--murekkep) 7%, transparent); padding: .08em .35em; border-radius: 4px; color: var(--murekkep-2); overflow-wrap: anywhere; }
.pano { scroll-margin-top: var(--oluk-h); }
.en-lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; max-width: 60ch; margin: 22px 0 18px; color: var(--murekkep-2); }
.en-giris-liste { max-width: 880px; }
.en-not { max-width: 70ch; margin: 18px 0 0; color: var(--soluk); font-size: 15px; }
.en-yontemler { max-width: 880px; margin-top: 18px; }
.en-yontemler .sm-isim code { font-weight: 700; font-size: .95em; color: var(--murekkep); }

/* ---------- danışman: soru ve yanıt dökümü (balon yok; "SİZ ·" / "PAYON ·" satırları) ---------- */
.en-sohbet { max-width: 880px; margin-top: 22px; }
.en-konusma { background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 6px; padding: 6px clamp(14px, 2.4vw, 24px); max-height: min(70vh, 640px); overflow-y: auto; box-shadow: var(--golge-tent); }
.en-bos { margin: 14px 0; color: var(--soluk); font-size: 16px; }
.en-mesaj { padding: 14px 0; border-bottom: 1px dashed var(--oluk-koyu); }
.en-mesaj:last-child { border-bottom: 0; }
.en-kim { display: block; margin-bottom: 6px; font: 800 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--kehribar-koyu); }
.en-mesaj.siz .en-kim { color: var(--soluk); }
.en-mesaj.siz .en-metin { font-weight: 600; }
.en-metin { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.en-metin > :first-child { margin-top: 0; } .en-metin > :last-child { margin-bottom: 0; }
.en-metin p { margin: .55em 0; }
.en-metin h3, .en-metin h4, .en-metin h5 { font: 800 19px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; margin: 1.1em 0 .4em; color: var(--murekkep); }
.en-metin ul, .en-metin ol { margin: .5em 0; padding-left: 1.3em; }
.en-metin li { margin: .2em 0; }
.en-metin pre { margin: .7em 0; padding: 12px 14px; background: var(--murekkep); color: #E9EEF6; border-radius: 6px; overflow-x: auto; font: 500 13px/1.55 ui-monospace, "SFMono-Regular", Consolas, monospace; -webkit-overflow-scrolling: touch; }
.en-metin pre code { background: none; color: inherit; padding: 0; font: inherit; }
.en-kesik { color: var(--soluk); font-size: 14px; font-style: italic; }
.en-bekle { display: inline-flex; gap: 5px; padding: 6px 0; }
.en-bekle i { width: 7px; height: 7px; border-radius: 50%; background: var(--kehribar); animation: en-nabiz 1s infinite ease-in-out; }
.en-bekle i:nth-child(2) { animation-delay: .15s; } .en-bekle i:nth-child(3) { animation-delay: .3s; }
@keyframes en-nabiz { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

.en-oneriler { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.en-oneri { appearance: none; font: 700 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; min-height: 40px; padding: 0 14px; background: var(--beyaz); color: var(--murekkep-2); border: 1.5px solid var(--oluk-koyu); border-radius: 999px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.en-oneri:hover { border-color: var(--kehribar); background: color-mix(in srgb, var(--kehribar) 10%, var(--beyaz)); }
.en-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 16px; }
.en-form textarea, .en-alt input, .en-alt select { width: 100%; font: 500 16px/1.4 "Barlow", system-ui, sans-serif; color: var(--murekkep); background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 6px; padding: 12px 14px; resize: vertical; }
.en-form textarea { min-height: 54px; max-height: 220px; }
.en-form .tent { margin-top: 0; white-space: nowrap; }
.tent:disabled { opacity: .55; cursor: progress; transform: none; }
.en-bant { margin: 12px 0 0; padding: 10px 14px; border-radius: 6px; font-size: 15px; background: color-mix(in srgb, var(--kehribar) 16%, var(--beyaz)); color: var(--kehribar-koyu); border: 1.5px solid color-mix(in srgb, var(--kehribar) 55%, transparent); }

/* ---------- simülasyon ---------- */
.en-sim { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 22px; align-items: start; }
.en-alan { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.en-alan legend { padding: 0; margin-bottom: 10px; font: 800 16px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.en-senaryolar { display: grid; gap: 8px; }
.en-secenek { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 14px; background: var(--beyaz); border: 1.5px solid var(--oluk-koyu); border-radius: 6px; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.en-secenek:hover { border-color: var(--murekkep-2); }
.en-secenek:has(input:checked) { border-color: var(--murekkep); box-shadow: inset 4px 0 0 var(--kehribar), var(--golge-tent); }
.en-secenek input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--murekkep); }
.en-secenek b { display: block; font: 800 18px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.en-secenek small { display: block; margin-top: 3px; font-size: 14px; color: var(--soluk); line-height: 1.4; }
.en-alt { margin-top: 12px; padding-left: 2px; }
.en-etiket { display: block; margin-bottom: 6px; font: 700 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.en-ipucu { margin: 8px 0 0; font-size: 14px; color: var(--soluk); }
.en-calistir { width: 100%; }

/* adisyon şeridi: yazıcıdan çıkan beyaz şerit, tırtıklı uç */
.en-serit, .en-serit-bos { background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 6px 6px 0 0; padding: 16px clamp(14px, 2.4vw, 22px) 26px; box-shadow: var(--golge-tent); position: relative; }
.en-serit::after, .en-serit-bos::after { content: ""; position: absolute; left: -1.5px; right: -1.5px; bottom: -11px; height: 11px; background: conic-gradient(from -45deg at bottom, transparent 90deg, var(--beyaz) 0) 0 0 / 14px 11px repeat-x; filter: drop-shadow(0 1.5px 0 var(--murekkep)); }
.en-serit-bos { color: var(--soluk); text-align: center; padding: 48px 20px 54px; }
.en-serit-bos p { margin: 0; }
.en-serit-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 2px dashed var(--oluk-koyu); }
.en-serit-ad { display: block; font: 800 24px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.en-serit-hedef { display: block; margin-top: 4px; font-size: 14px; color: var(--soluk); overflow-wrap: anywhere; }
.en-damga { flex: none; padding: 6px 12px; border: 3px solid currentColor; border-radius: 6px; font: 800 22px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; transform: rotate(-6deg) scale(1); transform-origin: center; mix-blend-mode: multiply; animation: en-bas .4s var(--ease) both; }
.en-damga.uyumlu { color: var(--nane-koyu); } .en-damga.duzelt { color: var(--kehribar-koyu); }
@keyframes en-bas { from { transform: rotate(-6deg) scale(1.9); opacity: 0; } }
.en-adimlar { list-style: none; margin: 0; padding: 0; }
.en-adim { border-bottom: 1px dashed var(--oluk-koyu); animation: en-yaz .35s var(--ease) both; }
@keyframes en-yaz { from { opacity: 0; transform: translateY(-6px); } }
.en-adim summary { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; align-items: baseline; padding: 11px 0; cursor: pointer; list-style: none; }
.en-adim summary::-webkit-details-marker { display: none; }
.en-adim .no { font: 800 17px/1 "Barlow Condensed", sans-serif; color: var(--kehribar-koyu); }
.en-adim .ad { font-size: 16px; font-weight: 600; line-height: 1.3; }
.en-adim .ad small { display: block; font-weight: 500; font-size: 13px; color: var(--soluk); }
.en-adim .yontem { font: 700 13px/1 ui-monospace, Consolas, monospace; color: var(--murekkep-2); background: color-mix(in srgb, var(--murekkep) 7%, transparent); padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.en-adim .sonuc { font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; min-width: 74px; text-align: right; }
.en-adim.ok .sonuc { color: var(--nane-koyu); } .en-adim.hata .sonuc { color: var(--hata); } .en-adim.atlandi .sonuc, .en-adim.opsiyonel .sonuc { color: var(--soluk); }
.en-adim.atlandi summary, .en-adim.opsiyonel summary { opacity: .75; }
.en-adim[open] summary { border-bottom: 1px solid var(--oluk); }
.en-ayrinti { padding: 12px 0 16px 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.en-sorun { margin: 0; padding: 10px 12px; background: color-mix(in srgb, var(--hata) 9%, var(--beyaz)); border-left: 4px solid var(--hata); font-size: 14px; border-radius: 0 6px 6px 0; }
.en-sorun.hafif { background: var(--kece); border-left-color: var(--oluk-koyu); }
.en-ayrinti h4 { margin: 0 0 4px; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); }
.en-ayrinti pre { margin: 0; padding: 10px 12px; background: var(--murekkep); color: #E9EEF6; border-radius: 6px; overflow-x: auto; max-height: 280px; font: 500 12.5px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace; -webkit-overflow-scrolling: touch; }
.en-beklenen { margin: 0; font-size: 14px; color: var(--soluk); }
.en-serit-alt { margin: 14px 0 0; font-size: 14px; color: var(--soluk); }

.en-sim-sol, .en-sim-sag { min-width: 0; }
@media (max-width: 900px) { .en-sim { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .en-form { grid-template-columns: 1fr; }
  .en-form .tent { width: 100%; }
  .en-adim summary { grid-template-columns: 22px 1fr auto; }
  .en-adim .yontem { display: none; }
  .en-ayrinti { padding-left: 0; }
  .en-damga { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .en-adim, .en-damga, .en-bekle i { animation: none; } }

/* üst çubuk: bağlantılar tek satırda kalır, dar ekranda tabela notu gizlenir */
.menu a { white-space: nowrap; }
@media (max-width: 960px) { .tabela-not { display: none; } .menu { gap: 16px; } }

/* ---------- demo videosu: pano çerçeveli, tent gölgeli ---------- */
.en-video { margin: 24px 0 0; max-width: 1040px; }
.en-video-cerceve { position: relative; background: var(--murekkep); border: 1.5px solid var(--murekkep); border-radius: 8px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(17,42,74,.55), var(--golge-tent); }
.en-video-cerceve::before, .en-video-cerceve::after { content: ""; position: absolute; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--olukK, #D6D1C6); opacity: .7; }
.en-video-cerceve::before { left: 4px; } .en-video-cerceve::after { right: 4px; }
.en-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--murekkep); border-radius: 3px; }
.en-video figcaption { margin-top: 12px; font: 700 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.en-metin-kutu { max-width: 1040px; margin-top: 14px; }
.en-metin-kutu summary { cursor: pointer; font: 700 16px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--murekkep-2); padding: 6px 0; }
.en-metin-kutu ol { margin: 8px 0 0; padding-left: 1.4em; color: var(--murekkep-2); font-size: 16px; line-height: 1.55; }
.en-metin-kutu li { margin: .35em 0; }