/* Hazır Web Paneli sayfası (/indirmeler): şema, adımlar ve Panel Tasarımcısı */
.archive-page .guide-layout.panel-page { grid-template-columns: minmax(0, 1fr); }
.archive-page .guide-layout.panel-page .guide-sidebar { display: none; }
.panel-guide h2 { margin: 30px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #c3c7d4; }
.panel-guide h3 { margin: 0 0 6px; font: bold 15px Tahoma, Arial, sans-serif; color: #505f72; }
.panel-guide code { padding: 0 4px; border-radius: 3px; background: #dfe3ec; font-size: 12px; }
.pg-lead { font-size: 15px; line-height: 1.55; }
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pg-jump { font-weight: bold; }

/* Çalışma şeması */
.pg-schema { display: grid; grid-template-columns: 1fr 64px 1.2fr 64px 1.2fr; align-items: center; gap: 0; margin: 16px 0 14px; }
.pg-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 128px; padding: 14px 8px 10px; border: 1px solid #9b9eaa; border-radius: 12px;
    background: linear-gradient(#fff, #e4e7ef); box-shadow: 0 1px 3px #45465c30; text-align: center; font-size: 12px; }
.pg-node strong { color: #3a3f58; font-size: 13px; }
.pg-node small { color: #354b88; font-family: Consolas, "Courier New", monospace; font-size: 11px; overflow-wrap: anywhere; }
.pg-node em { color: #5d6078; font-style: normal; font-size: 11px; }
.pg-node-panel { border-color: #646782; background: linear-gradient(#f5f3fb, #d8d4ea); box-shadow: 0 0 0 3px #64678233, 0 2px 5px #45465c40; }
.pg-node-cloud { background: linear-gradient(#f3f6ff, #dbe3f7); }
.pg-link { position: relative; height: 2px; margin: 0 4px; background: repeating-linear-gradient(90deg, #505f72 0 6px, transparent 6px 10px); }
.pg-link::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 8px solid #505f72; border-right: 0; }
.pg-link span { position: absolute; left: -6px; right: -6px; bottom: 7px; color: #5d6078; font-size: 9px; line-height: 1.2; text-align: center; }
.pg-icon { display: block; width: 38px; height: 30px; margin-bottom: 4px; }
.pg-icon-site { border: 2px solid #505f72; border-top-width: 7px; border-radius: 4px; background: linear-gradient(#fff 55%, #cfd4e2 55%); }
.pg-icon-panel { border: 2px solid #3e4058; border-radius: 4px; background: linear-gradient(#3b3c40 0 30%, #d7d7d7 30% 45%, #ebeef3 45%); box-shadow: inset 6px -6px 0 -3px #646782; }
.pg-icon-cloud { width: 44px; border-radius: 16px 16px 10px 10px; background: radial-gradient(circle at 30% 60%, #7f95cf 0 11px, transparent 12px), radial-gradient(circle at 60% 40%, #7f95cf 0 13px, transparent 14px), radial-gradient(circle at 80% 65%, #7f95cf 0 9px, transparent 10px); }
.pg-facts { margin: 8px 0 0; padding-left: 20px; line-height: 1.5; }
.pg-facts li + li { margin-top: 5px; }

.pg-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pg-needs > div { display: grid; gap: 3px; padding: 12px; border: 1px solid #b9bdcc; border-radius: 10px; background: #f7f8fc; font-size: 12px; }
.pg-needs strong { color: #3a3f58; font-size: 13px; }
.pg-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#8989a5, #646782); color: #fff; font: bold 12px Tahoma, sans-serif; }

/* Adımlar */
.pg-steps { margin: 0; padding: 0; list-style: none; counter-reset: pgstep; display: grid; gap: 12px; }
.pg-step { counter-increment: pgstep; display: grid; grid-template-columns: minmax(0, 1fr) 244px; gap: 14px; align-items: center; padding: 16px 16px 16px 58px; position: relative;
    border: 1px solid #b9bdcc; border-radius: 12px; background: #f7f8fc; }
.pg-step::before { content: counter(pgstep); position: absolute; left: 14px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(#8989a5, #646782); border: 1px solid #555a75; color: #fff; font: bold 15px Tahoma, sans-serif; box-shadow: inset 0 1px #ffffff55; }
.pg-step p { margin: 0 0 6px; line-height: 1.5; }
.pg-tips { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; }
.pg-small-btn { display: inline-block; padding: 4px 12px; border: 1px solid #a09bb8; border-radius: 3px; background: linear-gradient(#f5f3fb, #e0ddef 50%, #cbc9df); color: #393c57; font-weight: bold; font-size: 12px; text-decoration: none; }
.pg-art { display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; min-height: 110px; padding: 10px; border-radius: 10px; background: #7d7da0; box-shadow: inset 0 0 10px #3c3d5a55; font-size: 11px; }
.pg-arrow { color: #fff; font: bold 20px Tahoma, sans-serif; text-shadow: 0 1px #3c3d5a; }
.pg-zip { display: grid; place-items: center; width: 50px; height: 62px; border-radius: 4px; background: repeating-linear-gradient(#f0c040 0 4px, #d9a522 4px 8px) 50% 0 / 8px 34px no-repeat, linear-gradient(#fff, #dfe3ec); border: 1px solid #555a75; color: #3a3f58; font: bold 12px Tahoma, sans-serif; padding-top: 30px; }
.pg-folder, .pg-tree { display: grid; gap: 1px; min-width: 0; padding: 6px 8px; border-radius: 4px; background: #fff; border: 1px solid #555a75; color: #3a3f58; font-family: Consolas, "Courier New", monospace; font-size: 10px; }
.pg-folder b, .pg-tree b { padding-left: 18px; background: linear-gradient(#f3cf5d, #e0ab26) 0 2px / 14px 10px no-repeat; font-family: Tahoma, sans-serif; font-size: 11px; }
.pg-hl { margin: 0 -4px; padding: 0 4px; border-radius: 2px; background: #ffe7a1; color: #5a3d00; font-weight: bold; }
.pg-indent { padding-left: 12px; color: #5d6078; }
.pg-file { position: relative; display: grid; place-items: center; width: 64px; height: 78px; padding-top: 18px; white-space: nowrap; border: 1px solid #555a75; border-radius: 3px 14px 3px 3px; background: linear-gradient(#fff, #e9ecf4); color: #354b88; font: bold 10px Consolas, monospace; }
.pg-file small { position: absolute; top: 6px; left: 6px; padding: 0 4px; border-radius: 2px; background: #4c9a3a; color: #fff; font: bold 9px Tahoma, sans-serif; }
.pg-mini-form { display: grid; gap: 5px; width: 92px; padding: 8px; border-radius: 6px; background: #ebeef3; border: 1px solid #555a75; }
.pg-mini-form i { display: block; height: 8px; border-radius: 2px; background: #fff; border: 1px solid #a6aec3; }
.pg-mini-form .pg-mini-rooms, .pg-v-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; height: auto; border: 0; background: none; }
.pg-mini-rooms u, .pg-v-rooms u { display: block; height: 9px; border-radius: 2px; background: linear-gradient(#9a9cb4, #646782); }
.pg-mini-rooms u:nth-child(2), .pg-v-rooms u:nth-child(2) { background: linear-gradient(#7f95cf, #354b88); }
.pg-mini-rooms u:nth-child(3), .pg-v-rooms u:nth-child(3) { background: linear-gradient(#7fc39c, #2e7d4f); border-radius: 6px; }
.pg-browser { width: 190px; border: 1px solid #3e4058; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 2px 6px #23243a55; }
.pg-bar { display: flex; align-items: center; gap: 3px; padding: 4px 5px; background: linear-gradient(#e9e9ee, #c9cad3); }
.pg-bar span { width: 6px; height: 6px; border-radius: 50%; background: #9a9cb4; }
.pg-bar em { flex: 1; margin-left: 4px; padding: 1px 4px; border-radius: 3px; background: #fff; color: #354b88; font: 8px Consolas, monospace; font-style: normal; white-space: nowrap; overflow: hidden; }
.pg-view { display: grid; gap: 4px; padding: 0 0 6px; background: #7d7da0; }
.pg-view i { display: block; }
.pg-v-head { height: 16px; background: linear-gradient(#5a5b60, #232428); }
.pg-v-menu { height: 7px; background: linear-gradient(#f2f2f2, #a3a3a3); }
.pg-v-box { height: 18px; margin: 0 6px; border-radius: 4px; background: #ebeef3; }
.pg-v-rooms { margin: 0 6px; padding: 5px; border-radius: 4px; background: #ebeef3; }

/* Tasarımcı */
.pg-designer { display: grid; gap: 14px; }
.pg-designer fieldset { margin: 0; padding: 12px 14px 14px; border: 1px solid #b9bdcc; border-radius: 10px; background: #f7f8fc; min-width: 0; }
.pg-designer legend { padding: 0 6px; color: #505f72; font: bold 13px Tahoma, sans-serif; }
.pg-designer label { display: grid; gap: 4px; margin-top: 8px; color: #3a3f58; font-size: 12px; font-weight: bold; }
.pg-designer label small { font-weight: normal; color: #6a6d84; }
.pg-designer input:not([type=color]), .pg-designer select { box-sizing: border-box; width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid #a6aec3; border-radius: 3px; background: #fff; font: 13px Tahoma, Arial, sans-serif; color: #2f2f2f; }
.pg-designer input[type=color] { width: 40px; height: 30px; padding: 1px 2px; border: 1px solid #a6aec3; border-radius: 3px; background: #fff; cursor: pointer; }
.pg-designer input:invalid:not(:placeholder-shown) { border-color: #c0392b; }
.pg-layout-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.pg-layout-set legend { grid-column: 1 / -1; }
.pg-hint { margin: 2px 0 8px; font-size: 12px; color: #5d6078; }
.pg-room-head, .pg-room-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 44px 112px 84px; gap: 6px; align-items: center; }
.pg-room-head { padding: 0 6px; color: #6a6d84; font-size: 11px; font-weight: bold; }
.pg-room-rows { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.pg-room-row { padding: 5px 6px; border: 1px solid #c9cede; border-radius: 6px; background: #fff; }
.pg-room-row.is-dragging { opacity: .45; }
.pg-room-row.is-over { box-shadow: 0 -3px 0 #646782; }
.pg-room-row input:not([type=color]), .pg-room-row select { padding: 4px 6px; font-size: 12px; }
.pg-grip { cursor: grab; color: #8a8da3; font: bold 14px/1 Tahoma, sans-serif; text-align: center; user-select: none; letter-spacing: -2px; }
.pg-row-btns { display: flex; gap: 3px; justify-content: flex-end; }
.pg-row-btns button, .pg-room-tools button, .pg-preview-bar button, .pg-reset, .pg-embed button { padding: 3px 8px; border: 1px solid #a09bb8; border-radius: 3px; background: linear-gradient(#f5f3fb, #e0ddef 50%, #cbc9df); color: #393c57; font: bold 12px Tahoma, sans-serif; cursor: pointer; }
.pg-row-btns button { width: 24px; padding: 3px 0; }
.pg-row-btns button:disabled { opacity: .35; cursor: default; }
.pg-row-btns .pg-del { color: #a0261b; }
.pg-room-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.pg-apply { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pg-apply label { display: flex; align-items: center; gap: 5px; margin: 0; }
.pg-apply select { width: auto; }
.pg-empty-rooms { padding: 10px; border: 1px dashed #b9bdcc; border-radius: 6px; color: #6a6d84; font-size: 12px; text-align: center; }
.pg-preview-wrap { border: 1px solid #555a75; border-radius: 10px; overflow: hidden; background: #7d7da0; }
.pg-preview-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: linear-gradient(#f2f2f2, #d7d7d7 45%, #bdbdbd 55%, #a9a9a9); border-bottom: 1px solid #55566b; font-size: 12px; }
.pg-preview-tip { margin-right: auto; margin-left: 10px; color: #4a4d63; font-size: 11px; }
.pg-preview-bar button.is-on { background: linear-gradient(#646782, #7d819c); border-color: #555a75; color: #fff; }
.pg-preview { position: relative; overflow: hidden; }
.pg-preview iframe { display: block; border: 0; transform-origin: 0 0; background: #7d7da0; }
.pg-finish { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pg-finish .panel-download { padding: 8px 16px; border: 1px solid #26386e; border-radius: 3px; background: linear-gradient(#4a62a6, #2f4585); box-shadow: inset 0 1px #ffffff40; color: #fff; cursor: pointer; font: bold 13px Tahoma, sans-serif; }
.pg-finish .panel-download:hover { background: linear-gradient(#566fb5, #354b88); }
.pg-designer select:disabled { opacity: .5; }
.pg-finish p { flex-basis: 100%; margin: 0; font-size: 12px; min-height: 1em; }
.pg-finish p.is-error { color: #b00000; font-weight: bold; }
.pg-finish p.is-ok { color: #2d6b22; font-weight: bold; }
.pg-embed { margin-top: 14px; }
.pg-embed textarea { box-sizing: border-box; width: 100%; margin: 6px 0; font: 11px Consolas, monospace; }
#gomme-kodu textarea { box-sizing: border-box; width: 100%; margin: 6px 0 0; padding: 8px; border: 1px solid #a09bb8; border-radius: 6px; background: #23242c; color: #e8e6f5; font: 12px/1.45 Consolas, monospace; resize: vertical; }
#gomme-kodu button { padding: 4px 12px; border: 1px solid #a09bb8; border-radius: 3px; background: linear-gradient(#f5f3fb, #e0ddef 50%, #cbc9df); color: #393c57; font: bold 12px Tahoma, sans-serif; cursor: pointer; }

/* Gömme kodu şeması: sitenin kendi düğmeleri + sohbet penceresi */
.pg-embed-demo { display: grid; grid-template-columns: 130px 1fr; gap: 10px; max-width: 460px; margin: 10px 0; padding: 10px; border: 1px dashed #9b9eaa; border-radius: 10px; background: #fff; }
.pg-embed-rooms { display: grid; gap: 6px; align-content: start; }
.pg-embed-rooms span { padding: 5px 8px; border-radius: 6px; background: #e3e5ee; color: #3a3f58; font: bold 11px Tahoma, sans-serif; }
.pg-embed-rooms span.is-on { background: #354b88; color: #fff; }
.pg-embed-window { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 1fr 18px; gap: 4px; height: 96px; padding: 5px; border: 2px ridge #ddd; background: #3c3d44; }
.pg-embed-window i { border-radius: 2px; background: #eceef4; }
.pg-embed-window i:first-child { grid-row: 1 / 3; background: #d8dae6; }
.pg-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.pg-designer label.pg-check { display: flex; align-items: center; gap: 6px; }
.pg-designer label.pg-check input { width: auto; margin: 0; }
.pg-colors input[type=color]:disabled { opacity: .55; }
.pg-colors input[type=color] { width: 100%; height: 30px; padding: 1px; }
.pg-colors small { grid-column: 1 / -1; margin-top: 4px; color: #6a6d84; font-size: 11px; }
.pg-hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pg-support { margin-top: 22px; }

@media (max-width: 640px) {
    .pg-schema { grid-template-columns: 1fr; gap: 26px; }
    .pg-link { width: 2px; height: 26px; margin: -18px auto; background: repeating-linear-gradient(#505f72 0 6px, transparent 6px 10px); }
    .pg-link::after { right: -5px; top: auto; bottom: -4px; border: 6px solid transparent; border-top: 8px solid #505f72; border-bottom: 0; }
    .pg-link span { left: 12px; right: auto; bottom: auto; top: 4px; width: 200px; text-align: left; }
    .pg-needs, .pg-layout-set { grid-template-columns: 1fr; }
    .pg-step { grid-template-columns: 1fr; padding-left: 52px; }
    .pg-room-head { display: none; }
    .pg-room-row { grid-template-columns: 22px minmax(0, 1fr) 44px; }
    .pg-room-row .r-label, .pg-room-row .r-shape { grid-column: 2 / -1; }
    .pg-room-row .pg-row-btns { grid-column: 1 / -1; }
}
html[dir=rtl] .panel-guide .pg-schema, html[dir=rtl] .panel-guide .pg-art { direction: ltr; }