/* Sempas tanıtım sitesi · v2
   Yön: sakin, kurumsal, görsel öncelikli. Açık soğuk zemin, lacivert mürekkep, derin teal marka rengi.
   Fosforlu sarı yalnızca "Sempas'ın dokunduğu yer" için: kutuya yazılan bilgi, uyarı, ilke vurgusu.
   Yerleşim: büyük ürün görselleri, kısa başlıklar, sola hizalı metin. */

:root {
  --zemin: #f6f7f9;
  --yuzey: #ffffff;
  --yuzey-2: #eef1f4;
  --yuzey-3: #e4e9ee;
  --murekkep: #0c1824;
  --ikincil: #536274;
  --soluk: #8592a1;
  --cizgi: #e1e6eb;
  --cizgi-2: #d2d9e0;

  --marka: #0d6b62;
  --marka-koyu: #0a554e;
  --marka-acik: #e2f2ef;
  --marka-uzeri: #ffffff;

  --sari: #ffe066;
  --sari-koyu: #f2c919;
  --sari-zemin: #fff8d6;
  --sari-metin: #1a1405;

  --hekim: #0d6b62;
  --hasta: #3d6fb6;
  --refakat: #b7791f;

  --gece: #0a1622;
  --gece-2: #102030;
  --gece-3: #18293b;
  --gece-cizgi: #22364a;
  --gece-metin: #eaf0f5;
  --gece-soluk: #93a3b5;

  --golge-1: 0 1px 2px rgb(12 24 36 / .05), 0 2px 8px rgb(12 24 36 / .04);
  --golge-2: 0 1px 2px rgb(12 24 36 / .06), 0 24px 48px -20px rgb(12 24 36 / .18);
  --golge-3: 0 2px 4px rgb(12 24 36 / .04), 0 40px 80px -30px rgb(12 24 36 / .28);

  --yazi: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --genislik: 1200px;
  --gutter-sol: max(20px, env(safe-area-inset-left, 0px));
  --gutter-sag: max(20px, env(safe-area-inset-right, 0px));
}

:root { color-scheme: only light; }

/* ---------------- temel ---------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--murekkep);
  font: 400 17px/1.6 var(--yazi); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--zemin); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.4vw, 84px); letter-spacing: -.045em; line-height: 1; }
h2 { font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -.035em; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--sari-koyu); outline-offset: 3px; border-radius: 6px; }
.kap { max-width: var(--genislik); margin-inline: auto; padding-left: var(--gutter-sol); padding-right: var(--gutter-sag); }
.gizli-baslik { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--sari); color: var(--sari-metin); padding: 8px 14px; border-radius: 8px; font-weight: 500; }
.atla:focus { top: 12px; }
section { padding-block: clamp(88px, 11vw, 150px); }
.bolum-bas { display: grid; gap: 18px; max-width: 720px; margin-bottom: clamp(48px, 7vw, 88px); }
.bolum-bas p { font-size: 19px; color: var(--ikincil); max-width: 56ch; }

/* ---------------- düğmeler ---------------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: 12px; font: 500 16px/1 var(--yazi); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.dugme:active { transform: translateY(1px); }
.dugme-ana { background: var(--marka); color: var(--marka-uzeri); box-shadow: 0 1px 0 rgb(255 255 255 / .15) inset, 0 6px 16px -6px color-mix(in srgb, var(--marka) 60%, transparent); }
.dugme-ana:hover { background: var(--marka-koyu); }
.dugme-ikincil { background: var(--yuzey); color: var(--murekkep); border-color: var(--cizgi-2); box-shadow: var(--golge-1); }
.dugme-ikincil:hover { border-color: var(--soluk); }
.dugme-kucuk { padding: 10px 16px; font-size: 15px; border-radius: 10px; }
.dugme-tam { width: 100%; }

/* ---------------- üst ---------------- */
.ust { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--zemin) 80%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.ust.kaydi { border-bottom-color: var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 32px; height: 68px; }
.marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -.03em; text-decoration: none; }
.marka-isaret { width: 28px; height: 28px; color: var(--marka); }
.menu { display: flex; gap: 2px; margin-left: 8px; }
.menu a { display: block; padding: 8px 14px; border-radius: 8px; font-size: 15px; color: var(--ikincil); text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.menu a:hover { color: var(--murekkep); background: var(--yuzey-2); }
.ust-cta { margin-left: auto; }
.menu-dugme { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; color: var(--murekkep); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.menu-dugme span { width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease; }
.menu-dugme[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-cekmece { display: grid; gap: 2px; padding: 8px var(--gutter-sag) 20px var(--gutter-sol); border-top: 1px solid var(--cizgi); background: var(--zemin); }
.menu-cekmece a { padding: 13px 8px; font-size: 17px; text-decoration: none; border-radius: 8px; }
.menu-cekmece .dugme { margin-top: 10px; }
@media (max-width: 820px) { .menu, .ust-cta { display: none; } .menu-dugme { display: flex; } }
@media (min-width: 821px) { .menu-cekmece { display: none !important; } }

/* ---------------- kahraman ---------------- */
.kahraman { position: relative; padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 112px); overflow: hidden; }
.kahraman::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, var(--cizgi-2) 1px, transparent 0); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, transparent 70%); opacity: .7; pointer-events: none; }
.kahraman .kap { position: relative; }
.kahraman-ust { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.kahraman-baslik { display: grid; gap: 28px; }
.rozet { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-1); font-size: 14px; font-weight: 500; color: var(--ikincil); }
.rozet-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--marka); box-shadow: 0 0 0 4px var(--marka-acik); }
.kahraman-yan { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.kahraman-yan .kahraman-alt { max-width: 52ch; }
.kahraman-alt { font-size: 19px; line-height: 1.55; color: var(--ikincil); }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }


/* ürün görseli */
.urun { position: relative; margin: 0; padding-bottom: 40px; }
.urun-parilti { position: absolute; inset: 10% 8% -4% 8%; background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--marka) 22%, transparent), transparent 70%); filter: blur(30px); pointer-events: none; }
.pencere { position: relative; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: var(--golge-3); overflow: hidden; }
.pencere-bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); }
.pd { width: 11px; height: 11px; border-radius: 50%; background: var(--yuzey-3); border: 1px solid var(--cizgi-2); }
.pencere-sekmeler { display: flex; gap: 4px; margin-left: 18px; font-size: 13px; color: var(--soluk); }
.pencere-sekmeler span { padding: 5px 12px; border-radius: 7px; }
.pencere-sekmeler .secili { background: var(--yuzey); color: var(--murekkep); box-shadow: var(--golge-1); font-weight: 500; }
.pencere-govde { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 440px; }
.hasta-kart { border-right: 1px solid var(--cizgi); padding: 22px; display: grid; gap: 22px; align-content: start; background: color-mix(in srgb, var(--yuzey-2) 45%, var(--yuzey)); }
.hasta-ust { display: flex; align-items: center; gap: 12px; }
.hasta-ust > div { display: grid; gap: 7px; flex: 1; }
.avatar { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--marka-acik); color: var(--marka); font-weight: 600; font-size: 14px; flex: none; }
.cubuk { display: block; height: 9px; border-radius: 5px; background: var(--yuzey-3); }
.cubuk.soluk { background: var(--yuzey-2); }
.c-40 { width: 40%; } .c-50 { width: 50%; } .c-60 { width: 60%; } .c-70 { width: 70%; } .c-80 { width: 80%; }
.hasta-bilgi { display: grid; gap: 10px; margin: 0; font-size: 13.5px; }
.hasta-bilgi div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); }
.hasta-bilgi dt { color: var(--soluk); }
.hasta-bilgi dd { margin: 0; font-weight: 500; }
.hasta-gecmis { display: grid; gap: 9px; font-size: 12.5px; color: var(--soluk); }

