/* =========================================================
   STEP 4.0 — SAYFA İÇİ KATEGORİ SİSTEMİ / PROTOTİP V2
   ========================================================= */
.training-showcase{display:none!important}
.step4-categories{width:min(92vw,1320px);margin:26px auto 12px;padding:0 clamp(42px,4vw,72px)}
.step4-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.step4-category{border:1px solid #ffffff32;border-radius:12px;background:#0b2b50;color:#fff;padding:0;overflow:hidden;cursor:pointer;text-align:left;transition:.22s ease;display:flex;flex-direction:column}
.step4-category:hover,.step4-category.active{border-color:var(--orange);transform:translateY(-2px)}
.step4-category__image{order:2;height:142px;overflow:hidden;background:#071f3a}
.step4-category__image img{width:100%;height:100%;display:block;object-fit:cover}
.step4-category__label{order:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;font-size:16px;font-weight:900}
.step4-category__label span:last-child{color:var(--orange);font-size:23px;line-height:1;transition:transform .22s ease}
.step4-category.active .step4-category__label span:last-child{transform:rotate(90deg)}

.step4-sections{width:min(92vw,1320px);margin:0 auto 38px;padding:0 clamp(42px,4vw,72px)}
.step4-inline-section{display:none;margin:0 0 14px;border:1px solid #ffffff30;border-radius:14px;background:linear-gradient(145deg,#071f3a,#0b2b50);height:610px;overflow:hidden;animation:step4Reveal .3s ease both;flex-direction:column}
.step4-inline-section.open{display:flex}
@keyframes step4Reveal{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.step4-inline-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px 11px;border-bottom:1px solid #ffffff20}
.step4-inline-head h2{margin:0;font-size:22px;color:#fff}
.step4-inline-head h2:after{content:"";display:block;width:76px;height:3px;background:var(--orange);margin-top:8px;border-radius:2px}
.step4-close{width:40px;height:40px;border:2px solid #fff;border-radius:50%;background:transparent;color:#fff;font-size:25px;display:grid;place-items:center;cursor:pointer;flex:0 0 40px}
.step4-close:hover{border-color:var(--orange);color:var(--orange)}
.step4-inline-body{padding:16px 18px 20px;flex:1;overflow-y:auto}
.step4-preview-note{margin:0 0 14px;color:#dbe7f2;font-size:13px}
.step4-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.step4-card{border:1px solid #ffffff2d;border-radius:11px;background:#082442;color:#fff;overflow:hidden;cursor:pointer;text-align:left;padding:0;transition:.18s ease}
.step4-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.step4-card img{width:100%;height:145px;display:block;object-fit:cover}
.step4-card__body{padding:12px 13px 14px}.step4-card h3{margin:0 0 7px;font-size:15px}.step4-card p{margin:0;color:#dce7f1;font-size:12px;line-height:1.45}
.step4-more{display:block;margin:18px auto 0;border:1px solid #ffffff88;border-radius:8px;background:transparent;color:#fff;padding:10px 24px;font-weight:900;cursor:pointer}
.step4-more:hover{border-color:var(--orange);color:var(--orange)}
.step4-detail{display:none;margin:17px 0 0;padding:17px 18px;border-left:4px solid var(--orange);border-radius:0 10px 10px 0;background:#03182f}
.step4-detail.open{display:block}.step4-detail h3{margin:0 0 8px;color:var(--orange)}.step4-detail p{margin:0;color:#edf5fb;line-height:1.6;font-size:13px}
.step4-empty{min-height:240px;display:grid;place-items:center;text-align:center;border:1px dashed #ffffff36;border-radius:12px;background:#071f3a80;padding:24px}
.step4-empty img{width:min(100%,500px);max-height:210px;object-fit:cover;border-radius:10px;margin-bottom:15px}.step4-empty h3{margin:0 0 8px}.step4-empty p{margin:0;color:#dbe7f2}
@media(max-width:900px){.step4-category-grid{grid-template-columns:repeat(2,1fr)}.step4-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.step4-categories,.step4-sections{width:100%;padding:0 10px}.step4-category-grid,.step4-card-grid{grid-template-columns:1fr}.step4-category__image{height:175px}.step4-card img{height:180px}}