/* ebatCAP sayfası: stil.css'in üstüne; vurgu rengi sarı yerine ebatCAP logosunun kırmızısı */
.cap {
  --kirmizi: #a3191d;
  --kirmizi-acik: #c0262b;
  --kirmizi-soluk: rgba(163, 25, 29, 0.16);
}

/* Düğmeler */
.dugme-kirmizi { background: var(--kirmizi); color: var(--beyaz); }
.dugme-kirmizi:hover { background: var(--kirmizi-acik); }
.cap .dugme:focus-visible, .cap a:focus-visible, .cap summary:focus-visible, .cap button:focus-visible { outline-color: var(--kirmizi); }

/* Logo: simge + ebatCAP yazısı */
.cap-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--siyah); }
.cap-logo img { width: 38px; height: 38px; }
.cap-logo span { font: 600 1.45rem/1 var(--font-baslik); letter-spacing: -0.02em; }
.cap-logo b { color: var(--kirmizi); font-weight: 600; }
.cap-logo-acik { color: var(--beyaz); margin-bottom: 12px; }
.cap-logo-acik b { color: #e0484c; }
.alt-marka p a { color: #e8e6df; }

/* Giriş */
.cap h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.cap .vurgu::after { background: var(--kirmizi-soluk); height: .38em; }
.cap .giris-maddeler li::before { color: var(--kirmizi); }
/* Giriş tek sütun, ortada */
.cap .giris { padding: 72px 0 56px; }
.cap .giris-ic { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.cap .giris-alt { margin-inline: auto; }
.cap .dugmeler, .cap .giris-maddeler { justify-content: center; }

/* Kayan kapak şeridi: kapaklar içbükey bir silindirin yüzünde, kenarlara doğru döner ve kararır */
.serit { background: var(--siyah); padding: 56px 0 28px; border-bottom: 3px solid var(--kirmizi); overflow: hidden; user-select: none; }
.serit-sahne {
  position: relative; height: 330px; perspective: 1100px; cursor: grab; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.serit-sahne.tutuluyor { cursor: grabbing; }
.serit-kart {
  position: absolute; left: 50%; top: 50%; width: 172px; aspect-ratio: 827 / 1194; margin: -124px 0 0 -86px;
  will-change: transform; transform-style: preserve-3d;
}
.serit-kart img {
  width: 100%; height: 100%; display: block; border-radius: 3px; pointer-events: none;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .4);
}
/* Kenara gittikçe kararma (opaklığı JS verir) */
.serit-kart::after { content: ''; position: absolute; inset: 0; border-radius: 3px; background: #000; opacity: var(--karanlik, 0); pointer-events: none; }
.serit-ad { text-align: center; color: #f0f0ee; font: 600 1.05rem var(--font-baslik); margin: 18px 0 2px; min-height: 1.4em; }
.serit-ad span { color: #e0484c; font: 500 .82rem var(--font); letter-spacing: .06em; text-transform: uppercase; margin-left: 10px; }
.serit-not { text-align: center; color: #8d8b84; font-size: .85rem; letter-spacing: .04em; margin: 0; padding-inline: 16px; }
.serit-ad { padding-inline: 16px; }
/* Durdur / Oynat (renkler şeridin kendi renkleri) */
.serit-dur {
  display: flex; align-items: center; gap: 8px; margin: 14px auto 0; min-height: 44px; padding: 0 18px;
  background: transparent; color: #f0f0ee; border: 1.5px solid #343431; border-radius: 999px;
  font: 500 .9rem var(--font); cursor: pointer; transition: border-color .15s;
}
.serit-dur:hover { border-color: #8d8b84; }
.serit-dur svg { width: 16px; height: 16px; }
.serit-dur[hidden] { display: none; }

/* Model süzgeci */
.suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 32px; }
.suzgec button {
  font: 500 .92rem var(--font); padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: var(--beyaz); color: var(--yazi); border: 1.5px solid #d9d6ce; transition: background .15s, border-color .15s;
}
.suzgec button:hover { border-color: var(--yazi); }
.suzgec button.secili { background: var(--siyah); border-color: var(--siyah); color: var(--beyaz); }

/* Model kartları */
.modeller { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.model {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  font: inherit; color: inherit; cursor: pointer; padding: 0 0 18px;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden;
  box-shadow: var(--golge-1); transition: transform .2s, box-shadow .2s;
}
.model:hover { transform: translateY(-3px); box-shadow: var(--golge-2); }
.model-resim { display: block; width: 100%; background: var(--kagit-2); padding: 26px 34px; margin-bottom: 14px; }
.model-resim img { width: 100%; aspect-ratio: 827 / 1194; border-radius: 2px; box-shadow: 0 10px 22px rgba(20, 20, 19, .18), 0 1px 3px rgba(20, 20, 19, .15); transition: transform .25s; }
.model:hover .model-resim img { transform: scale(1.03); }
.model-aile {
  display: block; padding: 0 18px; margin: 0 0 4px;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kirmizi);
}
.model-ad { display: block; padding: 0 18px; font: 600 1.05rem/1.25 var(--font-baslik); margin-bottom: 6px; }
.model-aciklama { display: block; padding: 0 18px; font-size: .9rem; color: #4a4943; line-height: 1.45; }

/* Özel model çağrısı */
.cap-ozel {
  margin-top: 40px; padding: 28px 32px; border-radius: 20px; background: var(--kagit);
  border: 1px solid var(--cizgi); display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.cap-ozel h3 { margin-bottom: .3em; }
.cap-ozel p { margin: 0; color: #4a4943; }
.cap-ozel .dugme { flex-shrink: 0; }

/* Nasıl çalışır */
.cap-adimlar { grid-template-columns: repeat(4, 1fr); }
.cap .adim-no { color: var(--beyaz); background: var(--kirmizi); }
.cap-ekran { margin: 40px 0 0; }
.cap-ekran img { border-radius: 18px; box-shadow: var(--golge-2); border: 1px solid var(--cizgi); width: 100%; }
.cap-ekran figcaption { font-size: .88rem; color: var(--soluk); margin-top: 12px; text-align: center; }

/* CNC */
.cap .bolum-koyu { background: var(--siyah); }
.cap-kartlar .kart { background: #1b1b1a; border-color: #2e2e2b; box-shadow: none; border-top: 3px solid var(--kirmizi); }
.cap-kartlar .kart:hover { box-shadow: none; }
.cap-kartlar .kart p { color: #bdbbb4; }

/* ebatCAD ile */
.cap-ikili { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.cap .rozet img { width: 20px; height: 20px; }
.cap-dugme-bosluk { margin-top: 28px; }
.cap-ikili-gorsel { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cap-ikili-gorsel img { border-radius: 3px; box-shadow: 0 18px 36px rgba(20, 20, 19, .2), 0 2px 4px rgba(20, 20, 19, .15); }
.cap-ikili-gorsel img:last-child { margin-top: 40px; }

/* Form */
.cap .form { background: var(--beyaz); }
.cap .secenekler label:has(input:checked) { background: var(--siyah); border-color: var(--siyah); color: var(--beyaz); }
.cap .secenekler input { accent-color: var(--kirmizi); }

/* Model ayrıntı penceresi */
.model-pencere {
  padding: 0; border: 0; border-radius: 22px; width: min(860px, 100% - 32px); max-height: calc(100% - 32px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); color: var(--yazi);
}
.model-pencere::backdrop { background: rgba(12, 12, 13, .6); }
.mp-ic { display: grid; grid-template-columns: 1fr 1fr; }
.mp-ic { background: var(--kagit-2); }
.mp-ic > img { width: 78%; height: auto; margin: 36px auto; align-self: center; border-radius: 2px; box-shadow: 0 16px 34px rgba(20, 20, 19, .22); }
.mp-yazi { background: var(--beyaz); }
.mp-yazi { padding: 40px 32px 32px; }
.mp-yazi .model-aile { padding: 0; color: var(--kirmizi); }
.mp-yazi h3 { font-size: 1.6rem; margin: 4px 0 12px; }
.mp-yazi p { color: #4a4943; }
.mp-baslik { font-weight: 600; color: var(--yazi) !important; margin: 20px 0 8px; font-size: .95rem; }
.mp-ayarlar { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-ayarlar li { font-size: .85rem; padding: 5px 12px; border-radius: 999px; background: var(--kagit-2); }
.mp-kapat {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--beyaz); box-shadow: var(--golge-1); font-size: 1rem; cursor: pointer; z-index: 2;
}
.mp-kapat:hover { background: var(--kagit-2); }

/* Alt bilgi */
.cap .alt { background: var(--siyah); }
.cap .sosyal a:hover { background: var(--kirmizi); color: var(--beyaz); }

/* Telefon ve tablet */
@media (max-width: 960px) {
  .modeller { grid-template-columns: repeat(3, 1fr); }
  .cap-adimlar { grid-template-columns: 1fr 1fr; }
  .cap-ikili { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 620px) {
  .cap-logo span { font-size: 1.25rem; }
  .cap-logo img { width: 32px; height: 32px; }
  .suzgec { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .suzgec button { flex-shrink: 0; }
  .modeller { grid-template-columns: 1fr 1fr; gap: 12px; }
  .model { padding-bottom: 14px; }
  .model-aile, .model-ad, .model-aciklama { padding-inline: 12px; }
  .model-aciklama { display: none; }
  .model-ad { font-size: .95rem; margin-bottom: 0; }
  .cap-adimlar { grid-template-columns: 1fr; }
  .cap-ozel { flex-direction: column; align-items: stretch; padding: 22px; }
  .mp-ic { grid-template-columns: 1fr; }
  .mp-ic > img { width: 52%; margin: 24px auto; }
  .serit-sahne { height: 220px; perspective: 700px; }
  .serit-kart { width: 118px; margin: -85px 0 0 -59px; }
  .mp-yazi { padding: 24px 22px 26px; }
}

/* Aktif menü bağlantısı ve telefon menüsü kırmızıyla */
.cap .menu a.aktif::after { background: var(--kirmizi); }
.cap .menu-dugme:focus-visible { outline-color: var(--kirmizi); }

/* G-code örneği (programın gerçek çıktısı) */
.gc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; margin-top: 56px; }
.gc-yazi { min-width: 0; }
.gc-yazi h3 { font-size: 1.4rem; }
.gc-yazi p { color: #c9c7c0; }
.gc-yazi .soluk { color: #9a988f; font-size: .92rem; }
.gc-dosyalar { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.gc-dosyalar li { background: #2a2a27; border-radius: 10px; padding: 12px 16px; display: grid; gap: 2px; border-left: 3px solid var(--kirmizi); }
.gc-dosyalar b { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .92rem; font-weight: 600; }
.gc-dosyalar span { color: #a9a79f; font-size: .88rem; }
.gc-kodlar {
  margin: 0; min-width: 0; overflow-x: auto; background: #0c0c0d; border: 1px solid #34342f; border-radius: 14px;
  padding: 20px 22px; font: .86rem/1.65 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #e8e6df;
  max-height: 440px;
}
.gc-not { color: #7d7b73; }
.gc-kod { color: #ff8a8d; font-weight: 600; }
.gc-eksen { color: #f6c21c; }
@media (max-width: 960px) { .gc { grid-template-columns: 1fr; gap: 24px; } }