.form { padding: 24px; display: grid; gap: 14px; align-content: start; }
.form-satir { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.alan { position: relative; display: grid; gap: 6px; padding: 12px 14px; min-height: 66px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey); transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease; }
.alan-ad { font-size: 12.5px; color: var(--soluk); font-weight: 500; }
.alan-deger { font-size: 15.5px; font-weight: 500; line-height: 1.35; min-height: 1.35em; }
.alan.yaziliyor { border-color: var(--sari-koyu); background: var(--sari-zemin); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sari) 35%, transparent); }
.alan.yaziliyor .alan-deger::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--murekkep); animation: imlec .8s steps(1) infinite; }
@keyframes imlec { 50% { opacity: 0; } }
.uyari-alan.dolu::before { content: "Dosyayla örtüşüyor"; position: absolute; right: 12px; top: 11px; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--sari); color: var(--sari-metin); }
.form-alt { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.sahte-dugme { padding: 9px 16px; border-radius: 9px; border: 1px solid var(--cizgi); font-size: 13.5px; color: var(--ikincil); }
.sahte-dugme.ana { background: var(--murekkep); color: var(--zemin); border-color: var(--murekkep); }

/* Sempas paneli */
.panel { position: absolute; right: -24px; bottom: 0; width: 300px; z-index: 3; padding: 18px; display: grid; gap: 14px; border-radius: 18px; background: var(--gece); color: var(--gece-metin); border: 1px solid var(--gece-cizgi); box-shadow: 0 30px 60px -20px rgb(4 12 20 / .55), 0 0 0 1px rgb(255 255 255 / .03) inset; }
.panel-ust { display: flex; align-items: center; gap: 10px; }
.panel-logo { width: 24px; height: 24px; color: var(--sari); }
.panel-logo path { stroke: var(--gece); }
.panel-ad { font-weight: 600; letter-spacing: -.02em; }
.panel-durum { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gece-soluk); }
.canli { width: 8px; height: 8px; border-radius: 50%; background: #ef4f4f; box-shadow: 0 0 0 0 rgb(239 79 79 / .5); animation: canli 1.6s ease-out infinite; flex: none; }
@keyframes canli { to { box-shadow: 0 0 0 8px rgb(239 79 79 / 0); } }
.panel-dalga { display: flex; align-items: center; gap: 3px; height: 44px; }
.panel-dalga i { flex: 1; height: 4px; border-radius: 2px; background: var(--gece-soluk); opacity: .55; transition: height .12s ease, background-color .2s ease; }
.panel-dalga i.hekim { background: #45c4b3; opacity: .95; }
.panel-dalga i.hasta { background: #7ea6e3; opacity: .95; }
.panel-kisiler { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--gece-soluk); }
.panel-kisiler span { display: inline-flex; align-items: center; gap: 6px; }
.panel-kisiler i, .kulvar-ad i { width: 8px; height: 8px; border-radius: 3px; }
.k-hekim { background: #45c4b3; } .k-hasta { background: #7ea6e3; } .k-refakat { background: #e0a84a; }
.panel-sure { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--gece-metin); }
.panel-taslak { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgb(69 196 179 / .12); color: #8fe3d6; font-size: 13.5px; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.panel-taslak svg { color: #45c4b3; }
.panel-taslak svg path { stroke: var(--gece); }
.panel-taslak.goster { opacity: 1; transform: none; }
.ucan-katman { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ucan { position: absolute; left: 0; top: 0; padding: 7px 12px; border-radius: 999px; background: var(--sari); color: var(--sari-metin); font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .35); will-change: transform; }

@media (max-width: 1100px) { .panel { right: 16px; } }
@media (max-width: 820px) {
  .pencere-govde { grid-template-columns: 1fr; min-height: 0; }
  .hasta-kart { display: none; }
  .form { padding: 16px; gap: 10px; }
  .form-satir { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
  .alan { padding: 10px 12px; min-height: 58px; }
  .alan-deger { font-size: 14px; }
  .uyari-alan.dolu::before { display: none; }
  .pencere-sekmeler span:nth-child(n+3) { display: none; }
  .urun { padding-bottom: 0; }
  .panel { position: relative; right: auto; bottom: auto; width: auto; margin: -28px 12px 0; }
}

/* ---------------- odak (zaman çizgisi) ---------------- */
.odak { background: var(--yuzey); border-block: 1px solid var(--cizgi); }
.odak-ic { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px 80px; align-items: center; }
.odak-metin { display: grid; gap: 18px; }
.odak-metin p { font-size: 19px; color: var(--ikincil); max-width: 46ch; }
.zaman { margin: 0; display: grid; gap: 22px; padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: var(--zemin); border: 1px solid var(--cizgi); }
.zaman-satir { display: grid; gap: 10px; }
.zaman-ad { font-size: 16px; font-weight: 600; }
.zaman-cubuk { display: flex; gap: 3px; height: 44px; }
.zaman-cubuk i { flex: var(--w) 1 0; border-radius: 6px; transform-origin: left center; }
.zaman-cubuk i.h { background: var(--marka); }
.zaman-cubuk i.e { background: var(--yuzey-3); background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--soluk) 22%, transparent) 5px 6px); }
.zaman-eksen { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--soluk); padding-top: 10px; border-top: 1px dashed var(--cizgi-2); }
.zaman figcaption { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; font-weight: 500; color: var(--murekkep); padding-top: 18px; border-top: 1px solid var(--cizgi); }
.lejant { display: inline-flex; align-items: center; gap: 8px; }
.lejant i { width: 14px; height: 14px; border-radius: 4px; }
.lejant i.h { background: var(--marka); }
.lejant i.e { background: var(--yuzey-3); border: 1px solid var(--cizgi-2); }
.zaman-not { margin-left: auto; color: var(--soluk); font-size: 13px; }
@media (max-width: 900px) { .odak-ic { grid-template-columns: 1fr; } }

/* ---------------- nasıl çalışır ---------------- */
.adim { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 88px; align-items: center; padding-block: clamp(32px, 5vw, 64px); }
.adim + .adim { border-top: 1px solid var(--cizgi); }
.adim-metin { display: grid; gap: 16px; max-width: 420px; }
.adim-metin p { color: var(--ikincil); font-size: 18px; }
.adim-no { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--marka-acik); color: var(--marka); font-weight: 600; font-size: 16px; margin-bottom: 6px; transition: background-color .4s ease, color .4s ease; }
.adim.aktif .adim-no { background: var(--marka); color: var(--marka-uzeri); }
.adim-gorsel { min-width: 0; }
.kart { position: relative; padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-2); display: grid; gap: 22px; overflow: hidden; }
.kart-ust { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.kart-sag { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--soluk); font-weight: 400; }
@media (max-width: 900px) { .adim { grid-template-columns: 1fr; } }

/* adım 1: dinler */
.v-dalga { display: flex; align-items: center; gap: 3px; height: 84px; }
.v-dalga i { flex: 1; border-radius: 3px; background: var(--yuzey-3); height: calc(var(--h, .1) * 100%); transition: background-color .4s ease; }
.v-dalga i.hekim { background: var(--hekim); }
.v-dalga i.hasta { background: var(--hasta); }
.v-dalga i.refakat { background: var(--refakat); }
.kulvarlar { display: grid; gap: 12px; }
.kulvar { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; font-size: 15px; font-weight: 500; }
.kulvar-ad { display: inline-flex; align-items: center; gap: 8px; color: var(--murekkep); }
.kulvar-ad i { width: 10px; height: 10px; }
.kulvar-iz { position: relative; height: 14px; border-radius: 7px; background: var(--yuzey-2); }
.kulvar-iz b { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); border-radius: 7px; background: var(--hekim); transform-origin: left; transition: transform .7s cubic-bezier(.3,.7,.2,1); }
.kulvar-iz.hasta b { background: var(--hasta); }
.kulvar-iz.refakat b { background: var(--refakat); }
.hareket .adim:not(.aktif) .kulvar-iz b { transform: scaleX(0); }
.kulvar-iz b:nth-child(2) { transition-delay: .15s; } .kulvar-iz b:nth-child(3) { transition-delay: .3s; } .kulvar-iz b:nth-child(4) { transition-delay: .45s; }

/* adım 2: anlar */
.kovalar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kova { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; padding: 16px; min-height: 76px; border-radius: 14px; background: var(--zemin); border: 1px dashed var(--cizgi-2); }
.kova-ad { width: 100%; font-size: 12.5px; font-weight: 600; color: var(--soluk); }
.cip { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi); font-size: 14px; font-weight: 500; box-shadow: var(--golge-1); transition: opacity .45s ease, transform .55s cubic-bezier(.3,.7,.2,1.2); }
.cip-uyari { background: var(--sari); border-color: var(--sari-koyu); color: var(--sari-metin); }
.hareket .adim:not(.aktif) .cip { opacity: 0; transform: translateY(10px) scale(.95); }
.kova:nth-child(1) .cip:nth-child(2) { transition-delay: .05s; } .kova:nth-child(1) .cip:nth-child(3) { transition-delay: .15s; }
.kova:nth-child(2) .cip:nth-child(2) { transition-delay: .25s; } .kova:nth-child(2) .cip:nth-child(3) { transition-delay: .35s; }
.kova:nth-child(3) .cip { transition-delay: .45s; } .kova:nth-child(4) .cip { transition-delay: .55s; }
.uyari-kart { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--sari-zemin); border: 1px solid var(--sari-koyu); font-size: 14.5px; transition: opacity .5s ease .8s, transform .5s ease .8s; }
.uyari-kart svg { color: var(--sari-koyu); flex: none; margin-top: 2px; }
.uyari-kart div { display: grid; gap: 2px; }
.uyari-kart span { color: var(--ikincil); }
.hareket .adim:not(.aktif) .uyari-kart { opacity: 0; transform: translateY(8px); }
@media (max-width: 480px) { .kovalar { grid-template-columns: 1fr; } }

