/* Yazı tipleri: Bricolage Grotesque, Geist, Geist Mono — SIL Open Font License 1.1; yerelden sunulur (Google / CDN isteği yok). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/vitrin/fonts/bricolage-grotesque-latin-standard-normal.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:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/vitrin/fonts/bricolage-grotesque-latin-ext-standard-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-display:swap;font-weight:100 900;src:url(/vitrin/fonts/geist-latin-wght-normal.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:'Geist';font-style:normal;font-display:swap;font-weight:100 900;src:url(/vitrin/fonts/geist-latin-ext-wght-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;src:url(/vitrin/fonts/geist-mono-latin-wght-normal.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:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;src:url(/vitrin/fonts/geist-mono-latin-ext-wght-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* efyazilim.com.tr — vitrin (07.10.2026)
   Düzen fikri: "Santral". Koyu kontrol odası bantları ile serin kâğıt bantları dönüşümlü; sayfanın her bölümü
   bir kanalın Logo ERP fiş defterine nasıl aktığını gösterir. Tek görünüm: renkler bilinçli olarak sabit (tema değişmez). */
:root {
  --gece: #060E1C;
  --gece-2: #0B1829;
  --gece-3: #12233A;
  --gece-cizgi: rgba(150, 180, 225, .14);
  --gece-yazi: #E9EFF8;
  --gece-yazi-2: #A6B4C8;
  --gece-yazi-3: #6F819B;
  --kagit: #F2F5F9;
  --kagit-2: #E7EDF4;
  --beyaz: #FFFFFF;
  --murekkep: #0A1628;
  --murekkep-2: #3A4A60;
  --murekkep-3: #66768D;
  --cizgi: #D6DEE9;
  --sinyal: #2F6BFF;
  --sinyal-acik: #7AA6FF;
  --sinyal-zemin: rgba(47, 107, 255, .1);
  --ok: #17A06A;
  --bekle: #D9960B;
  --hata: #D24848;
  --f-baslik: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-govde: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --kap: 1200px;
  --r: 14px;
  color-scheme: light;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 76px }
body.ef { margin: 0; background: var(--kagit); color: var(--murekkep); font-family: var(--f-govde); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
.ef img { max-width: 100%; display: block }
.ef a { color: inherit }
.ef h1, .ef h2, .ef h3, .ef h4 { font-family: var(--f-baslik); margin: 0; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; font-weight: 700 }
.ef p { margin: 0 }
.ef :focus-visible { outline: 2px solid var(--sinyal-acik); outline-offset: 3px; border-radius: 6px }
.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px) }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums }
.etiket { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--murekkep-3) }
.gece .etiket { color: var(--sinyal-acik) }
.ornek { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--gece-yazi-3); text-transform: uppercase }
.ornek::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(23, 160, 106, .18); animation: nabiz 2s infinite }
@keyframes nabiz { 50% { box-shadow: 0 0 0 6px rgba(23, 160, 106, 0) } }

/* ── Düğmeler ── */
.dg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; font-family: var(--f-govde); white-space: nowrap }
.dg:hover { transform: translateY(-1px) }
.dg.ana { background: var(--sinyal); color: #fff }
.dg.ana:hover { background: #2459e0 }
.dg.cizgi { border-color: var(--cizgi); color: var(--murekkep); background: var(--beyaz) }
.gece .dg.cizgi { border-color: rgba(166, 180, 200, .35); color: var(--gece-yazi); background: transparent }
.gece .dg.cizgi:hover { border-color: var(--sinyal-acik) }
.dg .ok { transition: transform .15s }
.dg:hover .ok { transform: translateX(3px) }

/* ── Üst çubuk ── */
.ust { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(6, 14, 28, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--gece-cizgi); color: var(--gece-yazi) }
.ust .kap { display: flex; align-items: center; gap: 22px; min-height: 64px }
.marka { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gece-yazi); font-family: var(--f-baslik); font-weight: 700; font-size: 19px; letter-spacing: -.02em }
.marka svg { flex: none }
.marka small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; color: var(--gece-yazi-3); font-weight: 400; margin-top: -2px }
.ust nav { display: flex; gap: 4px; margin-left: auto }
.ust nav a { padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--gece-yazi-2); text-decoration: none }
.ust nav a:hover { color: var(--gece-yazi); background: rgba(255, 255, 255, .05) }
.ust .sag { display: flex; gap: 8px; align-items: center }
.ust .dg { min-height: 38px; padding: 0 16px; font-size: 14px }
.menu-dg { display: none; background: none; border: 1px solid var(--gece-cizgi); color: var(--gece-yazi); width: 40px; height: 40px; border-radius: 10px; cursor: pointer }
@media (max-width: 1020px) {
  .ust nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--gece); border-bottom: 1px solid var(--gece-cizgi); padding: 10px 16px 16px }
  .ust.acik nav { display: flex }
  .ust nav a { padding: 12px }
  .menu-dg { display: inline-grid; place-items: center; margin-left: auto }
  .ust .sag .giris { display: none }
}
@media (max-width: 520px) { .ust .sag .dg.ana { display: none } }

