/* MediEnt prototip — üretilmiş dosya (tokens + taban + hover) */
/* MediEnt Tasarım Sistemi — Token Sayfası v1.0 · 19.08.2026
   Kaynak: 00-design-system/ — adlar birebir. Tüm ürünler bu değerleri kullanır. */
:root {
  /* Navy — yapı rengi */
  --navy-50:#F0F5F9; --navy-100:#DCE8F1; --navy-200:#B8D1E3; --navy-300:#8AB2CF;
  --navy-400:#5A8FB7; --navy-500:#33709F; --navy-600:#175683; --navy-700:#003764;
  --navy-800:#002A4D; --navy-900:#001D36;
  /* Orange — dikkat rengi (yalnız CTA, çağrı anı, uyarı) */
  --orange-50:#FFF3EC; --orange-100:#FFE3D3; --orange-200:#FFD8C2; --orange-300:#FFC5A6;
  --orange-400:#FFA070; --orange-500:#FF5100; --orange-600:#D94500; --orange-700:#B03800;
  --orange-800:#862B00;
  /* Nötraller — sıcak bej aile */
  --neutral-50:#F8F7F5; --neutral-100:#EFEDEA; --neutral-150:#ECEAE6; --neutral-200:#E5E2DC;
  --neutral-300:#DDD9D3; --neutral-500:#A9A59E; --neutral-600:#5A6B7B; --neutral-900:#16232F;
  /* Semantik */
  --success-600:#1E7B4D; --success-100:#E7F3EC; --success-200:#BFE3CE;
  --warning-600:#8A6400; --warning-100:#FBF3E0; --warning-200:#EAD9A8;
  --danger-600:#C6273B;  --danger-100:#FBF1F2;  --danger-200:#F2D7DB;
  /* Tipografi */
  --font-display:'Manrope',sans-serif;      /* başlıklar · 700/800 */
  --font-body:'Public Sans',sans-serif;     /* gövde · 400-700 */
  --font-mono:'IBM Plex Mono',monospace;    /* veri, kod, rozet üstü */
  --text-xs:11px; --text-sm:12.5px; --text-base:14px; --text-md:16px;
  --text-lg:19px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:46px;
  --leading-tight:1.15; --leading-normal:1.5; --leading-relaxed:1.65;
  /* Spacing — 4px taban */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  /* Radius */
  --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:12px; --radius-pill:100px;
  /* Gölge */
  --shadow-card:0 1px 3px rgba(0,29,54,0.07);
  --shadow-raised:0 8px 24px rgba(0,29,54,0.12);
  --shadow-canvas:0 18px 50px rgba(0,29,54,0.16);
  /* Breakpoint (dokümantasyon amaçlı) */
  --bp-mobile:375px; --bp-tablet:768px; --bp-desktop:1180px; --bp-wide:1440px;
}
/* Prototip sayfa kabuğu — üretilen sayfaların ortak iskeleti */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Masaüstü sayfa: sabit 1440px artboard, ortalanır; dar pencerede yatay scroll */
.dc-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: auto;
}
.dc-artboard { flex-shrink: 0; }

/* Mobil sayfa: 375px artboard telefon çerçevesinde */
.dc-page-mobile {
  padding: 40px 16px 80px;
  background: var(--navy-900, #001D36);
  align-items: center;
  flex-direction: column;
}
.dc-phone {
  background: #0b141c;
  border-radius: 38px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}
.dc-phone-screen {
  width: 375px;
  border-radius: 27px;
  overflow: hidden;
  background: #fff;
  max-height: 84vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.dc-phone-screen::-webkit-scrollbar { display: none; }

/* Signage sahnesi: tam ekran koyu zemin, ölçekli yayın ekranı */
.dc-stage-wrap {
  min-height: 100vh;
  background: #04121f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dc-stage { transform-origin: center center; flex-shrink: 0; }

/* Düz sayfa (bileşen kitleri, e-posta şablonu, şablon aileleri) */
.dc-plain { min-height: 100vh; padding: 40px; display: flex; flex-direction: column; align-items: center; }
.dc-plain > * { max-width: 100%; }

/* Ölü linkler */
[data-dc-dead] { cursor: not-allowed; opacity: 0.92; }

/* style-hover sınıfları */
.hv-1:hover{background:#DCE8F1 !important}
.hv-2:hover{background:#D94500 !important}
.hv-3:hover{background:#002A4D !important}
.hv-4:hover{border-color:#8AB2CF !important;box-shadow:0 8px 20px rgba(0,40,70,0.08) !important}
.hv-5:hover{border-color:#8AB2CF !important}
.hv-6:hover{border-color:#8AB2CF !important;box-shadow:0 10px 24px rgba(0,40,70,0.08) !important}
.hv-7:hover{box-shadow:0 8px 20px rgba(0,40,70,0.10) !important}
.hv-8:hover{border-color:#003764 !important}
.hv-9:hover{border-color:#8A6400 !important}
[class^="hv-"],[class*=" hv-"]{transition:border-color .15s,background .15s,color .15s,box-shadow .15s}