/* Demir Konut v12.8 – çok platform katmanı (v127 Tasarım 3.0 üstüne, en son yüklenir)
   1) Cihaz ve Platform sayfası + kurulum rehberi penceresi
   2) Platform bayrakları: html[data-os|browser|form|display|touch] (js/platform.js yazar)
   3) Pencere başlık çubuğu (WCO) kurulu masaüstü uygulaması, katlanabilir / çift ekran, iOS ayrıntıları, kaba işaretçi hedefleri */

/* ================================================================ 1) sayfa ve rehber */
.pf-hero { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3, 12px) var(--sp-4, 16px); align-items: center; }
.pf-hero-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, #C8963E) 16%, transparent); color: var(--accent, #C8963E); }
.pf-hero-ic .ic { width: 28px; height: 28px; }
.pf-hero-main { min-width: 0; }
.pf-kicker { display: block; font-size: 10.5px; letter-spacing: .9px; font-weight: 700; color: var(--slate, #64748b); margin-bottom: 2px; }
.pf-hero h2 { margin: 0 0 8px; font-size: var(--fs-xl, 20px); line-height: 1.25; overflow-wrap: anywhere; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chips .chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.pf-hero-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (min-width: 900px) { .pf-hero { grid-template-columns: auto 1fr auto; } .pf-hero-act { grid-column: auto; flex-direction: column; align-items: stretch; } }
.pf-guide-t { margin: 0 0 6px; }
.pf-steps { list-style: none; margin: 0; padding: 0; counter-reset: pf; display: grid; gap: 8px; }
.pf-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; counter-increment: pf; }
.pf-steps li::before { content: counter(pf); width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--accent, #C8963E); color: var(--navy, #1B2A41); }
.pf-steps li b, .pf-steps li span { grid-column: 2; min-width: 0; } /* numara 1. sütunda, başlık ve açıklama 2. sütunda alt alta */
.pf-steps li b { display: block; font-size: 14px; font-weight: 650; line-height: 1.3; align-self: center; }
.pf-steps li span { display: block; font-size: 13px; color: var(--slate, #64748b); line-height: 1.45; margin-top: -4px; }
.pf-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--soft, var(--surface-2)); font-size: 13px; line-height: 1.45; }
.pf-note.warn { background: color-mix(in srgb, var(--amber, #d97706) 14%, transparent); }
.pf-note .ic { flex: none; margin-top: 2px; }
.pf-grp { margin: 14px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .2px; color: var(--ink-2, var(--ink)); }
.pf-grp small { font-weight: 600; color: var(--slate, #64748b); margin-left: 4px; }
.pf-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.pf-cap { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-2, var(--line)); background: var(--card, var(--surface)); min-height: 44px; }
.pf-cap.no { opacity: .78; }
.pf-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--green, #167348); }
.pf-cap.no .pf-dot { background: var(--surface-3, #cbd5e1); color: var(--slate, #64748b); }
.pf-cap-t { min-width: 0; }
.pf-cap-t b { display: block; font-size: 13px; font-weight: 620; line-height: 1.3; }
.pf-cap-t small { display: block; font-size: 11.5px; color: var(--slate, #64748b); line-height: 1.35; margin-top: 1px; }
.pf-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-tips li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.pf-tips li .ic { flex: none; margin-top: 2px; color: var(--accent, #C8963E); }
.pf-guide .link-btn { margin-top: 10px; }
.mk-guide ol { padding-left: 20px; } .mk-guide li { margin: 4px 0; line-height: 1.45; }
.mk-hr { border: 0; border-top: 1px solid var(--line-2, var(--line)); margin: 12px 0; }
@media (max-width: 639px) { .pf-cap-grid { grid-template-columns: 1fr; } .pf-hero-ic { width: 46px; height: 46px; border-radius: 13px; } .pf-hero-ic .ic { width: 24px; height: 24px; } }

/* ================================================================ 2) platform bayrakları */
/* iPhone / iPad: alan odaklanınca sayfa büyütülmez, uzun basışta sistem menüsü liste satırlarını bölmez, kaydırma lastik etkisi kabuğun dışına taşmaz */
html[data-os="ios"], html[data-os="ipados"] { -webkit-text-size-adjust: 100%; }
html[data-os="ios"] input:not([type="checkbox"]):not([type="radio"]), html[data-os="ios"] select, html[data-os="ios"] textarea,
html[data-os="ipados"] input:not([type="checkbox"]):not([type="radio"]), html[data-os="ipados"] select, html[data-os="ipados"] textarea { font-size: max(16px, 1em); }
html[data-os="ios"] .li, html[data-os="ios"] .tile, html[data-os="ios"] .tab, html[data-os="ipados"] .li, html[data-os="ipados"] .tile { -webkit-touch-callout: none; }
html[data-os="ios"][data-display="standalone"] body, html[data-os="ipados"][data-display="standalone"] body { overscroll-behavior-y: none; }
/* kaba işaretçi (dokunmatik): asgari 44 px hedef, hover'a bağlı ipuçları yok */
html[data-touch="coarse"] .pf-cap, html[data-touch="coarse"] .pf-steps li { min-height: 44px; }
html[data-touch="coarse"] .icon-btn { min-width: 42px; min-height: 42px; }
html[data-touch="coarse"] [title]:hover::after { display: none; }
/* ince işaretçi (fare / izleme dörtgeni): ince kaydırma çubukları */
html[data-touch="fine"] .sheet-body, html[data-touch="fine"] .table-wrap, html[data-touch="fine"] .main > #view { scrollbar-width: thin; }
/* Android: alt gezinme çubuğu güvenli alanı zaten var; tablet yatayda alt sekme çubuğu ortalanır (v127) */
html[data-os="android"][data-form="tablet"] #tabbar { padding-left: max(calc((100% - 720px) / 2), env(safe-area-inset-left)); padding-right: max(calc((100% - 720px) / 2), env(safe-area-inset-right)); }

/* ================================================================ 3) kurulu masaüstü uygulaması: pencere başlık çubuğu (WCO) */
@media (display-mode: window-controls-overlay) {
  /* app.css v8.5 kuralları üst çubuğu başlık alanına yerleştirir; burada kenar menü ve şeritler o alanın altına alınır */
  .sidebar { padding-top: calc(env(titlebar-area-height, 0px) + var(--sp-3, 12px)); }
  .lic-bar, .offline-bar { margin-top: env(titlebar-area-height, 0px); }
  #topbar .tb-title h1 { font-size: 15px; }
  #topbar .tb-title small { display: none; }
  #topbar { backdrop-filter: saturate(1.2) blur(10px); }
}
/* kurulu uygulama (standalone / minimal-ui): adres çubuğu yok, üst güvenli alan korunur; seçilemeyen kabuk metinleri yerel his verir */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  #topbar, #tabbar, .sidebar { -webkit-user-select: none; user-select: none; }
}

/* ================================================================ katlanabilir / çift ekran (Surface Duo, Galaxy Fold açık) */
@media (horizontal-viewport-segments: 2) {
  /* iki yatay bölüm: sol bölüm kenar menü, sağ bölüm içerik; menteşe içeriğin ortasına düşmez */
  .app { display: grid; grid-template-columns: env(viewport-segment-width 0 0, 50%) 1fr; }
  .sidebar { display: flex !important; width: auto; min-width: 0; position: sticky; top: 0; height: 100dvh; overflow: auto; }
  .main { min-width: 0; padding-left: calc(env(viewport-segment-left 1 0, 50%) - env(viewport-segment-width 0 0, 50%)); }
  #tabbar { display: none !important; }
  .sheet-wrap .sheet { max-width: env(viewport-segment-width 1 0, 100%); margin-left: auto; }
}
@media (vertical-viewport-segments: 2) {
  /* iki dikey bölüm: alt pencereler ve ATLAS üst bölümde kalır, menteşeyi kesmez */
  .sheet-wrap .sheet { max-height: env(viewport-segment-height 0 0, 100dvh); }
  .atlas-dock { max-height: calc(env(viewport-segment-height 0 0, 100dvh) - 24px); }
}

/* ================================================================ veri tasarrufu ve güç */
@media (prefers-reduced-data: reduce) {
  .reveal, .stagger > * { animation: none !important; }
  .splash-bar span { animation: none !important; }
}
@media print { .pf-hero-act, .pf-tips, #tabbar, .sidebar, #topbar { display: none !important; } }