@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url(/yazi/chakra-600-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url(/yazi/chakra-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url(/yazi/chakra-700-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url(/yazi/chakra-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url(/yazi/rubik-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url(/yazi/rubik.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url(/yazi/rubik-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url(/yazi/rubik.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url(/yazi/rubik-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url(/yazi/rubik.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* etesio.com.tr — vitrin stili */
:root {
  --gece: #0E1033;
  --gece-2: #1A1C4A;
  --ag: #5B4BDB;
  --ag-koyu: #4436B8;
  --dugum: #8E7CF6;
  --dugum-acik: #E9E5FF;
  --zemin: #F6F6FB;
  --yuzey: #FFFFFF;
  --cizgi: #DCDAF0;
  --metin: #0E1033;
  --metin-ikincil: #4B4D72;
  --yayinda: #1F9D6B;

  --yazi-baslik: 'Chakra Petch', 'Segoe UI', sans-serif;
  --yazi-govde: 'Rubik', 'Segoe UI', system-ui, sans-serif;

  --a1: .25rem; --a2: .5rem; --a3: .75rem; --a4: 1rem; --a5: 1.5rem;
  --a6: 2rem; --a7: 3rem; --a8: 4.5rem; --a9: 7rem;

  --kose-kucuk: 6px;
  --kose-orta: 14px;
  --kose-buyuk: 22px;

  --genislik: 1200px;
  --okuma: 62ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 1.0625rem/1.6 var(--yazi-govde);
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: var(--ag-koyu); }
a:hover { color: var(--ag); }
:focus-visible { outline: 3px solid var(--dugum); outline-offset: 3px; border-radius: 4px; }
.gizli-baslik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: var(--a4); top: -60px; background: var(--gece); color: #fff; padding: var(--a2) var(--a4); border-radius: var(--kose-kucuk); z-index: 50; }
.atla:focus { top: var(--a4); color: #fff; }

h1, h2, h3 { font-family: var(--yazi-baslik); line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; }
h3, .h3 { font-size: 1.25rem; font-weight: 600; }
h4.h3 { font-family: var(--yazi-baslik); line-height: 1.2; margin: 0; }
p { margin: 0; }

.kap { width: min(100% - 2rem, var(--genislik)); margin-inline: auto; }

/* Üst gezinme */
.ust {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246, 246, 251, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--cizgi);
}
.ust .kap { display: flex; align-items: center; gap: var(--a5); min-height: 68px; }
.logo { display: flex; align-items: center; gap: var(--a2); text-decoration: none; color: var(--gece); }
.logo img { height: 38px; width: auto; }
.logo small { font: 500 .85rem/1.1 var(--yazi-govde); color: var(--metin-ikincil); border-left: 1px solid var(--cizgi); padding-left: var(--a2); }
.alt .logo small { color: #A9A6D8; border-color: #34377A; }
.menu { display: flex; gap: var(--a5); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.menu a { color: var(--metin); text-decoration: none; font-weight: 500; font-size: .98rem; }
.menu a:hover { color: var(--ag); }
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  min-height: 46px; padding: 0 var(--a5);
  border-radius: var(--kose-kucuk);
  font: 600 1rem/1 var(--yazi-govde);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.dugme-ana { background: var(--ag); color: #fff; }
.dugme-ana:hover { background: var(--ag-koyu); color: #fff; }
.dugme-cizgi { border-color: var(--gece); color: var(--gece); background: transparent; }
.dugme-cizgi:hover { background: var(--gece); color: #fff; }
.dugme-acik { background: #fff; color: var(--gece); }
.dugme-acik:hover { background: var(--dugum-acik); color: var(--gece); }
.ust .dugme { min-height: 40px; }
.menu-ac { display: none; }

/* Açılış */
.acilis { position: relative; overflow: hidden; padding: var(--a8) 0 var(--a8); }
.acilis-ag { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--dugum); opacity: .55; pointer-events: none; }
.acilis-ag line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 400; stroke-dashoffset: 0; }
.acilis-ag circle { fill: var(--ag); }
@media (prefers-reduced-motion: no-preference) {
  .acilis-ag line { stroke-dashoffset: 400; animation: ag-ciz 2.4s ease-out forwards; }
  .acilis-ag circle { opacity: 0; animation: ag-dugum .6s ease-out forwards; }
}
@keyframes ag-ciz { to { stroke-dashoffset: 0; } }
@keyframes ag-dugum { to { opacity: 1; } }

.acilis .kap { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a7); align-items: center; }
.acilis-metin p { margin-top: var(--a5); color: var(--metin-ikincil); font-size: 1.15rem; max-width: 44ch; }
.acilis-eylem { display: flex; flex-wrap: wrap; gap: var(--a3); margin-top: var(--a6); }
.acilis-not { margin-top: var(--a5); font-size: .95rem; color: var(--metin-ikincil); display: flex; align-items: baseline; gap: var(--a3); }
.acilis-not .nokta { transform: translateY(-1px); }
.nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--yayinda); box-shadow: 0 0 0 4px rgba(31, 157, 107, .18); flex: none; }

/* Demo penceresi */
.pencere {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  box-shadow: 0 30px 60px -30px rgba(14, 16, 51, .35), 0 2px 0 rgba(14, 16, 51, .04);
  overflow: hidden;
}
.pencere-ust { display: flex; align-items: center; gap: var(--a3); padding: var(--a3) var(--a4); background: var(--gece); }
.pencere-isik { display: flex; gap: 6px; }
.pencere-isik i { width: 11px; height: 11px; border-radius: 50%; background: #3A3D72; display: block; }
.pencere-adres {
  flex: 1; display: flex; align-items: center; gap: var(--a2);
  background: var(--gece-2); color: #C9C6F5; border-radius: 999px;
  padding: 6px var(--a4); font-size: .88rem; min-width: 0;
}
.pencere-adres svg { flex: none; color: var(--yayinda); }
.pencere-adres span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pencere-sekmeler { display: flex; gap: 4px; padding: var(--a2); background: var(--gece); border-top: 1px solid var(--gece-2); }
.sekme {
  flex: 1; border: 0; cursor: pointer;
  background: transparent; color: #B7B4E6;
  font: 500 .95rem/1.2 var(--yazi-govde);
  padding: var(--a2) var(--a3); border-radius: var(--kose-kucuk);
}
.sekme:hover { color: #fff; background: var(--gece-2); }
.sekme[aria-selected="true"] { background: var(--ag); color: #fff; }
.pencere-ekran { position: relative; aspect-ratio: 16 / 10.5; background: var(--zemin); overflow: hidden; }
.pencere-ekran iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 840px; border: 0;
  max-width: none;
  transform-origin: 0 0;
}
.pencere-alt { display: flex; justify-content: space-between; align-items: center; gap: var(--a3); padding: var(--a3) var(--a4); border-top: 1px solid var(--cizgi); font-size: .92rem; color: var(--metin-ikincil); }
.pencere-alt a { font-weight: 600; text-decoration: none; }

/* Bölümler */
.bolum { padding: var(--a9) 0; }
.bolum-bas { max-width: var(--okuma); margin-bottom: var(--a7); }
.bolum-bas p { margin-top: var(--a4); color: var(--metin-ikincil); font-size: 1.1rem; }
.koyu { background: var(--gece); color: #EDEBFF; }
.koyu .bolum-bas p { color: #B7B4E6; }
.koyu a:not(.dugme) { color: #C9C0FF; }

/* Nasıl çalışır: bağlı düğümler */
.yol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a6); position: relative; }
.yol::before { content: ""; position: absolute; top: 15px; left: 16px; right: 16px; height: 2px; background: linear-gradient(90deg, var(--ag), var(--dugum)); }
.yol li { position: relative; padding-top: var(--a7); }
.yol li::before {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--zemin); border: 3px solid var(--ag);
}
.yol h3 { margin-bottom: var(--a2); }
.yol p { color: var(--metin-ikincil); max-width: 34ch; }

/* Paketler */
.donem { display: inline-flex; padding: 4px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 999px; margin-bottom: var(--a6); }
.donem button { border: 0; background: transparent; padding: var(--a2) var(--a5); border-radius: 999px; font: 600 .98rem/1 var(--yazi-govde); color: var(--metin-ikincil); cursor: pointer; min-height: 40px; }
.donem button[aria-pressed="true"] { background: var(--gece); color: #fff; }
.donem small { font-weight: 500; color: var(--yayinda); margin-left: 4px; }
.donem button[aria-pressed="true"] small { color: #8FE3BF; }

.aile { margin-top: var(--a7); }
.aile:first-of-type { margin-top: 0; }
.aile-bas { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a4); flex-wrap: wrap; margin-bottom: var(--a4); border-bottom: 2px solid var(--gece); padding-bottom: var(--a3); }
.aile-bas p { color: var(--metin-ikincil); }
.paketler { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--cizgi); border-radius: var(--kose-orta); background: var(--yuzey); overflow: hidden; }
.paket { padding: var(--a5); display: flex; flex-direction: column; gap: var(--a4); border-left: 1px solid var(--cizgi); }
.paket:first-child { border-left: 0; }
.paket-one { background: linear-gradient(180deg, var(--dugum-acik), var(--yuzey) 40%); }
.paket-ad { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); }
.rozet { font-size: .78rem; font-weight: 600; background: var(--ag); color: #fff; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.paket > p { color: var(--metin-ikincil); font-size: .95rem; min-height: 3em; }
.paket ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--a2); font-size: .95rem; flex: 1; }
.paket li { display: flex; gap: var(--a2); align-items: flex-start; }
.paket li svg { flex: none; margin-top: 4px; color: var(--ag); }
.paket .dugme { width: 100%; }
.dipnot { margin-top: var(--a4); color: var(--metin-ikincil); font-size: .9rem; }

/* Uygulamalar */
.uygulama-izgara { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--a7); align-items: start; }
.uygulama-gruplar { display: grid; gap: var(--a5); }
.ugrup h3 { font-size: 1rem; color: #C9C0FF; margin-bottom: var(--a3); font-family: var(--yazi-govde); font-weight: 600; }
.etiketler { display: flex; flex-wrap: wrap; gap: var(--a2); list-style: none; padding: 0; margin: 0; }
.etiketler li { border: 1px solid #34377A; background: var(--gece-2); padding: 6px 12px; border-radius: var(--kose-kucuk); font-size: .95rem; }
.etiketler li.one { border-color: var(--dugum); color: #fff; }

/* Alan adı */
.alan { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a7); align-items: center; }
.alan > *, .uygulama-izgara > *, .acilis .kap > * { min-width: 0; }
.alan-form { display: flex; gap: var(--a2); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose-orta); padding: var(--a2); }
.alan-form input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 1.1rem var(--yazi-govde); padding: 0 var(--a3); color: var(--metin); }
.alan-form input:focus { outline: none; }
.alan-form:focus-within { border-color: var(--ag); box-shadow: 0 0 0 3px var(--dugum-acik); }
.alan-secenek { margin-top: var(--a5); display: grid; gap: var(--a4); }
.alan-secenek div { display: flex; gap: var(--a3); }
.alan-secenek svg { flex: none; color: var(--ag); margin-top: 3px; }
.alan-secenek p { color: var(--metin-ikincil); }
.alan-secenek strong { color: var(--metin); display: block; }

/* SSS */
.sss { max-width: 820px; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { cursor: pointer; list-style: none; padding: var(--a5) 0; font: 600 1.12rem/1.35 var(--yazi-govde); display: flex; justify-content: space-between; gap: var(--a4); }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font: 500 1.5rem/1 var(--yazi-baslik); color: var(--ag); }
.sss details[open] summary::after { content: "−"; }
.sss details p { padding-bottom: var(--a5); color: var(--metin-ikincil); max-width: var(--okuma); }

/* Kapanış çağrısı */
.cagri { display: flex; justify-content: space-between; align-items: center; gap: var(--a6); flex-wrap: wrap; }
.cagri p { margin-top: var(--a3); color: #B7B4E6; max-width: 50ch; }

/* Alt bilgi */
.alt { background: #090A24; color: #A9A6D8; padding: var(--a8) 0 var(--a6); font-size: .95rem; }
.alt-izgara { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--a6); }
.alt h2 { font-size: 1rem; color: #fff; font-family: var(--yazi-govde); font-weight: 600; margin-bottom: var(--a3); }
.alt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--a2); }
.alt a { color: #A9A6D8; text-decoration: none; }
.alt a:hover { color: #fff; }
.alt .logo { color: #fff; margin-bottom: var(--a3); }
.alt-son { margin-top: var(--a7); padding-top: var(--a5); border-top: 1px solid #23255A; display: flex; justify-content: space-between; gap: var(--a4); flex-wrap: wrap; font-size: .88rem; }

/* Tablet */
@media (max-width: 1023px) {
  .acilis .kap { grid-template-columns: 1fr; }
  .paketler { grid-template-columns: repeat(2, 1fr); }
  .paket:nth-child(3) { border-left: 0; }
  .paket:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
  .uygulama-izgara, .alan { grid-template-columns: 1fr; }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
}
/* Mobil */
@media (max-width: 767px) {
  .menu { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--zemin); border-bottom: 1px solid var(--cizgi); padding: var(--a2) 1rem; }
  .menu.acik { display: flex; }
  .menu a { display: block; padding: var(--a3) 0; min-height: 44px; }
  .menu-ac { display: inline-flex; margin-left: auto; background: transparent; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--gece); cursor: pointer; }
  .ust .dugme-ana { display: none; }
  .acilis { padding-top: var(--a6); }
  .bolum { padding: var(--a8) 0; }
  .yol { grid-template-columns: 1fr; gap: var(--a5); }
  .yol::before { top: 16px; bottom: 16px; left: 15px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--ag), var(--dugum)); }
  .yol li { padding: 0 0 0 var(--a7); }
  .paketler { grid-template-columns: 1fr; }
  .paket { border-left: 0; border-top: 1px solid var(--cizgi); }
  .paket:first-child { border-top: 0; }
  .sekme { font-size: .85rem; padding: var(--a2); }
  .alt-izgara { grid-template-columns: 1fr; }
  .alan-form { flex-direction: column; }
  .alan-form input { min-height: 48px; }
  .pencere-alt { flex-direction: column; align-items: flex-start; }
}
@media (pointer: coarse) {
  .sekme, .donem button { min-height: 44px; }
}

section[id] { scroll-margin-top: 80px; }