/* Lower-page typography from sopranochat-archive@af48a537.
   The existing canvas header, monitor, outer frame and chat are preserved. */
.archive-page .text { font: 14px Tahoma, Arial, Helvetica, sans-serif; color: #2f2f2f; }
.archive-page .minimedtext { font: bold 12px Tahoma, Arial, Helvetica, sans-serif; color: #505f72; }
.archive-page .minitext { font: 12px Tahoma, Arial, Helvetica, sans-serif; color: #2f2f2f; }
.archive-page .bigtext { font: bold 16px Tahoma, Arial, Helvetica, sans-serif; color: #505f72; }
.archive-page .medtext { font: bold 14px Tahoma, Arial, Helvetica, sans-serif; color: #505f72; }
.archive-page .foot { font: 10px Arial, Tahoma, sans-serif; color: #555595; padding: 10px; }
.archive-page a,
.archive-page a:visited { color: #48546b; font-weight: 600; text-decoration: none; }
.archive-page a:hover { color: #2d374b; text-decoration: underline; text-underline-offset: 3px; }
.archive-page details { border-bottom: 1px solid #b9bdcc; padding: 10px 0; }
.archive-page summary { cursor: pointer; color: #505f72; font-weight: bold; }
.archive-page details p { max-width: 550px; line-height: 1.5; }
.archive-page input, .archive-page textarea, .archive-page select, .archive-page button { font: 13px Tahoma, Arial, sans-serif; }
.archive-page textarea { resize: vertical; }
.archive-page button { padding: 5px 20px; border: 1px solid #636381; background: #7d7da0; color: white; cursor: pointer; }
.archive-page :focus-visible { outline: 2px solid #354b88; outline-offset: 2px; }
.archive-page #contactStatus { max-width: 410px; min-height: 18px; }
.archive-page #contactStatus[data-state="error"] { color: #9d1717; }
.archive-page #contactStatus[data-state="success"] { color: #216135; }
.archive-page .reference-content { width: 625px; max-width: 100%; line-height: 1.55; font-size: 14px; }
.archive-page .reference-content h1 { margin: 0 0 12px; font: bold 20px Tahoma, Arial, sans-serif; color: #505f72; }
.archive-page .reference-content h2 { margin: 22px 0 10px; font-size: 16px; color: #505f72; }
.archive-page .reference-nav { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; margin: 12px 0 18px; border: 1px solid #a4abba; border-radius: 4px; background: linear-gradient(#f5f6f9, #d4d8e2); box-shadow: inset 0 1px #fff, 0 1px 2px #45465c20; font: 12px Tahoma, Arial, sans-serif; }
.archive-page .reference-nav a,
.archive-page .reference-nav a:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 9px; border: 1px solid #a6adbb; border-radius: 3px; background: linear-gradient(#fff, #e5e8ef 50%, #d3d8e3); box-shadow: inset 0 1px #fff; color: #39465a; font-weight: bold; text-decoration: none; text-shadow: 0 1px #fff; transition: background-color .15s, border-color .15s; }
.archive-page .reference-nav a:hover { background: #f7f8fc; border-color: #6c7891; color: #253552; }
.archive-page .reference-nav a:active { box-shadow: inset 0 1px 3px #34384c40; }
.archive-page .reference-nav a[aria-current="page"] { background: linear-gradient(#646782, #7d819c); border-color: #555a75; box-shadow: inset 0 1px 3px #35384955; color: #fff; text-shadow: 0 1px #42465d; }
.archive-page .reference-nav a:focus-visible { outline: 2px solid #354b88; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .archive-page .reference-nav a { transition: none; } }
.archive-page .reference-note { border-left: 3px solid #737394; padding: 10px 12px; background: #dfe2ec; }
.archive-page .reference-content pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; background: #fff; border: 1px solid #b9bdcc; font-size: 13px; }
.archive-page .reference-table { border-collapse: collapse; width: 100%; }
.archive-page .reference-table th, .archive-page .reference-table td { border: 1px solid #b9bdcc; padding: 7px; text-align: left; }
.archive-page .reference-table-scroll { overflow-x: auto; }
.archive-page .reference-icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.archive-page .reference-icons figure { margin: 0; padding: 8px 0; background: #e0e3ed; text-align: center; }
.archive-page .reference-icons img { min-width: 20px; height: 24px; object-fit: contain; }
.archive-page .reference-screenshots figure { margin: 20px 0; }
.archive-page .reference-screenshots img { max-width: 100%; height: auto; border: 1px solid #9a9bb0; }
.archive-page .reference-source { margin-top: 22px; font-size: 12px; }
.archive-page .portal-columns { display: flex; align-items: start; gap: 26px; }
.archive-page .portal-form { max-width: 280px; flex: 1; }
.archive-page .portal-form label, .archive-page .reference-quote label { display: block; margin: 12px 0; }
.archive-page .portal-form input, .archive-page .portal-form select { display: block; width: 100%; box-sizing: border-box; padding: 7px; margin-top: 5px; border: 1px solid #77778d; background: white; }
.archive-page [data-login-status] { min-height: 24px; color: #8b2020; }
.archive-page button:disabled { opacity: .6; cursor: wait; }
.archive-page[data-page="pricing"] .pricing-title { margin: 0; font-size: 18px; }
.archive-page[data-page="pricing"] .pricing-subtitle { margin: 5px 0 18px; color: #505f72; }
.archive-page[data-page="pricing"] .pricing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 24px; text-align: left; }
.archive-page[data-page="pricing"] .pricing-layout h2 { margin: 0 0 12px; }
.archive-page[data-page="pricing"] .pricing-scroll { overflow-x: auto; }
.archive-page[data-page="pricing"] .pricing-matrix { width: 100%; border-collapse: collapse; text-align: center; }
.archive-page[data-page="pricing"] .pricing-matrix caption { text-align: left; line-height: 1.4; margin-bottom: 10px; font-size: 13px; }
.archive-page[data-page="pricing"] .pricing-matrix th,
.archive-page[data-page="pricing"] .pricing-matrix td { border: 1px solid #999; padding: 5px; font-size: 13px; }
.archive-page[data-page="pricing"] .pricing-matrix th { background: #e7d8e9; }
.archive-page[data-page="pricing"] .pricing-matrix th[scope="row"],
.archive-page[data-page="pricing"] .pricing-matrix th[rowspan] { background: #e9e8d8; }
.archive-page[data-page="pricing"] .pricing-matrix td { background: #ece3dd; }
.archive-page[data-page="pricing"] .pricing-choice { width: 100%; min-height: 25px; padding: 3px 5px; border: 1px solid transparent; background: transparent; color: #48546b; font-weight: bold; }
.archive-page[data-page="pricing"] .pricing-choice:hover { background: #fff9f2; border-color: #b0a497; }
.archive-page[data-page="pricing"] .pricing-choice[aria-pressed="true"] { background: #73738f; border-color: #5a5a74; color: #fff; box-shadow: inset 0 1px 2px #4445; }
.archive-page[data-page="pricing"] .pricing-selection { align-self: start; padding: 14px; border: 1px solid #a5a5b7; background: #ebeef3; box-shadow: inset 0 0 8px #9da1af50; border-radius: 12px; }
.archive-page[data-page="pricing"] .archive-quote-form label { display: block; margin: 12px 0 5px; font-size: 13px; font-weight: bold; color: #505f72; }
.archive-page[data-page="pricing"] .archive-quote-form select { box-sizing: border-box; width: 100%; padding: 5px; border: 1px solid #9b9baa; background: #fff; color: #2f2f2f; }
.archive-page[data-page="pricing"] .archive-quote-form button { width: 100%; padding: 7px 4px; background: linear-gradient(#8989a5, #696982); border-color: #595973; }
.archive-page[data-page="pricing"] #pricingSelectionStatus { min-height: 34px; margin: 16px 0; font-size: 13px; line-height: 1.4; color: #505f72; }
.archive-page[data-page="pricing"] .pricing-note { font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.archive-page[data-page="pricing"] .pricing-footer { margin: 16px 0 0; text-align: left; line-height: 1.5; }
@media (max-width: 640px) {
    .archive-page[data-page="pricing"] .pricing-layout { grid-template-columns: 1fr; gap: 18px; }
}
.archive-page[data-page="guide"] #Table_01 { margin-bottom: 0; }
.archive-page .guide-title { margin: 0 0 18px; font-size: 18px; }
.archive-page .guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: start; gap: 20px; }
.archive-page .guide-frame { width: 100%; min-width: 0; }
.archive-page .guide-sidebar { margin-top: 0; }
.archive-page .guide-side-frame { width: 100%; }
.archive-page .guide-side-frame img { display: block; }
.archive-page .guide-side-content { padding: 0; background: transparent; }
.archive-page .guide-questions h2 { margin: 0 0 4px; font-size: 14px; color: #505f72; }
.archive-page .guide-questions section + section { margin-top: 24px; }
.archive-page .guide-questions details { padding: 12px 0; border-color: #c9ccd7; }
.archive-page .guide-questions details:last-child { border-bottom: 0; }
.archive-page .guide-questions summary { line-height: 1.4; }
.archive-page .guide-questions details p { margin: 10px 0 2px; line-height: 1.5; }
.archive-page .guide-links { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.archive-page .guide-links h2 { margin: 0 0 7px; font-size: 12px; color: #505f72; }
.archive-page .guide-links section + section { margin-top: 17px; }
.archive-page .guide-links a { display: flex; justify-content: flex-start; margin-top: 5px; padding: 0 8px; }
.archive-page .guide-links a,
.archive-page .guide-links a:visited { background: linear-gradient(#f5f3fb, #e0ddef 50%, #cbc9df); border-color: #a09bb8; color: #393c57; }
.archive-page .guide-links a:hover,
.archive-page .guide-links a:focus-visible { background: linear-gradient(#eeebfa, #d5cfee 50%, #bbb4d9); border-color: #7c709f; color: #302d4a; }
.archive-page .guide-links a:active { background: linear-gradient(#bbb4d9, #ddd7ef); }
@media (max-width: 640px) {
    .archive-page .guide-layout { grid-template-columns: 1fr; gap: 18px; }
    .archive-page .guide-sidebar { margin-top: 0; }
    .archive-page .guide-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .archive-page .guide-links section + section { margin-top: 0; }
}
.archive-page[data-page="home"] .home-content { line-height: 1.45; padding-top: 10px; }
.archive-page[data-page="home"] #Table_01 { margin-bottom: 0; }
.archive-page[data-page="home"] h1.bigtext { margin: 0 0 12px; font-size: 18px; }
.archive-page[data-page="home"] .home-intro { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.archive-page[data-page="home"] .home-intro img { flex: 0 0 89px; }
.archive-page[data-page="home"] .home-intro p { margin: 0; }
.archive-page[data-page="home"] .home-features { margin-top: 18px; }
.archive-page[data-page="home"] .home-feature-list { padding: 8px 0 0 24px; margin: 0; }
.archive-page[data-page="home"] .home-feature-list li, .archive-page[data-page="home"] .home-admin-list li { margin: 0 0 8px; }
.archive-page[data-page="home"] .home-management { margin-top: 8px; }
.archive-page[data-page="home"] .home-management::after { content: ""; display: block; clear: both; }
.archive-page[data-page="home"] .home-admin-list { clear: left; margin: 0; padding: 12px 0 16px 40px; }
.archive-page[data-page="home"] .home-side-copy { margin: 7px 0 3px; line-height: 1.5; }
.archive-page[data-page="home"] .home-features::after { content: ""; display: block; clear: both; }
.archive-page[data-page="home"] .home-tour { float: right; width: 175px; margin: 0 4px 8px 16px; }
.archive-page[data-page="home"] .home-detail-shots { display: contents; }
.archive-page[data-page="home"] .home-detail-shots figure { float: left; width: 112px; margin: 10px 12px 0 40px; }
.archive-page[data-page="home"] .home-detail-shots .home-settings-shot { width: 128px; margin: 0; }
.archive-page[data-page="home"] .home-detail-shots .home-menu-shot { float: right; width: 48px; margin: 0 10px 8px 14px; }
.archive-page[data-page="home"] .home-detail-shots .home-menu-shot img { max-height: 200px; object-fit: contain; }
.archive-page[data-page="home"] .home-tour .home-shot,
.archive-page[data-page="home"] .home-detail-shots .home-shot { box-shadow: 2px 3px 3px #0004; }
.archive-page[data-page="home"] .home-settings-shot .home-shot { border: 0; box-shadow: none; background: transparent; }
.archive-page[data-page="home"] .home-settings-shot .home-shot img { filter: none; }
.archive-page[data-page="home"] .home-shot { display: block; width: 100%; padding: 0; border: 1px solid #9397ac; background: #ebeef3; cursor: zoom-in; }
.archive-page[data-page="home"] .home-shot img { display: block; width: 100%; height: auto; }
.archive-page[data-page="home"] .home-offer-link { border-bottom: 1px solid #9093a8; }
/* MOBİL DUYURUSU — tanıtım listesiyle oda yönetimi arasındaki şerit.
   Renkler sayfanın kendi paletinden: leylak kenar (#7d7da0 çerçevenin tonu),
   #ebeef3 panel zemini, #505f72 yazı. Düğme .panel-download ile aynı lacivert. */
.archive-page[data-page="home"] .home-mobile { clear: both; margin: 16px 0 4px; padding: 12px 14px; box-sizing: border-box;
    background: linear-gradient(#f2f3f8, #e7e9f1); border: 1px solid #a4a8b9; border-left: 4px solid #7d7da0; border-radius: 8px; }
.archive-page[data-page="home"] .home-mobile h2 { margin: 0 0 6px; font: bold 15px Tahoma, Arial, sans-serif; color: #4a4d63; }
.archive-page[data-page="home"] .home-mobile p { margin: 0; }
.archive-page[data-page="home"] .home-mobile-list { margin: 0; padding: 8px 0 0 24px; }
.archive-page[data-page="home"] .home-mobile-list li { margin: 0 0 8px; }
.archive-page[data-page="home"] .home-mobile-list li:last-child { margin-bottom: 0; }
/* `p { margin: 0 }` bu satırdan daha güçlü (eleman seçicisi ekliyor); mağaza
   satırının boşluğu da eleman adıyla yazılmalı, yoksa uygulanmıyor. */
.archive-page[data-page="home"] .home-mobile p.home-mobile-store { margin-top: 12px; }
.archive-page[data-page="home"] .home-play { display: inline-block; padding: 9px 16px; background: #355497; color: #fff !important;
    border-radius: 4px; text-decoration: none; font: bold 12px Tahoma, Arial, sans-serif; }
/* ——— GÖSTERİM ALANI: web biçiminde bir kutu, telefon biçiminde bir kutu ———

   Renkler sayfanın kendi paletinden: leylak kenar (#7d7da0), #ebeef3 panel
   zemini, #505f72 yazı — mobil şeridiyle (.home-mobile) aynı aile.

   İki kutu YAN YANA ve ikisi de KENDİ BİÇİMİNDE: web olanı yatay ve esneyen,
   telefon olanı dar ve dikey. Ölçüler karelerin gerçek oranlarından:
   web kareleri ~756x608 ve 768x542, telefon kareleri 412x915. Oranlar tam
   aynı olmadığı için kare kutuya sığdırılarak oturuyor — kırpılmıyor,
   gerilmiyor; altta kalan boşluk kutunun kendi zemini. */
/* GÖRSELLER METNİN İÇİNDE, SAĞDA — eski tanıtım kutusunun kurgusu.
   Madde listesi soldan akıyor, yazı görselin çevresinden dolanıyor. */
.archive-page[data-page="home"] .home-stage { margin: 0 0 10px 14px; float: right; clear: right; }
/* ÖLÇÜLER ÖZGÜN SAYFADAN. Arşivdeki sayfa tarayıcıda ölçüldü
   (web.archive.org/web/20081227045312): içerik sütunu 493 piksel — bizimkiyle
   aynı —, oda görseli 175x140, yönetim görselleri 120x127 ve 131x127.

   Görseller KÜÇÜK ve bu kasıtlı: ayrıntı fareyle üzerine gelince açılan
   önizlemede (js/home-tour.js). Büyütülürse metne yer kalmıyor ve madde
   listesi tek kelimelik satırlara düşüyor — bir tur öyle olmuştu. */
.archive-page[data-page="home"] .home-stage--oda { width: 175px; }
/* Yönetim kümesi kendi bandında; özgün sayfada ikisi de ~127 piksel boyunda
   yan yanaydı. Bizimkinin biri yatay (pencere), biri dikey (telefon), o
   yüzden genişlikleri farklı ama kutuların BOYU eşit — yan yana durunca
   basamak oluşmuyor. */
.archive-page[data-page="home"] .home-stage--yonetim { width: 214px; }
.archive-page[data-page="home"] .home-stage--mobil { width: 78px; }
/* YÖNETİM KÜMESİ KENDİ BANDINDA, yanında metin yok — maddeler ALTINDAN
   devam ediyor. Bir tur sağa yaslanmıştı: yanına 140 piksellik bir şerit
   kalıyor ve maddeler tek kelimelik satırlara düşüyordu. Referansta da bu
   küme kendi satırında duruyor, yazı altında. */
.archive-page[data-page="home"] .home-stage-pair { clear: both; display: flex; align-items: flex-start;
    justify-content: flex-start; gap: 10px; margin: 14px 0 4px 34px; }
.archive-page[data-page="home"] .home-stage-pair .home-stage { float: none; clear: none; margin: 0; }
/* Yönetim maddeleri görselin yanından akıyor: bir tur burada `clear: left`
   vardı ve listeyi görselin ALTINA itiyordu. */
/* Maddeler kümenin ALTINDAN başlıyor. */
.archive-page[data-page="home"] .home-management { clear: both; }
.archive-page[data-page="home"] .home-admin-list { clear: both; padding: 10px 0 16px 24px; }
.archive-page[data-page="home"] .home-content::after { content: ""; display: block; clear: both; }
/* Kutunun boyu sabit: kare değişince sayfa zıplamasın. */
/* ÇERÇEVE YOK — Fırat: "görselleri çerçeve içine alma, altında gölge olması
   yeterli". Özgün sayfada da resimler çıplak duruyor, yalnız altlarında
   yumuşak bir gölge var.

   Kutu SABİT BOYDA ama GÖRÜNMEZ: kare değişince sayfanın zıplamaması için
   var, görünmesi için değil. Kendisi bir DÜĞME: fareyle üzerine gelince
   büyüğü açılıyor, tıklanınca tam boy (js/home-tour.js). */
.archive-page[data-page="home"] .home-stage-screen { display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 0; box-sizing: border-box; border: 0; background: none; box-shadow: none;
    cursor: zoom-in; }
.archive-page[data-page="home"] .home-stage--oda .home-stage-screen { height: 140px; }
.archive-page[data-page="home"] .home-stage--yonetim .home-stage-screen { height: 165px; }
.archive-page[data-page="home"] .home-stage--mobil .home-stage-screen { height: 165px; }
.archive-page[data-page="home"] .home-stage-screen img { max-width: 100%; max-height: 100%; width: auto; height: auto;
    display: block; box-shadow: 2px 3px 4px rgba(0, 0, 0, .3); transition: opacity .32s ease-out; }
/* FAREYLE AÇILAN BÜYÜK GÖRÜNTÜ. Özgün sayfada küçük resim 175x140, açılan
   büyüğü 351x260 — tam iki katı. Karelerimiz 756x608'e kadar; olduğu gibi
   açılsa ekranın yarısını kaplardı, o yüzden üst sınır var. */
#homeHoverPreview img { max-width: 420px; max-height: 340px; width: auto; height: auto; display: block;
    box-shadow: 3px 4px 8px rgba(0, 0, 0, .45); }
.archive-page[data-page="home"] .home-stage figcaption { margin-top: 5px; font: 10px Arial, sans-serif; color: #505f72; line-height: 1.35; }
.archive-page[data-page="home"] .home-stage figcaption strong { display: block; font: bold 11px Tahoma, Arial, sans-serif; color: #4a4d63; }
@media (prefers-reduced-motion: reduce) {
    .archive-page[data-page="home"] .home-stage-screen img { transition: none; }
}
/* Dar ekranda görseller metnin yanında değil ALTINDA: 330 piksellik bir
   görselin yanına sığacak metin kalmıyor. */
@media (max-width: 760px) {
    .archive-page[data-page="home"] .home-stage,
    .archive-page[data-page="home"] .home-stage-pair { float: none; margin: 10px auto; }
    .archive-page[data-page="home"] .home-stage--oda { width: auto; max-width: 330px; }
    .archive-page[data-page="home"] .home-stage-pair { justify-content: center; }
}

.archive-page[data-page="home"] .home-browser-card { width: 200px; margin: 0 auto 20px; padding: 16px 14px; box-sizing: border-box; text-align: left; font: 11px Arial, sans-serif; color: #505f72; }
.archive-page[data-page="home"] .home-browser-card h2 { margin: 0 0 12px; font: bold 14px Tahoma, Arial, sans-serif; color: #505f72; }
.archive-page[data-page="home"] .home-browser-card ul { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0; margin: 0; list-style: none; }
.archive-page[data-page="home"] .home-browser-card li { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 43px; }
.archive-page[data-page="home"] .home-browser-card li img { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
.archive-page[data-page="home"] .home-mobile-icon { width: 38px; flex: 0 0 38px; font: 36px/1 "Segoe UI Emoji", "Apple Color Emoji", sans-serif; text-align: center; }
.archive-page[data-page="home"] .home-browser-card li strong { font: bold 18px Arial, sans-serif; }
.archive-page[data-page="home"] .home-browser-note { margin: 13px 0 0; font: 11px/1.4 Arial, sans-serif; color: #505f72; }
.archive-page[data-page="home"] #homePreview { padding: 8px; border: 1px solid #5e607c; background: #ebeef3; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); box-shadow: 0 4px 24px #0007; }
.archive-page[data-page="home"] #homePreview::backdrop { background: #222333b0; }
.archive-page[data-page="home"] #homeHoverPreview { position: fixed; z-index: 1000; padding: 5px; border: 1px solid #5e607c; background: #ebeef3; box-shadow: 3px 4px 12px #0006; pointer-events: none; }
.archive-page[data-page="home"] #homeHoverPreview[hidden] { display: none; }
/* KUTU EKRANDAN TASMAZ. Kareler 756x608 ve 412x915 e kadar; olduklari gibi
   acilinca uzun telefon karesi kucuk ekranlarda asagi tasiyordu. Sinir
   kutunun KENDISINDE: resme verilen sinir sayfanin baska bir stiliyle
   eziliyordu (olculdu), kutu ise bu dosyada tek. vh kullaniliyor ki sinir
   ekranin boyuna gore olsun, sabit bir sayiya degil. */
.archive-page[data-page="home"] #homeHoverPreview { max-width: 460px; max-height: 76vh; overflow: hidden; }
.archive-page[data-page="home"] #homeHoverPreview img { max-width: 100%; max-height: calc(76vh - 42px); width: auto; height: auto; }
/* Kutunun başlığı: özgün sayfada da büyük görüntünün üstünde koyu, kalın bir
   satır duruyor. */
.archive-page[data-page="home"] #homeHoverTitle { display: block; margin: 1px 2px 6px; font: bold 15px Tahoma, Arial, sans-serif; color: #3f4152; }
.archive-page[data-page="home"] #homeHoverTitle[hidden] { display: none; }
.archive-page[data-page="home"] #homeHoverImage { display: block; width: auto; height: auto; max-width: min(560px, calc(100vw - 36px)); max-height: calc(100vh - 36px); }
.archive-page[data-page="home"] #homePreviewClose { display: block; margin: 0 0 8px auto; background: linear-gradient(#fafafa,#ccd0dd); color: #30374e; }
.archive-page[data-page="home"] #homePreviewImage { display: block; width: min(900px, calc(100vw - 52px)); height: auto; max-height: calc(100vh - 95px); object-fit: contain; }

.home-support-link{display:flex;align-items:center;gap:8px;margin:8px 0;text-align:left;text-decoration:none;color:#285537;background:linear-gradient(110deg,#e6f3d9,#c9e6bc);border:1px solid #b1c7a6;padding:5px}.home-support-link img{object-fit:cover;object-position:top;flex-shrink:0}.home-support-link span{font:11px/1.4 Arial}.home-support-link strong{display:block;font-size:14px}.home-panel-card{box-sizing:border-box;width:200px;margin:0 0 20px;padding:17px 15px;background:#e9edf3;border:1px solid #a4a8b9;border-radius:8px;box-shadow:inset 0 0 7px #9da1af;text-align:left;font:12px Arial}.home-panel-card p{margin:8px 0}.panel-download{display:inline-block;padding:10px 15px;margin:8px 6px 8px 0;background:#355497;color:#fff!important;border-radius:4px;text-decoration:none;font-weight:bold}

#panelSetup{padding:18px;background:#f7f8fc;border:1px solid #c9cede;border-radius:6px;max-width:530px}#panelSetup label{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;font-size:13px}#panelSetup input{box-sizing:border-box;width:100%;min-width:0;padding:8px;border:1px solid #a6aec3;border-radius:3px;font:13px Arial}#panelResult{margin:18px 0;padding:18px;background:#f7f8fc;border:1px solid #bfc9dc;border-radius:6px}#panelResult h3{margin-top:0}@media(max-width:600px){#panelSetup label{grid-template-columns:1fr;gap:4px}}

/* Shared auxiliary navigation stays beside the content, like the guide. */
.archive-page .guide-layout { text-align: left; }
.archive-page .guide-layout .reference-content { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.archive-page .guide-frame { table-layout: fixed; }
.archive-page .guide-links a[aria-current="page"] { background: linear-gradient(#646782, #7d819c); color: #fff; text-shadow: 0 1px #42465d; border-color: #555a75; }
.archive-page .guide-layout .portal-columns { flex-direction: column; gap: 14px; }
.archive-page #archiveContactForm table, .archive-page #archiveContactForm tbody, .archive-page #archiveContactForm tr, .archive-page #archiveContactForm td { display: block; width: auto; padding: 0; }
.archive-page #archiveContactForm tr { margin-bottom: 14px; }
.archive-page #archiveContactForm td:first-child { margin-bottom: 5px; }
.archive-page #archiveContactForm input:not([type="submit"]):not([type="reset"]), .archive-page #archiveContactForm textarea { width: 100%; box-sizing: border-box; }
.archive-page #archiveContactForm textarea { min-height: 140px; }
.archive-page .guide-layout #panelSetup label { grid-template-columns: 1fr; gap: 5px; }
@media (max-width: 640px) {
 .archive-page .guide-links { grid-template-columns: 1fr; }
 .archive-page .guide-links section + section { margin-top: 17px; }
}

.archive-page .guide-layout .panel-download + a { display: block; margin: 3px 0 10px; }

/* Continuous pale panels: no seams between the old sliced frame assets. */
.archive-page .guide-side-frame,
.archive-page .home-side-frame,
.archive-page .home-panel-card,
.archive-page[data-page="home"] .home-browser-card {
 background: #ebeef3;
 border: 1px solid #9b9eaa;
 border-radius: 15px;
 box-shadow: inset 0 0 8px #9da1af80, 0 1px 2px #45465c25;
}
.archive-page .guide-side-frame,
.archive-page .home-side-frame { border-collapse: separate; padding: 17px 15px; box-sizing: border-box; }

.archive-page[data-page="pricing"] .pricing-amount { font-weight: bold; white-space: nowrap; }
.archive-page[data-page="pricing"] .pricing-selection-price { display: block; margin-top: 10px; font-size: 18px; white-space: nowrap; color: #39465a; }
.archive-page[data-page="pricing"] .pricing-matrix th, .archive-page[data-page="pricing"] .pricing-matrix td { padding: 8px; }

/* Keep the existing price table and align its top edge with the package summary. */
.archive-page[data-page="pricing"] .pricing-section-title { margin: 0 0 10px; text-align: left; }
.archive-page[data-page="pricing"] .pricing-intro { margin: 0 0 12px; text-align: left; line-height: 1.5; }
.archive-page[data-page="pricing"] .pricing-layout { align-items: start; gap: 16px; grid-template-columns: minmax(0, 1fr) 180px; }
.archive-page[data-page="pricing"] .pricing-matrix { table-layout: fixed; }
.archive-page[data-page="pricing"] .pricing-matrix th,
.archive-page[data-page="pricing"] .pricing-matrix td { padding: 4px 8px; vertical-align: middle; font-family: Tahoma, Arial, sans-serif; font-size: 13px; }
.archive-page[data-page="pricing"] .pricing-matrix th:nth-child(2),
.archive-page[data-page="pricing"] .pricing-matrix td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.archive-page[data-page="pricing"] .pricing-choice { min-height: 25px; }
.archive-page[data-page="pricing"] .pricing-selection h2 { margin: 0 0 12px; }
@media(max-width:640px) {
 .archive-page[data-page="pricing"] .pricing-layout { grid-template-columns: 1fr; gap: 18px; }
}

/* Image-independent outer frame and rounded content panels. */
.archive-page #Table_01.site-frame { box-sizing: border-box; width: 739px; padding: 0; border: 7px solid #fbfdff; border-top: 0; background: #fff; margin: 0 auto;
    /* Eski SpeakyChat kenari: beyaz cercevenin hemen disinda koyu, dar bir golge. */
    box-shadow: 0 0 0 1px rgba(20, 20, 58, .5), 0 0 3px 1px rgba(20, 20, 58, .45), 0 0 9px rgba(20, 20, 58, .18); }
.archive-page .site-frame > table { width: 725px; table-layout: fixed; border-bottom: 10px solid #7d7da0; box-shadow: inset 1px 0 rgba(20, 20, 50, .28), inset -1px 0 rgba(20, 20, 50, .28); }
.archive-page[data-page="home"] .site-frame .css-panel { width: calc(100% - 12px); margin-left: 12px; }
.archive-page .css-panel { box-sizing: border-box; width: 100%; min-width: 0; padding: 32px; border: 1px solid #9b9eaa; border-radius: 15px; background: #ebeef3; box-shadow: inset 0 0 8px #9da1af80, 0 1px 2px #45465c25; text-align: left; }
.archive-page .css-panel .reference-content { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.archive-page .css-panel > .bigtext:first-child { margin-top: 0; }
.archive-page .home-side-frame { width: 200px; text-align: left; }
.archive-page .site-frame img { max-width: 100%; }

/* Compact price panel keeps the existing table and package summary together. */
.archive-page[data-page="pricing"] .css-panel { max-width: 620px; margin: 0 auto; padding: 22px; }

/* Ana sayfa tarayıcı kartı: eski SpeakyChat "For all Browsers!" kartının düzeni —
   renkli başlık bandı, köşede çapraz YENİ kurdelesi, marka satırları ve vurgulu Mobil satırı. */
.archive-page[data-page="home"] .home-browser-card { position: relative; padding: 0; overflow: hidden; background: #fff; }
.archive-page[data-page="home"] .home-browser-card h2 { margin: 0; padding: 7px 42px 7px 10px; background: linear-gradient(#5b6f9e, #3c4d76); color: #fff; font: bold 12px/1.25 Tahoma, Arial, sans-serif; text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.archive-page[data-page="home"] .home-browser-card h2 small { display: block; margin-top: 2px; font: normal 10px Arial, sans-serif; color: #dfe6f5; }
.archive-page[data-page="home"] .home-browser-ribbon { position: absolute; right: -36px; top: 13px; z-index: 2; width: 130px; padding: 4px 0; transform: rotate(33deg); background: linear-gradient(#3f9d6d, #2b7a53); color: #fff; font: bold 12px Tahoma, Arial, sans-serif; letter-spacing: 1px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.archive-page[data-page="home"] .home-browser-card ul { gap: 0; padding: 5px 10px 4px; }
.archive-page[data-page="home"] .home-browser-card li { gap: 9px; min-height: 30px; padding: 3px 4px; border-radius: 6px; }
.archive-page[data-page="home"] .home-browser-card li img { width: 28px; height: 28px; flex: 0 0 28px; }
.archive-page[data-page="home"] .home-browser-card .home-mobile-icon { width: 28px; flex: 0 0 28px; font-size: 24px; }
.archive-page[data-page="home"] .home-browser-card li + li { border-top: 1px solid #e6e8f0; }
.archive-page[data-page="home"] .home-browser-card li.is-new { background: linear-gradient(#eef7f1, #dcefe4); box-shadow: inset 0 0 0 1px #bcdfcb; }
.archive-page[data-page="home"] .home-browser-card li strong { font-size: 14px; color: #2f3a51; }
.archive-page[data-page="home"] .home-browser-note { margin: 0; padding: 6px 10px 8px; border-top: 1px solid #e6e8f0; font-size: 10px; line-height: 1.35; color: #5b6480; }
.archive-page[data-page="home"] .home-browser-ribbon { font-size: 11px; top: 11px; }