/* adım 3: yazar */
.v-yazar { gap: 12px; }
.mini-alan { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cizgi); font-size: 15px; transition: border-color .4s ease, background-color .4s ease; }
.mini-alan span { font-size: 13px; color: var(--ikincil); font-weight: 500; }
.mini-alan b { font-weight: 500; background: linear-gradient(var(--sari), var(--sari)) no-repeat 0 85% / 100% 40%; transition: background-size .6s cubic-bezier(.4,0,.2,1); justify-self: start; }
.hareket .adim:not(.aktif) .mini-alan b { background-size: 0% 40%; }
.adim.aktif .mini-alan:nth-child(2) b { transition-delay: .2s; }
.adim.aktif .mini-alan:nth-child(3) b { transition-delay: .4s; }
.v-yazar-alt { position: relative; display: flex; justify-content: flex-end; margin-top: 8px; }
.onay-dugme { position: relative; display: inline-grid; padding: 12px 20px; border-radius: 11px; background: var(--murekkep); color: var(--zemin); font-size: 15px; font-weight: 500; overflow: hidden; }
.onay-dugme > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; justify-content: center; transition: opacity .3s ease, transform .3s ease; }
.onay-tamam { opacity: 0; transform: translateY(8px); }
.adim.bitti .onay-dugme { background: var(--marka); color: var(--marka-uzeri); transition: background-color .3s ease; }
.adim.bitti .onay-metin { opacity: 0; transform: translateY(-8px); }
.adim.bitti .onay-tamam { opacity: 1; transform: none; }
.imlec { position: absolute; right: 30px; bottom: -40px; opacity: 0; transition: opacity .3s ease; }
.adim.aktif .imlec { animation: imlec-git 1.4s cubic-bezier(.4,0,.2,1) 1s forwards; }
@keyframes imlec-git { 0% { opacity: 0; transform: translate(60px, 40px); } 30% { opacity: 1; } 80% { opacity: 1; transform: translate(-40px, -18px); } 88% { transform: translate(-40px, -18px) scale(.85); } 100% { opacity: 1; transform: translate(-40px, -18px) scale(1); } }