/* ── Bantlar ── */
.bant { padding-block: clamp(64px, 9vw, 120px) }
.gece { background: var(--gece); color: var(--gece-yazi) }
.gece-2 { background: var(--gece-2); color: var(--gece-yazi) }
.kagit-2 { background: var(--kagit-2) }
.bas { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px) }
.bas h2 { font-size: clamp(32px, 4.6vw, 56px) }
.bas p { font-size: 18px; color: var(--murekkep-2); max-width: 62ch }
.gece .bas p, .gece-2 .bas p { color: var(--gece-yazi-2) }

/* ── Kahraman ── */
.kahraman { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 92px) clamp(48px, 6vw, 80px) }
.kahraman::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 520px at 78% 30%, rgba(47, 107, 255, .22), transparent 70%), radial-gradient(600px 400px at 10% 100%, rgba(47, 107, 255, .08), transparent 70%); pointer-events: none }
.kahraman .kap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 64px); align-items: center }
.kahraman h1 { font-size: clamp(42px, 6.4vw, 86px); letter-spacing: -.035em; line-height: .98; font-variation-settings: "wdth" 88 }
.kahraman h1 em { font-style: normal; color: var(--sinyal-acik) }
.kahraman .giris-yazi { font-size: clamp(17px, 1.6vw, 20px); color: var(--gece-yazi-2); max-width: 54ch; margin-top: 22px }
.kahraman .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px }
.kahraman .alt-not { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font-size: 14px; color: var(--gece-yazi-3) }
.kahraman .alt-not span::before { content: "✓"; color: var(--ok); margin-right: 7px; font-weight: 700 }
@media (max-width: 960px) { .kahraman .kap { grid-template-columns: minmax(0, 1fr) } }