/* ---------------- video ---------------- */
.video { background: var(--gece); color: var(--gece-metin); }
.video-bas { display: grid; gap: 14px; text-align: center; justify-items: center; margin-bottom: clamp(40px, 5vw, 64px); }
.video-bas p { color: var(--gece-soluk); font-size: 19px; }
.oynatici { max-width: 1040px; margin-inline: auto; }
.oynatici-kapak { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--gece-cizgi); border-radius: 22px; overflow: hidden; cursor: pointer; color: inherit; background: radial-gradient(80% 70% at 30% 20%, var(--gece-3), var(--gece-2) 55%, var(--gece) 100%); box-shadow: 0 50px 100px -40px rgb(0 0 0 / .8); }
.kapak-sahne { position: absolute; inset: 0; }
.kapak-pencere { position: absolute; left: 9%; top: 13%; width: 62%; height: 74%; border-radius: 14px; background: #f3f5f8; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); overflow: hidden; display: grid; grid-template-rows: 9% 1fr; transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.kp-bar { display: flex; align-items: center; gap: 5px; padding: 0 4%; background: #e3e8ee; }
.kp-bar i { width: 1.2%; aspect-ratio: 1; border-radius: 50%; background: #c6ced8; }
.kp-govde { display: grid; grid-template-columns: 30% 1fr; }
.kp-sol { display: grid; gap: 7%; align-content: start; padding: 10% 12%; border-right: 1px solid #dde3ea; background: #eef1f5; }
.kp-sol b { height: 6px; border-radius: 3px; background: #d4dbe3; }
.kp-sag { display: grid; gap: 5%; align-content: start; padding: 6%; }
.kp-sag b { height: 30px; max-height: 13%; min-height: 18px; border-radius: 6px; border: 1px solid #dde3ea; background: #fff; }
.kp-sag b.dolu { background: #fff8d6; border-color: #f2c919; }
.kapak-panel { position: absolute; right: 10%; bottom: 16%; width: 30%; height: 26%; border-radius: 14px; background: #0f1d2b; border: 1px solid #22364a; display: flex; align-items: center; gap: 4%; padding: 0 6%; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7); transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.kapak-panel i { flex: 1; height: 20%; border-radius: 3px; background: #45c4b3; animation: kp-dalga 1.2s ease-in-out infinite; }
.kapak-panel i:nth-child(odd) { background: #7ea6e3; animation-delay: -.4s; }
.kapak-panel i:nth-child(3n) { animation-delay: -.8s; }
@keyframes kp-dalga { 50% { height: 60%; } }
.oynatici-kapak:hover .kapak-pencere { transform: translateY(-6px); }
.oynatici-kapak:hover .kapak-panel { transform: translateY(-12px); }
.oynat { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .96); color: #0c1824; box-shadow: 0 0 0 10px rgb(255 255 255 / .12), 0 20px 40px -10px rgb(0 0 0 / .5); transition: transform .25s ease, box-shadow .25s ease; }
.oynat svg { margin-left: 4px; }
.oynatici-kapak:hover .oynat { transform: scale(1.06); box-shadow: 0 0 0 16px rgb(255 255 255 / .1), 0 20px 40px -10px rgb(0 0 0 / .5); }
.kapak-yazi { position: absolute; left: 24px; bottom: 20px; display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--gece-metin); }
.kapak-yazi span { padding: 3px 9px; border-radius: 6px; background: rgb(0 0 0 / .4); font-variant-numeric: tabular-nums; }
.oynatici iframe, .oynatici video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 22px; background: #000; }
.oynatici-not { margin-top: 14px; text-align: center; font-size: 14px; color: var(--gece-soluk); }
@media (max-width: 600px) { .oynat { width: 64px; height: 64px; } .kapak-yazi { left: 14px; bottom: 12px; font-size: 13px; } }

/* ---------------- HBYS ---------------- */
.hbys-ic { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px 80px; align-items: center; }
.hbys-metin { display: grid; gap: 20px; }
.hbys-metin > p { color: var(--ikincil); font-size: 19px; max-width: 48ch; }
.ozellik-cipleri { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ozellik-cipleri li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 12px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-1); font-size: 15px; font-weight: 500; }
.ozellik-cipleri svg { color: var(--marka); flex: none; }
.yelpaze { position: relative; margin: 0; aspect-ratio: 6 / 5; max-width: 100%; }
.hp { position: absolute; width: 70%; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-2); overflow: hidden; display: grid; grid-template-rows: 26px 1fr; transition: transform .8s cubic-bezier(.3,.7,.2,1); }
.hp-1 { left: 0; top: 4%; transform: rotate(-5deg); }
.hp-2 { left: 15%; top: 12%; transform: rotate(-1deg); }
.hp-3 { left: 30%; top: 22%; transform: rotate(3deg); }
.yelpaze.acik .hp-1 { transform: rotate(-8deg) translate(-4%, -2%); }
.yelpaze.acik .hp-3 { transform: rotate(5deg) translate(4%, 2%); }
.hp-bar { background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); }
.hp-bar.koyu { background: #2b4a6b; }
.hp-ic { padding: 7%; display: grid; gap: 8px; align-content: start; }
.hp-ic b { height: 22px; border-radius: 6px; background: var(--yuzey-2); border: 1px solid var(--cizgi); }
.hp-ic-a { grid-template-columns: 1fr 1fr; }
.hp-ic-b { grid-template-columns: 1fr; }
.hp-ic-b b:first-child { height: 46px; }
.hp-ic-c { grid-template-columns: 1fr 1fr 1fr; }
.hp-ic-c b:nth-child(2), .hp-ic-a b:nth-child(3) { background: var(--sari-zemin); border-color: var(--sari-koyu); }
.yelpaze-panel { position: absolute; right: 0; bottom: 4%; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 16px; background: var(--gece); color: var(--gece-metin); border: 1px solid var(--gece-cizgi); box-shadow: 0 24px 48px -16px rgb(4 12 20 / .55); font-weight: 600; z-index: 2; }
.yelpaze-panel svg { width: 26px; height: 26px; color: var(--sari); }
.yelpaze-panel svg path { stroke: var(--gece); }
.yp-dalga { display: flex; align-items: center; gap: 3px; height: 22px; margin-left: 6px; }
.yp-dalga i { width: 3px; height: 30%; border-radius: 2px; background: #45c4b3; animation: kp-dalga 1.1s ease-in-out infinite; }
.yp-dalga i:nth-child(2n) { background: #7ea6e3; animation-delay: -.35s; }
.yp-dalga i:nth-child(3n) { animation-delay: -.7s; }
@media (max-width: 900px) { .hbys-ic { grid-template-columns: 1fr; } .yelpaze { max-width: 560px; } }

/* ---------------- güvenlik ---------------- */
.guvenlik { background: var(--yuzey); border-top: 1px solid var(--cizgi); }
.guvenlik-ic { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px 72px; align-items: center; }
.ag { margin: 0; padding: clamp(16px, 3vw, 32px); border-radius: 24px; background: var(--zemin); border: 1px solid var(--cizgi); color: var(--marka); }
.ag svg { width: 100%; height: auto; overflow: visible; }
.ag-sinir { fill: color-mix(in srgb, var(--marka) 6%, var(--yuzey)); stroke: var(--marka); stroke-width: 1.5; stroke-dasharray: 6 6; }
.ag-etiket { font: 600 16px var(--yazi); fill: var(--marka); }
.ag-etiket.soluk { fill: var(--soluk); font-weight: 500; font-size: 14px; }
.ag-dugum { fill: var(--yuzey); stroke: var(--cizgi-2); stroke-width: 1; filter: drop-shadow(0 6px 14px rgb(12 24 36 / .08)); }
.ag-ikon { fill: none; stroke: var(--murekkep); stroke-width: 1.6; }
.ag-ikon-cizgi { stroke: var(--murekkep); stroke-width: 1.6; stroke-linecap: round; }
.ag-dugum-ad { font: 600 14px var(--yazi); fill: var(--murekkep); }
.ag-hat { stroke: var(--marka); stroke-width: 2; stroke-opacity: .35; }
.ag-paket { fill: var(--marka); }
.ag-paket.p2 { fill: var(--sari-koyu); }
.ag-kesik { stroke: var(--soluk); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
.ag-bulut { fill: var(--yuzey-2); stroke: var(--cizgi-2); stroke-width: 1.5; }
.ag-yasak { fill: var(--yuzey); stroke: #d14343; stroke-width: 2; }
.ag-yasak-x { stroke: #d14343; stroke-width: 2.2; stroke-linecap: round; }
.guvence { display: grid; gap: 4px; }
.guvence li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--cizgi); }
.guvence li:last-child { border-bottom: 0; }
.guvence-ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--marka-acik); color: var(--marka); }
.guvence h3 { font-size: 18px; letter-spacing: -.02em; }
.guvence p { color: var(--ikincil); font-size: 15.5px; }
@media (max-width: 900px) { .guvenlik-ic { grid-template-columns: 1fr; } }

/* ---------------- ilkeler ---------------- */
.ilkeler { padding-block: clamp(80px, 10vw, 140px); }
.ilke-liste { display: grid; gap: clamp(10px, 1.5vw, 18px); }
.ilke-liste li { font-size: clamp(32px, 5.4vw, 72px); font-weight: 600; letter-spacing: -.045em; line-height: 1.08; color: var(--soluk); }
.vurgu-cizgi { color: var(--murekkep); background: linear-gradient(var(--sari), var(--sari)) no-repeat 0 88% / 100% 36%; transition: background-size .9s cubic-bezier(.4,0,.2,1); }
.hareket .ilke-liste li:not(.gorundu) .vurgu-cizgi { background-size: 0% 36%; }

/* ---------------- demo ---------------- */
.demo { background: var(--gece); color: var(--gece-metin); }
.demo-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 88px; align-items: center; }
.demo-metin { display: grid; gap: 18px; }
.demo-metin p { color: var(--gece-soluk); font-size: 19px; max-width: 40ch; }
.form-demo { display: grid; gap: 18px; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--gece-2); border: 1px solid var(--gece-cizgi); }
.girdi-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.girdi { display: grid; gap: 7px; min-width: 0; }
.girdi label { font-size: 14px; font-weight: 500; }
.istege { color: var(--gece-soluk); font-weight: 400; }
.girdi input { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--gece-cizgi); background: var(--gece); color: var(--gece-metin); font: inherit; font-size: 16px; color-scheme: dark; transition: border-color .15s ease, box-shadow .15s ease; }
.girdi input:focus { outline: none; border-color: #45c4b3; box-shadow: 0 0 0 3px rgb(69 196 179 / .2); }
.girdi.hatali input { border-color: #ff8a7a; }
.hata { color: #ff8a7a; font-size: 13.5px; }
.onay { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--gece-soluk); }
.onay input { width: 18px; height: 18px; margin-top: 2px; accent-color: #45c4b3; }
.onay a { color: var(--gece-metin); }
.demo .dugme-ana { background: #45c4b3; color: #04201c; box-shadow: none; }
.demo .dugme-ana:hover { background: #5fd2c2; }
.form-durum { font-size: 15px; min-height: 1.4em; }
.form-durum.basarili { color: #8fe3d6; font-weight: 500; }
@media (max-width: 900px) { .demo-ic { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .girdi-ikili { grid-template-columns: 1fr; } }

/* ---------------- alt ---------------- */
.alt { padding-block: 40px 56px; border-top: 1px solid var(--cizgi); }
.alt-ic { display: grid; grid-template-columns: auto 1fr; gap: 20px 40px; align-items: center; }
.alt-menu { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; font-size: 14.5px; }
.alt-menu a { color: var(--ikincil); text-decoration: none; }
.alt-menu a:hover { color: var(--murekkep); }
.uyari { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--cizgi); font-size: 13.5px; color: var(--soluk); max-width: 90ch; }
@media (max-width: 640px) { .alt-ic { grid-template-columns: 1fr; } .alt-menu { justify-content: flex-start; } }

/* ---------------- az hareket ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------------- modüller ---------------- */
.moduller { background: var(--zemin); }
.modul-duzen { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px 64px; align-items: stretch; }
.modul-liste { display: grid; gap: 6px; align-content: start; }
.modul-sekme { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; width: 100%; padding: 20px 22px 22px; text-align: left; border: 1px solid transparent; border-radius: 18px; background: transparent; color: var(--murekkep); font: inherit; cursor: pointer; overflow: hidden; transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.modul-sekme:hover { background: color-mix(in srgb, var(--yuzey) 60%, transparent); }
.modul-sekme[aria-selected="true"] { background: var(--yuzey); border-color: var(--cizgi); box-shadow: var(--golge-2); }
.ms-ikon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--yuzey-2); color: var(--ikincil); transition: background-color .3s ease, color .3s ease; }
.modul-sekme[aria-selected="true"] .ms-ikon { background: var(--marka); color: var(--marka-uzeri); }
.ms-metin { display: grid; gap: 4px; min-width: 0; }
.ms-ad { font-size: 15px; font-weight: 600; color: var(--marka); letter-spacing: -.01em; }
.ms-baslik { font-size: 21px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.modul-sekme[aria-selected="false"] .ms-baslik { color: var(--ikincil); }
.ms-aciklama { display: grid; grid-template-rows: 0fr; font-size: 16px; line-height: 1.55; color: var(--ikincil); opacity: 0; transition: grid-template-rows .45s ease, opacity .35s ease, margin .45s ease; }
.ms-aciklama { overflow: hidden; max-height: 0; }
.modul-sekme[aria-selected="true"] .ms-aciklama { max-height: 12em; opacity: 1; margin-top: 6px; transition: max-height .5s ease, opacity .4s ease .1s, margin .4s ease; }
.ms-ilerleme { position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px; overflow: hidden; opacity: 0; }
.ms-ilerleme i { display: block; height: 100%; width: 100%; background: var(--marka); transform-origin: left; transform: scaleX(var(--ilerleme, 0)); }
.modul-sekme[aria-selected="true"] .ms-ilerleme { opacity: 1; }
.modul-duzen.durdu .ms-ilerleme { opacity: 0; }

.modul-sahne { display: grid; min-width: 0; }
.modul-panel { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.985); transition: opacity .5s ease, transform .6s cubic-bezier(.3,.7,.2,1), visibility 0s linear .5s; }
.modul-panel.aktif { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.3,.7,.2,1), visibility 0s; }
.mp-ic { position: relative; height: 100%; min-height: 480px; border-radius: 26px; padding: clamp(24px, 4vw, 48px); overflow: hidden; display: grid; align-content: center; gap: 28px; background: var(--gece); color: var(--gece-metin); border: 1px solid var(--gece-cizgi); box-shadow: var(--golge-3); }
.mp-ic::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgb(69 196 179 / .16), transparent 65%); pointer-events: none; }
@media (max-width: 900px) {
  .modul-duzen { grid-template-columns: 1fr; }
  .mp-ic { min-height: 380px; }
  .modul-sekme { padding: 16px 16px 18px; grid-template-columns: 40px 1fr; gap: 14px; }
  .ms-ikon { width: 40px; height: 40px; }
  .ms-baslik { font-size: 19px; }
}

/* ses */
.ses-kisiler { position: relative; display: flex; justify-content: center; gap: clamp(20px, 5vw, 56px); }
.ses-kisi { display: grid; justify-items: center; gap: 12px; }
.ses-kisi b { font-size: 15px; font-weight: 500; color: var(--gece-soluk); transition: color .3s ease; }
.ses-avatar { position: relative; width: clamp(68px, 9vw, 88px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--gece-2); border: 1px solid var(--gece-cizgi); color: var(--gece-soluk); transition: color .3s ease, border-color .3s ease, transform .3s ease; }
.ses-avatar::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; transform: scale(.9); transition: opacity .3s ease, transform .3s ease; }
.ses-kisi.konusuyor .ses-avatar { transform: scale(1.06); }
.ses-kisi.konusuyor .ses-avatar::after { opacity: .5; transform: none; animation: halka 1.4s ease-out infinite; }
.ses-kisi.konusuyor b { color: var(--gece-metin); }
.ses-kisi.konusuyor .hekim { color: #45c4b3; border-color: #45c4b3; }
.ses-kisi.konusuyor .hasta { color: #7ea6e3; border-color: #7ea6e3; }
.ses-kisi.konusuyor .refakat { color: #e0a84a; border-color: #e0a84a; }
@keyframes halka { 0% { opacity: .55; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.25); } }
.ses-dalga { position: relative; display: flex; align-items: center; gap: 3px; height: 120px; }
.ses-dalga i { flex: 1; height: 4px; border-radius: 3px; background: var(--gece-cizgi); transition: height .1s linear; }
.ses-dalga i.hekim { background: #45c4b3; } .ses-dalga i.hasta { background: #7ea6e3; } .ses-dalga i.refakat { background: #e0a84a; }

/* ekran */
.v-ekran { align-content: center; }
.ek-pencere { position: relative; border-radius: 16px; background: #f4f6f9; color: #0c1824; overflow: hidden; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7); }
.ek-bar { display: flex; gap: 6px; padding: 12px 14px; background: #e3e8ee; }
.ek-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c6ced8; }
.ek-govde { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
.ek-alan { position: relative; display: grid; gap: 5px; min-height: 72px; padding: 12px 40px 12px 14px; border-radius: 11px; background: #fff; border: 1px solid #dfe5eb; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.ek-alan span { font-size: 12.5px; font-weight: 500; color: #536274; }
.ek-alan b { font-size: 15px; font-weight: 500; min-height: 1.4em; line-height: 1.4; }
.ek-alan.yaziyor { border-color: #f2c919; background: #fff8d6; box-shadow: 0 0 0 4px rgb(255 224 102 / .35); }
.ek-alan.yaziyor b::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #0c1824; animation: imlec .8s steps(1) infinite; }
.ek-tik { position: absolute; right: 12px; top: 12px; color: #0d6b62; opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .4s cubic-bezier(.3,.7,.2,1.4); }
.ek-alan.tamam .ek-tik { opacity: 1; transform: none; }
.ek-alan.kilitli { background: #f0f3f6; }
.ek-kilit { position: absolute; right: 13px; top: 13px; color: #8592a1; transition: color .3s ease, transform .3s ease; }
.ek-alan.kilitli.atlandi .ek-kilit { color: #0c1824; transform: scale(1.2); }
.ek-imlec { position: absolute; left: 0; top: 0; z-index: 2; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .4)); transition: transform .7s cubic-bezier(.45,0,.2,1); }
@media (max-width: 520px) { .ek-govde { grid-template-columns: 1fr; } }

/* klinik */
.v-klinik { gap: 14px; }
.kl-kart { position: relative; padding: 18px 20px; border-radius: 16px; background: var(--gece-2); border: 1px solid var(--gece-cizgi); display: grid; gap: 12px; }
.kl-kart h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--gece-metin); }
.kl-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.kl-cip { padding: 6px 12px; border-radius: 999px; background: rgb(69 196 179 / .14); color: #8fe3d6; font-size: 14px; font-weight: 500; }
.kl-cip.yok { background: rgb(255 255 255 / .06); color: var(--gece-soluk); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.kl-tanilar { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kl-tanilar li { display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 14px; align-items: center; font-size: 15px; }
.kl-tanilar li:first-child { font-weight: 600; }
.kl-tanilar i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #45c4b3 calc(var(--g) * 100%), rgb(255 255 255 / .07) 0); }
.kl-ilac { grid-template-columns: auto 1fr; align-items: center; gap: 14px; background: #fff8d6; border-color: #f2c919; color: #1a1405; }
.kl-ilac svg { color: #f2c919; }
.kl-ilac div { display: grid; gap: 1px; font-size: 15px; }
.kl-ilac span { color: #5c5226; }
.hareket .modul-panel:not(.aktif) .kl-kart, .hareket .modul-panel.yeniden .kl-kart { opacity: 0; transform: translateY(14px); }
.kl-kart { transition: opacity .5s ease, transform .6s cubic-bezier(.3,.7,.2,1); }
.modul-panel.aktif .kl-tani { transition-delay: .25s; }
.modul-panel.aktif .kl-ilac { transition-delay: .7s; }
.hareket .modul-panel:not(.aktif) .kl-tanilar i, .hareket .modul-panel.yeniden .kl-tanilar i { background-size: 0 100%; }
.kl-tanilar i { background-repeat: no-repeat; background-size: 100% 100%; transition: background-size .9s cubic-bezier(.3,.7,.2,1) .45s; }

/* çekirdek */
.v-cekirdek { padding: clamp(16px, 3vw, 32px); }
.v-cekirdek svg { width: 100%; height: auto; max-height: 420px; }
.ck-sinir { fill: none; stroke: rgb(69 196 179 / .35); stroke-width: 1.5; stroke-dasharray: 6 7; }
.ck-hatlar path { stroke: var(--gece-cizgi); stroke-width: 2; fill: none; }
.ck-paketler circle { fill: #ffe066; }
.ck-paketler circle:nth-child(even) { fill: #45c4b3; }
.ck-istasyonlar rect { fill: var(--gece-2); stroke: var(--gece-cizgi); stroke-width: 1.5; }
.ck-istasyonlar path { stroke: var(--gece-soluk); stroke-width: 2; stroke-linecap: round; }
.ck-merkez { fill: #ffe066; }
.ck-logo { fill: none; stroke: #0a1622; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ck-halka { fill: none; stroke: rgb(255 224 102 / .35); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ck-nabiz 2.6s ease-out infinite; }
.ck-halka.h2 { animation-delay: 1.3s; }
@keyframes ck-nabiz { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

/* kahraman paneli: ekrana otursun */
.panel { right: 24px !important; bottom: -12px; }
.panel-taslak { max-height: 0; padding-block: 0; margin-top: -14px; overflow: hidden; transition: opacity .35s ease, transform .35s ease, max-height .4s ease, padding .4s ease, margin .4s ease; }
.panel-taslak.goster { max-height: 60px; padding-block: 10px; margin-top: 0; }
@media (max-width: 820px) { .panel { right: auto !important; bottom: auto; } }
@media (min-width: 821px) {
  .urun { padding-bottom: 96px; }
  .panel { left: 28px; right: auto !important; bottom: 0; width: 290px; }
}

/* panel dalgası */
.panel-dalga-yer { position: relative; height: 44px; }
.panel-dalga { position: absolute; inset: 0; height: auto; }

/* modüller: kaydırmayla geçiş */
.modul-kaydirma { position: relative; }
@media (min-width: 900px) {
  .modul-duzen { position: sticky; top: max(88px, calc(50vh - 290px)); }
  .modul-sahne { height: min(580px, calc(100vh - 120px)); }
  .mp-ic { min-height: 0; }
}
.ms-ilerleme { opacity: 1; background: var(--cizgi); }
.modul-sekme[aria-selected="false"] .ms-ilerleme { opacity: .7; }
.modul-sekme.gecti .ms-ilerleme i { transform: scaleX(1); }
.mp-baslik { display: none; }
@media (max-width: 899px) {
  .modul-liste { display: none; }
  .modul-sahne { gap: 56px; }
  .modul-panel { grid-area: auto; opacity: 1; visibility: visible; transform: none; display: grid; gap: 18px; }
  .mp-baslik { display: grid; gap: 6px; }
  .mp-baslik .ms-ad { font-size: 15px; }
  .mp-baslik .ms-baslik { font-size: 24px; color: var(--murekkep); }
  .mp-baslik .ms-aciklama { max-height: none; opacity: 1; margin: 0; }
  .hareket .modul-panel:not(.aktif) .kl-kart { opacity: 1; transform: none; }
  .hareket .modul-panel:not(.aktif) .kl-tanilar i { background-size: 100% 100%; }
}

/* ================= özellik bölümleri (geçmiş, SGK) ================= */
.ozellik { background: var(--zemin); }
#gecmis { background: var(--yuzey); border-top: 1px solid var(--cizgi); }
.ozellik-ic { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px 88px; align-items: center; }
.ozellik-ters .ozellik-metin { order: 2; }
.ozellik-metin { display: grid; gap: 22px; }
.ozellik-giris { font-size: 19px; color: var(--ikincil); max-width: 50ch; }
.fayda-liste { display: grid; gap: 0; margin-top: 6px; }
.fayda-liste li { display: grid; gap: 3px; padding: 16px 0 16px 22px; border-top: 1px solid var(--cizgi); position: relative; color: var(--ikincil); font-size: 16px; }
.fayda-liste li::before { content: ""; position: absolute; left: 0; top: 24px; width: 8px; height: 8px; border-radius: 2px; background: var(--marka); }
.fayda-liste b { color: var(--murekkep); font-size: 17.5px; font-weight: 600; letter-spacing: -.015em; }
@media (max-width: 900px) { .ozellik-ic { grid-template-columns: 1fr; } .ozellik-ters .ozellik-metin { order: 0; } }

/* geçmiş görseli */
.v-gecmis { margin: 0; display: grid; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: 26px; background: var(--zemin); border: 1px solid var(--cizgi); }
.zaman-hatti { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 20px 18px 18px; border-radius: 18px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-1); }
.zh-cizgi { position: absolute; left: calc(18px + 12.5% - 9px); right: calc(18px + 12.5% - 9px); top: 30px; height: 2px; background: var(--yuzey-3); }
.zh-cizgi i { position: absolute; inset: 0; background: var(--marka); transform-origin: left; transition: transform 1.4s cubic-bezier(.4,0,.2,1); }
.zh-nokta { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding-top: 22px; font-size: 13.5px; transition: opacity .5s ease, transform .5s ease; }
.zh-nokta::before { content: ""; position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--yuzey); border: 3px solid var(--marka); }
.zh-tarih { font-size: 12.5px; font-weight: 600; color: var(--marka); }
.zh-nokta b { font-weight: 500; line-height: 1.3; }
.zh-onemli::before { border-color: var(--sari-koyu); background: var(--sari); }
.zh-onemli .zh-tarih { color: var(--murekkep); }
.zh-bugun::before { background: var(--marka); box-shadow: 0 0 0 6px var(--marka-acik); animation: bugun 2s ease-in-out infinite; }
.zh-bugun b { font-weight: 600; }
@keyframes bugun { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--marka-acik) 30%, transparent); } }
.lab-kart { display: grid; border-radius: 18px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-1); overflow: hidden; }
.lab-satir { display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--cizgi); font-size: 15px; transition: opacity .5s ease, transform .5s ease; }
.lab-satir:first-child { border-top: 0; }
.lab-ad { font-weight: 500; }
.lab-egri { width: 90px; height: 28px; color: var(--marka); }
.lab-deger { justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-deger small { font-size: 12.5px; font-weight: 500; color: var(--ikincil); }
.lab-deger small.yukari { color: #c2410c; font-weight: 700; }
.lab-kritik { grid-template-columns: minmax(0, 1fr) auto auto; background: #fdecec; color: #8f1d1d; }
.lab-kritik .lab-deger small { color: #a33; }
.lab-etiket { padding: 4px 10px; border-radius: 999px; background: #d92d2d; color: #fff; font-size: 12.5px; font-weight: 600; animation: kritik 1.8s ease-in-out infinite; }
@keyframes kritik { 50% { box-shadow: 0 0 0 5px rgb(217 45 45 / .18); } }
.bag-not { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--sari-zemin); border: 1px solid var(--sari-koyu); font-size: 14.5px; font-weight: 500; transition: opacity .5s ease 1.4s, transform .5s ease 1.4s; }
.bag-not svg { color: #8a6d00; flex: none; }
.hareket .v-gecmis:not(.gorundu) .zh-cizgi i { transform: scaleX(0); }
.hareket .v-gecmis:not(.gorundu) .zh-nokta, .hareket .v-gecmis:not(.gorundu) .lab-satir { opacity: 0; transform: translateY(10px); }
.hareket .v-gecmis:not(.gorundu) .bag-not { opacity: 0; transform: translateY(10px); }
.v-gecmis .zh-nokta:nth-child(3) { transition-delay: .35s; } .v-gecmis .zh-nokta:nth-child(4) { transition-delay: .7s; } .v-gecmis .zh-nokta:nth-child(5) { transition-delay: 1.05s; }
.v-gecmis .lab-satir:nth-child(1) { transition-delay: .5s; } .v-gecmis .lab-satir:nth-child(2) { transition-delay: .7s; } .v-gecmis .lab-satir:nth-child(3) { transition-delay: .9s; }
@media (max-width: 520px) { .zaman-hatti { grid-template-columns: repeat(2, 1fr); row-gap: 18px; } .zh-cizgi { display: none; } .lab-satir { grid-template-columns: 1fr auto; } .lab-egri { display: none; } }

/* ================= Sempas'a sorun ================= */
.sor { background: var(--gece); color: var(--gece-metin); }
.sor-bas { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.sor-bas p { font-size: 19px; color: var(--gece-soluk); max-width: 60ch; }
.sor-izgara { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px 56px; align-items: start; }
.sohbet { margin: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 460px; border-radius: 24px; background: var(--gece-2); border: 1px solid var(--gece-cizgi); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7); overflow: hidden; }
.sohbet-ust { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--gece-cizgi); }
.sohbet-ust svg { width: 26px; height: 26px; color: #ffe066; }
.sohbet-hasta { margin-left: auto; font-size: 13.5px; color: var(--gece-soluk); }
.sohbet-akis { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 22px 20px; min-height: 0; overflow: hidden; }
.mesaj { max-width: 86%; font-size: 15.5px; line-height: 1.5; animation: mesaj-gel .45s cubic-bezier(.3,.7,.2,1) both; }
@keyframes mesaj-gel { from { opacity: 0; transform: translateY(10px); } }
.hekim-mesaj { align-self: flex-end; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: #45c4b3; color: #04201c; font-weight: 500; }
.pulse-mesaj { align-self: flex-start; display: grid; gap: 12px; padding: 16px 18px; border-radius: 18px 18px 18px 4px; background: var(--gece-3); border: 1px solid var(--gece-cizgi); }
.pulse-mesaj p { margin: 0; }
.pulse-mesaj.bilinmiyor { border-color: rgb(255 224 102 / .4); }
.kaynaklar { display: flex; flex-wrap: wrap; gap: 6px; }
.kaynaklar span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: rgb(255 255 255 / .06); border: 1px solid var(--gece-cizgi); font-size: 12.5px; font-weight: 500; color: var(--gece-metin); }
.kaynaklar span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ffe066; }
.yaziyor-nokta { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 18px; background: var(--gece-3); }
.yaziyor-nokta i { width: 7px; height: 7px; border-radius: 50%; background: var(--gece-soluk); animation: nokta 1s ease-in-out infinite; }
.yaziyor-nokta i:nth-child(2) { animation-delay: .15s; } .yaziyor-nokta i:nth-child(3) { animation-delay: .3s; }
@keyframes nokta { 50% { transform: translateY(-4px); opacity: .5; } }
.sohbet-girdi { display: flex; align-items: center; gap: 12px; margin: 0 16px 16px; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--gece); border: 1px solid var(--gece-cizgi); min-height: 50px; font-size: 15px; }
.girdi-metin { flex: 1; min-height: 1.4em; }
.girdi-metin:empty::before { content: "Bir soru sorun…"; color: var(--gece-soluk); }
.girdi-metin.yaziyor::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--gece-metin); animation: imlec .8s steps(1) infinite; }
.girdi-ikon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgb(69 196 179 / .14); color: #45c4b3; }
.sor-yan { display: grid; gap: 28px; }
.fayda-liste.koyu li { border-top-color: var(--gece-cizgi); color: var(--gece-soluk); }
.fayda-liste.koyu li::before { background: #45c4b3; }
.fayda-liste.koyu b { color: var(--gece-metin); }
.sorulmadi { display: grid; gap: 14px; padding: 20px; border-radius: 20px; background: var(--gece-2); border: 1px solid var(--gece-cizgi); }
.sorulmadi-bas { display: grid; gap: 2px; }
.sorulmadi-bas b { font-size: 17.5px; }
.sorulmadi-bas span { font-size: 14.5px; color: var(--gece-soluk); }
.soru-liste { display: grid; gap: 8px; }
.soru-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--gece); border: 1px solid var(--gece-cizgi); font-size: 14.5px; transition: border-color .4s ease, opacity .4s ease; }
.soru-liste li div { display: grid; gap: 1px; }
.soru-liste li span { font-size: 13px; color: var(--gece-soluk); }
.soru-liste i { width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--gece-soluk); position: relative; transition: background-color .3s ease, border-color .3s ease; }
.soru-liste i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #04201c; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.3,.7,.2,1.4); }
.soru-liste li.soruldu { border-color: rgb(69 196 179 / .5); }
.soru-liste li.soruldu i { background: #45c4b3; border-color: #45c4b3; }
.soru-liste li.soruldu i::after { transform: rotate(45deg) scale(1); }
.soru-liste li.soruldu b { color: var(--gece-soluk); }
@media (max-width: 900px) { .sor-izgara { grid-template-columns: 1fr; } .sohbet { min-height: 420px; } }

/* ================= SGK ================= */
.v-sgk { position: relative; margin: 0; padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) 56px; border-radius: 26px; background: var(--yuzey-2); border: 1px solid var(--cizgi); }
.recete { display: grid; border-radius: 18px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-2); overflow: hidden; }
.recete-bas { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); background: var(--zemin); }
.kurum-cip { padding: 3px 10px; border-radius: 6px; background: var(--marka-acik); color: var(--marka); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.recete-satir { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--cizgi); transition: opacity .45s ease, transform .45s ease, background-color .3s ease; }
.recete-satir:nth-of-type(2) { border-top: 0; }
.recete-satir > div { display: grid; gap: 1px; min-width: 0; }
.recete-satir b { font-weight: 600; font-size: 15.5px; }
.recete-satir span { font-size: 13.5px; color: var(--ikincil); }
.recete-satir.secili { background: color-mix(in srgb, var(--sari) 14%, var(--yuzey)); }
.durum { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; font-size: 13px !important; font-weight: 600; }
.durum i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800; color: #fff; }
.durum-uygun { background: #e3f4ee; color: #0b5e50 !important; } .durum-uygun i { background: #0d8a72; }
.durum-ihlal { background: #fff1d6; color: #8a4b00 !important; } .durum-ihlal i { background: #e08a00; }
.durum-bilinmiyor { background: #e8edf3; color: #3f5268 !important; } .durum-bilinmiyor i { background: #6a7f97; }
.neden { display: grid; gap: 10px; margin: 0 12px 12px; padding: 16px; border-radius: 14px; background: var(--zemin); border: 1px solid var(--sari-koyu); transition: opacity .5s ease .9s, transform .5s ease .9s; }
.neden-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.neden-bas b { font-size: 15px; }
.neden-bas span { font-size: 13.5px; font-weight: 600; color: var(--marka); }
.neden p { font-size: 14.5px; color: var(--ikincil); }
.neden-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.nd { padding: 8px 14px; border-radius: 9px; border: 1px solid var(--cizgi-2); font-size: 13.5px; font-weight: 500; }
.nd-ana { background: var(--murekkep); color: var(--zemin); border-color: var(--murekkep); }
.sut-bildirim { position: absolute; right: clamp(16px, 3vw, 28px); bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--gece); color: var(--gece-metin); box-shadow: 0 20px 40px -16px rgb(4 12 20 / .5); font-size: 13.5px; transition: opacity .5s ease 1.4s, transform .5s ease 1.4s; }
.sut-bildirim div { display: grid; }
.sut-bildirim span:not(.sut-ikon) { color: var(--gece-soluk); font-size: 12.5px; }
.sut-ikon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgb(255 224 102 / .16); color: #ffe066; }
.hareket .v-sgk:not(.gorundu) .recete-satir { opacity: 0; transform: translateX(-12px); }
.hareket .v-sgk:not(.gorundu) .neden, .hareket .v-sgk:not(.gorundu) .sut-bildirim { opacity: 0; transform: translateY(12px); }
.v-sgk .recete-satir:nth-of-type(3) { transition-delay: .2s; } .v-sgk .recete-satir:nth-of-type(4) { transition-delay: .4s; }
@media (max-width: 520px) { .recete-satir { flex-wrap: wrap; } .sut-bildirim { position: static; margin-top: 14px; } .v-sgk { padding-bottom: 20px; } }

/* ================= kahraman v3: ürün görseli en üstte, başlık altında ================= */
.kahraman { padding-block: clamp(24px, 3.5vw, 44px) clamp(64px, 8vw, 112px); }
.kahraman::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%); }
.kahraman .urun { margin-bottom: clamp(36px, 4.5vw, 64px); }
.kahraman .urun-parilti { inset: 20% 4% -2% 4%; }
.kahraman-ust { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 28px 72px; margin-bottom: 0; padding-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--cizgi); }
.kahraman-ust h1 { font-size: clamp(40px, 5vw, 68px); }
.kahraman-yan { display: grid; justify-content: stretch; align-items: start; gap: 24px; }
.kahraman-yan .kahraman-alt { max-width: 46ch; font-size: 18px; }
@media (min-width: 821px) { .urun { padding-bottom: 72px; } }
@media (max-width: 900px) { .kahraman-ust { grid-template-columns: 1fr; } }
.kahraman-ust { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 28px 56px; }
.kahraman-ust h1 { font-size: clamp(40px, 4.6vw, 64px); }
.kahraman .urun { margin-bottom: clamp(24px, 3vw, 36px); }
@media (min-width: 821px) { .urun { padding-bottom: 56px; } }
@media (max-width: 1100px) { .kahraman-ust { grid-template-columns: 1fr; } }
.kahraman-ust { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.kahraman-ust h1 { font-size: clamp(40px, 4.2vw, 60px); }
.kahraman-yan .dugmeler { flex-wrap: nowrap; }
@media (max-width: 480px) { .kahraman-yan .dugmeler { flex-wrap: wrap; } }

/* modül 4: Sempas SGK */
.v-sgkm { gap: 16px; }
.sm-recete { display: grid; border-radius: 16px; background: var(--gece-2); border: 1px solid var(--gece-cizgi); overflow: hidden; }
.sm-bas { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--gece-cizgi); }
.sm-bas b { font-size: 15px; }
.sm-kurum { padding: 3px 9px; border-radius: 6px; background: rgb(69 196 179 / .16); color: #8fe3d6; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.sm-satir { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--gece-cizgi); transition: opacity .45s ease, transform .5s cubic-bezier(.3,.7,.2,1), background-color .3s ease; }
.sm-bas + .sm-satir { border-top: 0; }
.sm-satir > div { display: grid; gap: 1px; min-width: 0; }
.sm-satir b { font-size: 15.5px; font-weight: 600; }
.sm-satir span { font-size: 13.5px; color: var(--gece-soluk); }
.sm-isaretli { background: rgb(255 224 102 / .07); }
.sm-durum { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; font-size: 13px !important; font-weight: 600; }
.sm-durum i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: #0a1622; }
.sm-durum.uygun { background: rgb(69 196 179 / .14); color: #8fe3d6 !important; } .sm-durum.uygun i { background: #45c4b3; }
.sm-durum.ihlal { background: rgb(255 224 102 / .14); color: #ffe066 !important; } .sm-durum.ihlal i { background: #ffe066; }
.sm-durum.bilinmiyor { background: rgb(255 255 255 / .07); color: var(--gece-metin) !important; } .sm-durum.bilinmiyor i { background: var(--gece-soluk); }
.sm-neden { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: #fff8d6; border: 1px solid #f2c919; color: #1a1405; font-size: 14.5px; transition: opacity .5s ease .75s, transform .5s ease .75s; }
.sm-neden b { font-size: 14px; color: #6b5300; }
.modul-panel .sm-satir:nth-of-type(3) { transition-delay: .2s; } .modul-panel .sm-satir:nth-of-type(4) { transition-delay: .4s; }
.hareket .modul-panel:not(.aktif) .sm-satir, .hareket .modul-panel.yeniden .sm-satir { opacity: 0; transform: translateX(-14px); }
.hareket .modul-panel:not(.aktif) .sm-neden, .hareket .modul-panel.yeniden .sm-neden { opacity: 0; transform: translateY(12px); }
@media (max-width: 899px) { .hareket .modul-panel:not(.aktif) .sm-satir, .hareket .modul-panel:not(.aktif) .sm-neden { opacity: 1; transform: none; } }
@media (max-width: 480px) { .sm-satir { flex-wrap: wrap; } }
#sgk { background: var(--yuzey); border-top: 1px solid var(--cizgi); }

/* ================= HBYS v2: katman şeması + yetenekler ================= */
.hbys { background: var(--yuzey); border-top: 1px solid var(--cizgi); }
.hbys-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 72px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.hbys-bas p { font-size: 18.5px; color: var(--ikincil); max-width: 54ch; }
.hbys-izgara { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 64px; align-items: start; }
@media (max-width: 900px) { .hbys-bas, .hbys-izgara { grid-template-columns: 1fr; } }

.katmanlar { margin: 0; display: grid; justify-items: stretch; padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: var(--zemin); border: 1px solid var(--cizgi); }
.kt { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-1); transition: opacity .5s ease, transform .5s cubic-bezier(.3,.7,.2,1); }
.kt > div { display: grid; gap: 1px; min-width: 0; }
.kt b { font-size: 16px; font-weight: 600; }
.kt span:not(.kt-ikon):not(.kt-rozet) { font-size: 14px; color: var(--ikincil); }
.kt-ikon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--marka-acik); color: var(--marka); }
.kt-pulse { background: var(--gece); border-color: var(--gece-cizgi); color: var(--gece-metin); padding: 18px 20px; box-shadow: 0 20px 40px -18px rgb(4 12 20 / .55); }
.kt-logo { width: 32px; height: 32px; color: #ffe066; flex: none; }
.kt-pulse b { font-size: 18px; }
.kt-eylemler { display: flex; gap: 6px; margin-left: auto; }
.kt-eylemler li { padding: 5px 11px; border-radius: 999px; background: rgb(69 196 179 / .14); color: #8fe3d6; font-size: 13px; font-weight: 600; }
.kt-pencere { flex: none; width: 42px; height: 42px; border-radius: 10px; border: 1.5px solid var(--cizgi-2); background: var(--zemin); display: grid; align-content: start; gap: 4px; padding: 8px 7px; }
.kt-pencere span { height: 4px; border-radius: 2px; background: var(--cizgi-2); }
.kt-pencere span:nth-child(2) { width: 70%; } .kt-pencere span:nth-child(3) { width: 85%; background: var(--sari-koyu); }
.kt-rozet { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--marka-acik); color: var(--marka); font-size: 13px; font-weight: 600; }
.kt-vt { border-style: dashed; background: transparent; box-shadow: none; }
.kt-vt .kt-ikon { background: var(--yuzey-2); color: var(--ikincil); }
.kt-bag { position: relative; justify-self: center; width: 2px; height: 34px; background: var(--cizgi-2); }
.kt-bag i { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--marka); animation: bag-in 1.6s linear infinite; }
.kt-bag-cift i:first-child { animation-name: bag-in; }
.kt-bag-cift i:last-child { background: var(--sari-koyu); animation-name: bag-cik; animation-delay: .8s; }
@keyframes bag-in { from { top: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: 30px; opacity: 0; } }
@keyframes bag-cik { from { top: 30px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: -4px; opacity: 0; } }
.kt-kesik { position: relative; justify-self: center; width: 2px; height: 40px; background: repeating-linear-gradient(var(--cizgi-2) 0 4px, transparent 4px 8px); }
.kt-kesik span { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--yuzey); border: 1.5px solid #d14343; color: #d14343; font-size: 11px; font-weight: 800; }
.hareket .katmanlar:not(.gorundu) .kt { opacity: 0; transform: translateY(12px); }
.katmanlar .kt-pulse { transition-delay: .15s; } .katmanlar .kt-hbys { transition-delay: .3s; } .katmanlar .kt-vt { transition-delay: .45s; }
@media (max-width: 520px) { .kt-pulse { flex-wrap: wrap; } .kt-eylemler { margin-left: 0; width: 100%; } .kt-hbys { flex-wrap: wrap; } .kt-rozet { margin-left: 56px; } }

.yetenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.yetenekler li { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 20px; background: var(--zemin); border: 1px solid var(--cizgi); }
.yt-ikon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--marka-acik); color: var(--marka); margin-bottom: 4px; }
.yetenekler h3 { font-size: 19px; letter-spacing: -.02em; }
.yetenekler p { font-size: 15.5px; color: var(--ikincil); line-height: 1.55; }
@media (max-width: 560px) { .yetenekler { grid-template-columns: 1fr; } }

/* ================= logo ================= */
.marka-isaret { width: 26px; height: 29px; color: #00b2a9; }
.panel-logo, .sohbet-logo, .kt-logo { color: #00b2a9; }
.panel-logo { width: 20px; height: 22px; }
.sohbet-ust .sohbet-logo { width: 22px; height: 24px; }
.kt-logo { width: 28px; height: 31px; }
.alt .marka-isaret { color: #00b2a9; }

/* ================= hero paneli: HBYS penceresinin içinde, boş kenar çubuğunda; sürüklenebilir ================= */
@media (min-width: 821px) {
  .kahraman .urun { padding-bottom: 0; }
  .pencere-govde { min-height: 500px; }
  .panel { left: 14px; right: auto !important; bottom: 14px; width: 222px; padding: 14px; gap: 10px; border-radius: 16px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
  .panel .panel-dalga-yer { height: 38px; }
  .panel .panel-dalga { gap: 2px; }
  .panel .panel-kisiler { gap: 10px; font-size: 12px; }
  .panel .panel-ad { font-size: 15px; }
  .panel .panel-durum { font-size: 12px; }
  .panel .panel-taslak { font-size: 12.5px; }
  .panel.surukleniyor { cursor: grabbing; box-shadow: 0 40px 80px -24px rgb(4 12 20 / .65); transition: none; }
  .panel-tutamak { position: absolute; left: 50%; top: 6px; width: 28px; height: 3px; margin-left: -14px; border-radius: 2px; background: rgb(255 255 255 / .18); }
}
@media (max-width: 820px) { .panel-tutamak { display: none; } }
@media (max-width: 1100px) { .kahraman-ust { grid-template-columns: 1fr; } }

/* ================= mobil düzeltmeler ================= */
@media (max-width: 820px) {
  section { padding-block: 64px; }
  .kahraman { padding-block: 16px 56px; }
  .panel { margin: 14px 0 0 !important; }
  .kahraman .urun { margin-bottom: 28px; }
  .kahraman-ust { padding-top: 28px; gap: 20px; }
  .kahraman-ust h1 { font-size: clamp(36px, 10vw, 48px); }
  .kahraman-yan .kahraman-alt { font-size: 17px; }
  .bolum-bas, .hbys-bas, .sor-bas { margin-bottom: 36px; }
  .bolum-bas p, .ozellik-giris, .hbys-bas p, .sor-bas p, .odak-metin p, .demo-metin p { font-size: 17px; }
  .ag { padding: 8px; }
  .modul-sahne { gap: 48px; }
}
@media (max-width: 520px) {
  .lab-satir.lab-kritik { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lab-etiket { justify-self: end; }
  .form-alt .sahte-dugme { padding: 7px 12px; }
  .pencere-sekmeler { margin-left: 8px; }
  .kt-rozet { margin-left: 0; }
  .zaman { padding: 18px; }
  .kart, .mp-ic { padding: 18px; }
  .sohbet { min-height: 380px; }
  .mesaj { max-width: 92%; font-size: 15px; }
}
.sohbet-ust .sohbet-logo { color: #00b2a9; }