/* Santral (kahraman görseli) */
.santral { border: 1px solid var(--gece-cizgi); border-radius: 20px; background: linear-gradient(180deg, rgba(18, 35, 58, .9), rgba(11, 24, 41, .95)); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04); overflow: hidden; min-width: 0 }
.santral-ust { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--gece-cizgi); gap: 10px }
.santral-ust b { font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--gece-yazi-2); letter-spacing: .04em }
.ag { position: relative; height: clamp(230px, 26vw, 300px) }
.ag canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.defter { border-top: 1px solid var(--gece-cizgi) }
.defter-bas, .defter-sat { display: grid; grid-template-columns: 58px minmax(0, 1.25fr) minmax(0, 1fr) 96px 22px; gap: 10px; align-items: center; padding: 0 16px }
.defter-bas { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gece-yazi-3); height: 32px; border-bottom: 1px solid var(--gece-cizgi) }
.defter-govde { height: 170px; overflow: hidden; position: relative }
.defter-sat { height: 34px; font-size: 13px; border-bottom: 1px solid rgba(150, 180, 225, .07); animation: dus .5s cubic-bezier(.2, .8, .2, 1) }
.defter-sat .z { font-family: var(--f-mono); color: var(--gece-yazi-3); font-size: 12px }
.defter-sat .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.defter-sat .k { color: var(--gece-yazi-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px }
.defter-sat .tu { font-family: var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.defter-sat .d { color: var(--ok); font-weight: 700; text-align: right }
.defter-sat .rozet { display: inline-block; font-family: var(--f-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: rgba(122, 166, 255, .14); color: var(--sinyal-acik); margin-right: 6px }
@keyframes dus { from { opacity: 0; transform: translateY(-10px); background: rgba(47, 107, 255, .16) } to { opacity: 1; transform: none; background: transparent } }
.santral-alt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--gece-cizgi) }
.santral-alt div { padding: 12px 16px; border-right: 1px solid var(--gece-cizgi) }
.santral-alt div:last-child { border-right: 0 }
.santral-alt b { display: block; font-family: var(--f-baslik); font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.santral-alt span { font-size: 12px; color: var(--gece-yazi-3) }
@media (max-width: 560px) { .defter-bas, .defter-sat { grid-template-columns: 40px minmax(0, 1fr) 98px 14px; gap: 8px; padding: 0 12px } .defter-bas .kc, .defter-sat .k { display: none } .defter-sat .tu { font-size: 12px } .defter-sat .rozet { display: none } }

/* ── Kanallar şeridi ── */
.kanallar { border-top: 1px solid var(--gece-cizgi); padding-block: 26px; background: var(--gece) ; color: var(--gece-yazi-2) }
.kanallar .kap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px }
.kanallar .etiket { margin-right: 6px; color: var(--gece-yazi-3) }
.kanal { font-family: var(--f-baslik); font-weight: 600; font-size: 17px; color: var(--gece-yazi); letter-spacing: -.01em; white-space: nowrap }
.kanal sup { font-family: var(--f-mono); font-size: 9.5px; color: var(--bekle); letter-spacing: .06em; margin-left: 3px; font-weight: 500 }
.kanal-ayrac { width: 4px; height: 4px; border-radius: 50%; background: var(--gece-yazi-3); opacity: .5 }
@media (max-width: 640px) { .kanal-ayrac { display: none } .kanallar .kap { gap: 8px 16px } .kanal { font-size: 15px } .kanallar .etiket { width: 100% } }

/* ── Yolculuk ── */
.yolculuk { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start }
@media (max-width: 900px) {
  .yolculuk { grid-template-columns: minmax(0, 1fr) }
  .adimlar { grid-auto-flow: column; grid-auto-columns: minmax(200px, 72%); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory }
  .adimlar li { scroll-snap-align: start }
  .adimlar button { height: 100% }
}
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: a }
.adimlar li { counter-increment: a }
.adimlar button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; padding: 12px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--murekkep-2); font: inherit; cursor: pointer; position: relative }
.adimlar button::before { content: counter(a, decimal-leading-zero); font-family: var(--f-mono); font-size: 12px; color: var(--murekkep-3); padding-top: 3px }
.adimlar button b { display: block; font-family: var(--f-baslik); font-size: 18px; color: var(--murekkep); letter-spacing: -.01em; font-weight: 600 }
.adimlar button small { display: block; font-size: 13.5px; line-height: 1.45; margin-top: 2px }
.adimlar button:hover { background: rgba(47, 107, 255, .05) }
.adimlar button[aria-selected="true"] { background: var(--beyaz); box-shadow: 0 1px 2px rgba(10, 22, 40, .06), 0 8px 24px -12px rgba(10, 22, 40, .18) }
.adimlar button[aria-selected="true"]::before { color: var(--sinyal) }
.adimlar .ilerle { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--sinyal); transform-origin: left; transform: scaleX(0) }
.adimlar button[aria-selected="true"] .ilerle { animation: ilerle var(--sure, 4s) linear forwards }
.yolculuk.durdu .adimlar .ilerle { animation-play-state: paused }
@keyframes ilerle { to { transform: scaleX(1) } }
.sahne { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 20px; padding: clamp(18px, 2.4vw, 28px); min-height: 440px; display: grid; grid-template-rows: auto 1fr; gap: 18px; box-shadow: 0 30px 60px -40px rgba(10, 22, 40, .35); min-width: 0 }
.sahne-ust { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap }
.sahne-ust .yol { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; color: var(--murekkep-3) }
.sahne-ust .yol i { font-style: normal; padding: 3px 8px; border-radius: 6px; background: var(--kagit) }
.sahne-ust .yol i.on { background: var(--sinyal); color: #fff }
.sahne-ic { min-width: 0 }
.belge { border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; animation: belir .45s ease }
@keyframes belir { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.belge-bas { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px; background: var(--kagit); border-bottom: 1px solid var(--cizgi) }
.belge-bas b { font-family: var(--f-baslik); font-size: 17px; font-weight: 600 }
.belge-bas span { font-family: var(--f-mono); font-size: 12.5px; color: var(--murekkep-3) }
.belge-govde { padding: 6px 16px 14px }
.alan { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--cizgi); font-size: 14px }
.alan:last-child { border-bottom: 0 }
.alan span { color: var(--murekkep-3) }
.alan b { font-weight: 600; min-width: 0; overflow-wrap: anywhere }
.kalem { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 6px }
.kalem th { text-align: left; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--murekkep-3); font-weight: 500; padding: 8px 6px; border-bottom: 1px solid var(--cizgi) }
.kalem td { padding: 8px 6px; border-bottom: 1px solid var(--kagit-2) }
.kalem .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.tablo-kap { overflow-x: auto }
.durum { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap }
.durum.ok { background: rgba(23, 160, 106, .12); color: #0f7a50 }
.durum.bekle { background: rgba(217, 150, 11, .14); color: #8a5d00 }
.durum.hata { background: rgba(210, 72, 72, .12); color: #a53030 }
.durum.bilgi { background: var(--sinyal-zemin); color: #1f4fd1 }
.sahne-not { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--murekkep-2); background: var(--kagit); border-radius: 10px; padding: 12px 14px }
.sahne-not svg { flex: none; margin-top: 2px; color: var(--sinyal) }
@media (max-width: 520px) { .alan { grid-template-columns: minmax(0, 1fr); gap: 2px } }

/* ── Çözüm kataloğu ── */
.katalog { display: grid; gap: 14px }
.grup { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; padding: clamp(20px, 3vw, 32px); background: var(--beyaz); border-radius: 18px; border: 1px solid var(--cizgi) }
@media (max-width: 860px) { .grup { grid-template-columns: minmax(0, 1fr); gap: 14px } }
.grup-bas h3 { font-size: 26px; margin-top: 8px }
.grup-bas p { color: var(--murekkep-3); font-size: 14.5px; margin-top: 8px }
.urunler { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px }
@media (min-width: 861px) { .urunler.d4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.urun { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 12px; background: var(--kagit); text-decoration: none; color: inherit; transition: background .15s, transform .15s; min-width: 0 }
a.urun:hover { background: var(--sinyal-zemin); transform: translateY(-2px) }
.urun-ad { display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.urun-ad b { font-family: var(--f-baslik); font-size: 18px; font-weight: 600; letter-spacing: -.01em }
.urun p { font-size: 14px; color: var(--murekkep-2); line-height: 1.5 }
.urun .ip { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px }
.urun .ip span { font-family: var(--f-mono); font-size: 11px; color: var(--murekkep-3); background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 6px; padding: 2px 7px }
.cip { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; white-space: nowrap }
.cip.yeni { background: rgba(217, 150, 11, .14); color: #8a5d00 }
.cip.site { background: var(--sinyal-zemin); color: #1f4fd1; text-transform: none; letter-spacing: 0 }
.urun .git { font-size: 13px; font-weight: 600; color: var(--sinyal) }

/* ── Canlı vitrin (sekmeler) ── */
.sekmeler { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 22px; scrollbar-width: thin }
.sekmeler button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--gece-cizgi); background: transparent; color: var(--gece-yazi-2); font: 500 14px var(--f-govde); cursor: pointer; white-space: nowrap }
.sekmeler button:hover { color: var(--gece-yazi); border-color: rgba(122, 166, 255, .4) }
.sekmeler button[aria-selected="true"] { background: var(--gece-yazi); color: var(--gece); border-color: var(--gece-yazi) }
.panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center }
.panel[hidden] { display: none }
@media (max-width: 900px) { .panel { grid-template-columns: minmax(0, 1fr) } }
.panel h3 { font-size: clamp(28px, 3.4vw, 40px) }
.panel .ozet { color: var(--gece-yazi-2); font-size: 17px; margin-top: 14px; max-width: 54ch }
.maddeler { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px }
.maddeler li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 15px; color: var(--gece-yazi) }
.maddeler li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 2px; background: var(--sinyal-acik); transform: rotate(45deg) }
.panel .linkler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px }
.ekran { background: var(--gece-2); border: 1px solid var(--gece-cizgi); border-radius: 18px; padding: 18px; min-width: 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7) }
.ekran-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap }
.ekran-ust b { font-family: var(--f-baslik); font-size: 16px; font-weight: 600 }
.k-kart { background: var(--gece-3); border: 1px solid var(--gece-cizgi); border-radius: 12px; padding: 14px; min-width: 0 }
.k-kart + .k-kart { margin-top: 10px }
.k-sat { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid rgba(150, 180, 225, .08) }
.k-sat:last-child { border-bottom: 0 }
.k-sat span { color: var(--gece-yazi-3) }
.k-sat b { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere }
.gece .durum.ok { background: rgba(23, 160, 106, .16); color: #4fd39b }
.gece .durum.bekle { background: rgba(217, 150, 11, .16); color: #f2c14e }
.gece .durum.hata { background: rgba(210, 72, 72, .18); color: #ff8a8a }
.gece .durum.bilgi { background: rgba(122, 166, 255, .16); color: var(--sinyal-acik) }
.hareket { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px; border-radius: 10px; background: var(--gece-3); border: 1px solid var(--gece-cizgi); font-size: 13px; transition: border-color .3s }
.hareket + .hareket { margin-top: 8px }
.hareket .ac { font-family: var(--f-mono); font-size: 12px; color: var(--gece-yazi-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hareket .tu { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right }
.hareket .es { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--gece-yazi-3); min-height: 22px }
.hareket.eslesti { border-color: rgba(79, 211, 155, .4) }
.cubuk { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--gece-3) }
.cubuk i { display: block; height: 100%; transition: width .6s ease }
.lejant { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--gece-yazi-2) }
.lejant span { display: inline-flex; align-items: center; gap: 6px }
.lejant i { width: 10px; height: 10px; border-radius: 3px; display: inline-block }
.sayac-sira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px }
.sayac-sira div { background: var(--gece-3); border: 1px solid var(--gece-cizgi); border-radius: 10px; padding: 10px 12px }
.sayac-sira b { display: block; font-family: var(--f-baslik); font-size: 24px; font-variant-numeric: tabular-nums }
.sayac-sira span { font-size: 11.5px; color: var(--gece-yazi-3) }
@media (max-width: 520px) { .sayac-sira { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.mektup { background: #F7F9FC; color: var(--murekkep); border-radius: 10px; padding: 16px; font-size: 13px; line-height: 1.55; margin-top: 12px }
.mektup b { font-family: var(--f-baslik) }
.mektup .dgler { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap }
.mektup .dgler span { padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 12.5px }

/* El terminali */
.terminal-sahne { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: center }
@media (max-width: 560px) { .terminal-sahne { grid-template-columns: minmax(0, 1fr) } .telefon { margin: 0 auto } }
.telefon { width: 210px; height: 400px; border-radius: 30px; background: #02060D; border: 1px solid rgba(150, 180, 225, .25); padding: 12px; position: relative; box-shadow: inset 0 0 0 4px #0d1726 }
.telefon-ekran { height: 100%; border-radius: 20px; background: #F5F7FA; color: var(--murekkep); overflow: hidden; display: flex; flex-direction: column; font-size: 12px }
.telefon-ekran .tb { background: var(--sinyal); color: #fff; padding: 10px 12px; font-weight: 600; font-size: 12.5px }
.telefon-ekran .tb small { display: block; opacity: .8; font-weight: 400; font-size: 10.5px }
.okuyucu { margin: 10px; height: 64px; border-radius: 10px; background: #0b1424; position: relative; overflow: hidden }
.okuyucu::after { content: ""; position: absolute; left: 10%; right: 10%; height: 2px; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; top: 50%; animation: tara 1.4s ease-in-out infinite alternate }
.okuyucu .barkod { position: absolute; inset: 14px 30px; background: repeating-linear-gradient(90deg, #E9EFF8 0 2px, transparent 2px 4px, #E9EFF8 4px 5px, transparent 5px 8px, #E9EFF8 8px 11px, transparent 11px 13px) }
@keyframes tara { from { top: 18% } to { top: 82% } }
.t-liste { flex: 1; overflow: hidden; padding: 0 10px }
.t-sat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 7px 0; border-bottom: 1px solid #e3e9f1 }
.t-sat b { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.t-sat span { font-family: var(--f-mono); font-size: 11px; text-align: right }
.t-sat .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #e3e9f1; overflow: hidden }
.t-sat .bar i { display: block; height: 100%; background: var(--sinyal); transition: width .4s }
.t-sat.tamam .bar i { background: var(--ok) }
.t-alt { padding: 10px; border-top: 1px solid #e3e9f1; font-weight: 600; text-align: center; font-size: 12px }
.t-alt.ok { background: rgba(23, 160, 106, .12); color: #0f7a50 }

/* Saha haritası */
.harita { position: relative; height: 300px; border-radius: 12px; overflow: hidden; background: var(--gece-3); border: 1px solid var(--gece-cizgi) }
.harita canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.akis { margin-top: 10px; display: grid; gap: 6px; max-height: 128px; overflow: hidden }
.akis div { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: var(--gece-3); animation: dus .5s ease }
.akis .z { font-family: var(--f-mono); color: var(--gece-yazi-3) }
.akis .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* Rapor */
.arama { display: flex; align-items: center; gap: 10px; background: var(--gece-3); border: 1px solid var(--gece-cizgi); border-radius: 10px; padding: 10px 12px; font-family: var(--f-mono); font-size: 14px }
.arama .imlec { width: 2px; height: 16px; background: var(--sinyal-acik); animation: yanip .9s steps(1) infinite }
@keyframes yanip { 50% { opacity: 0 } }
.r-tablo { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px }
.r-tablo th { text-align: left; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gece-yazi-3); font-weight: 500; padding: 8px 6px; border-bottom: 1px solid var(--gece-cizgi) }
.r-tablo td { padding: 9px 6px; border-bottom: 1px solid rgba(150, 180, 225, .07) }
.r-tablo .r { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.abc { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-family: var(--f-mono); font-weight: 600; font-size: 12px }
.abc.a { background: rgba(122, 166, 255, .2); color: var(--sinyal-acik) }
.abc.b { background: rgba(166, 180, 200, .16); color: var(--gece-yazi-2) }
.abc.c { background: rgba(166, 180, 200, .08); color: var(--gece-yazi-3) }
.rapor-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px }
.rapor-cipler span { font-size: 12px; padding: 4px 9px; border-radius: 6px; background: var(--gece-3); border: 1px solid var(--gece-cizgi); color: var(--gece-yazi-2) }

/* Yedek takvimi */
.takvim { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px }
.takvim i { aspect-ratio: 1; border-radius: 4px; background: var(--gece-3); position: relative; max-width: 100% }
.takvim i.ok { background: rgba(23, 160, 106, .55) }
.takvim i.bulut { background: #17A06A }
.takvim i.hata { background: rgba(210, 72, 72, .8) }
.takvim i.bugun { outline: 2px solid var(--sinyal-acik); outline-offset: 1px }
.takvim i.hata::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px var(--f-mono); color: #fff }
.gostergeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px }
.gosterge { background: var(--gece-3); border: 1px solid var(--gece-cizgi); border-radius: 10px; padding: 10px 12px }
.gosterge span { font-size: 11.5px; color: var(--gece-yazi-3) }
.gosterge b { display: block; font-family: var(--f-mono); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums }
.gosterge .ic { height: 4px; border-radius: 2px; background: rgba(150, 180, 225, .15); margin-top: 6px; overflow: hidden }
.gosterge .ic i { display: block; height: 100%; background: var(--sinyal-acik); transition: width .8s ease }

/* ── Uygulamalar ── */
.uygulamalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
@media (max-width: 900px) { .uygulamalar { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .uygulamalar { grid-template-columns: minmax(0, 1fr) } }
.uyg { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 20px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; min-width: 0 }
.uyg:hover { border-color: var(--sinyal); transform: translateY(-2px) }
.uyg .alan-adi { font-family: var(--f-mono); font-size: 13px; color: var(--sinyal); overflow-wrap: anywhere }
.uyg b { font-family: var(--f-baslik); font-size: 21px; font-weight: 600; letter-spacing: -.01em }
.uyg p { font-size: 14.5px; color: var(--murekkep-2) }
.uyg .kim { font-size: 12.5px; color: var(--murekkep-3); border-top: 1px solid var(--kagit-2); padding-top: 10px }
.tek-hesap { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding: 18px 22px; border-radius: 14px; background: var(--murekkep); color: var(--gece-yazi) }
.tek-hesap b { font-family: var(--f-baslik); font-size: 20px; font-weight: 600 }
.tek-hesap p { color: var(--gece-yazi-2); font-size: 14.5px; flex: 1 1 380px; min-width: 0 }

/* ── Süreç ── */
.surec { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: s; border-top: 1px solid var(--cizgi) }
@media (max-width: 980px) { .surec { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .surec { grid-template-columns: minmax(0, 1fr) } }
.surec li { list-style: none; counter-increment: s; padding: 22px 22px 8px 0; position: relative }
.surec li::before { content: counter(s, decimal-leading-zero); display: block; font-family: var(--f-mono); font-size: 13px; color: var(--sinyal); margin-bottom: 14px }
.surec li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--sinyal) }
.surec b { display: block; font-family: var(--f-baslik); font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px }
.surec p { font-size: 14.5px; color: var(--murekkep-2) }
.surec ul { margin: 0; padding: 0 }

/* ── Güvence ── */
.guvence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--gece-cizgi); border: 1px solid var(--gece-cizgi); border-radius: 18px; overflow: hidden }
@media (max-width: 900px) { .guvence { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .guvence { grid-template-columns: minmax(0, 1fr) } }
.guvence div { background: var(--gece-2); padding: 26px 24px }
.guvence svg { color: var(--sinyal-acik) }
.guvence b { display: block; font-family: var(--f-baslik); font-size: 19px; font-weight: 600; margin: 14px 0 6px }
.guvence p { font-size: 14.5px; color: var(--gece-yazi-2) }

/* ── İş ortakları ── */
.ortak { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center }
@media (max-width: 900px) { .ortak { grid-template-columns: minmax(0, 1fr) } }
.ortak ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px }
.ortak li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 15.5px; color: var(--murekkep-2) }
.ortak li::before { content: "→"; color: var(--sinyal); font-weight: 700 }
.masa { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 18px; padding: 18px; box-shadow: 0 30px 60px -40px rgba(10, 22, 40, .4); min-width: 0 }
.masa-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--kagit-2); flex-wrap: wrap }
.masa-bas b { font-family: var(--f-baslik); font-size: 16px }
.talep { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 0; border-bottom: 1px solid var(--kagit-2); font-size: 13.5px }
.talep:last-child { border-bottom: 0 }
.talep small { color: var(--murekkep-3); grid-column: 1 }

/* ── SSS ── */
.sss { display: grid; gap: 8px; max-width: 880px }
.sss details { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 14px; padding: 0 20px }
.sss summary { list-style: none; cursor: pointer; padding: 18px 0; font-family: var(--f-baslik); font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; align-items: center }
.sss summary::-webkit-details-marker { display: none }
.sss summary::after { content: "+"; font-family: var(--f-mono); font-size: 20px; color: var(--sinyal); transition: transform .2s }
.sss details[open] summary::after { transform: rotate(45deg) }
.sss details p { padding: 0 0 18px; color: var(--murekkep-2); max-width: 70ch }

/* ── İletişim / alt bilgi ── */
.iletisim { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 64px); align-items: end }
@media (max-width: 900px) { .iletisim { grid-template-columns: minmax(0, 1fr) } }
.iletisim h2 { font-size: clamp(36px, 5.4vw, 68px); letter-spacing: -.03em }
.iletisim .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px }
.kunye { display: grid; gap: 14px; font-size: 15px }
.kunye div { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--gece-cizgi) }
.kunye span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gece-yazi-3) }
.kunye b { font-weight: 500; user-select: all }
.kunye a { text-decoration: none }
.alt { border-top: 1px solid var(--gece-cizgi); padding-block: 28px; font-size: 13px; color: var(--gece-yazi-3) }
.alt .kap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between }
.alt nav { display: flex; flex-wrap: wrap; gap: 6px 18px }
.alt a { text-decoration: none; color: var(--gece-yazi-2) }
.alt a:hover { color: var(--gece-yazi) }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important }
}