/* EsraOgretmenim V25.8: Mobile responsive improvements + compact statistics.
   V21 approved lesson images, original background artwork and category layout retained. */
.class-landing .class-card-body .class-card-count{
 display:inline-flex;align-items:center;align-self:flex-start;max-width:calc(100% - 36px);
 gap:5px;margin-top:auto;padding:5px 9px;border-radius:999px;
 background:#edf4ff;color:#2864af;font-size:11px;line-height:1.3;
 font-weight:800;white-space:nowrap;box-shadow:0 1px 3px rgba(41,87,150,.06);
}
.class-landing .class-card-body .class-card-sub{margin-bottom:8px}
.material-card .download-count{color:#2567b0;font-weight:800;white-space:normal}
.material-card .stats{flex-wrap:wrap;gap:5px 9px;align-items:center}
.material-card .cardinfo{min-width:0}

@media (max-width:900px){
 .top{gap:12px}
 .top-nav{scrollbar-width:thin;-webkit-overflow-scrolling:touch}
 .search{min-width:0}
 .account{flex-wrap:wrap;justify-content:flex-end}
 .browse .results{min-width:0}
 .category-materials .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:730px){
 /* The children remain on the page edges; content gets more space on phones. */
 .scene-left,.scene-right{width:29px!important;opacity:.28!important}
 .shell{width:calc(100% - 12px)!important;max-width:none!important;
  margin:6px auto!important;scrollbar-gutter:auto!important;}
 .pagewrap{padding:12px 11px 23px}
 .top{display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px;
  padding:13px 13px 12px;align-items:center}
 .top>.brand{width:100%;max-width:100%;min-width:0}
 .top>.brand.brand-custom{max-width:100%;width:100%;min-width:0}
 .brand-custom>.site-custom-logo{max-width:100%;max-height:68px}
 .top>.account{min-width:0;width:100%;margin:0;display:flex;
  justify-content:flex-start;align-items:center;gap:7px;flex-wrap:wrap;white-space:normal}
 .top .account .hello{display:inline;max-width:100%;white-space:normal}
 .top .account .btn{min-height:39px;font-size:12px;padding:9px 11px}
 .top>.search{order:0;width:100%;max-width:none;min-width:0;flex-basis:auto;height:44px}
 .top>.search input{min-width:0;padding:0 12px;font-size:13px}
 .top-nav{display:flex!important;justify-content:flex-start!important;
  flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden;
  gap:7px;padding:9px 10px;scrollbar-width:thin;touch-action:pan-x}
 .top-nav .menu-pill{flex:none;min-height:42px;padding:9px 11px;gap:6px;font-size:12px}
 .hero{min-height:0;border-radius:16px}
 .hero-copy{max-width:100%;width:100%;padding:20px 16px 19px}
 .hero h1{font-size:clamp(21px,5.5vw,28px);max-width:95%;line-height:1.18}
 .hero p{max-width:90%;font-size:12px}
 .hero-art{width:44%;opacity:.24}
 .hero-pills{max-width:100%;gap:7px}
 .hero-pills a{font-size:10px;padding:8px 10px}
 .browse{display:block;min-width:0}
 .filters{padding:12px 13px;margin-bottom:15px;border-radius:15px}
 .filters form{display:flex;flex-wrap:wrap;gap:0 10px}
 .filters h3,.filters hr{flex-basis:100%}
 .filters label{font-size:12px;margin:6px 0;white-space:normal}
 .heading{flex-wrap:wrap;align-items:flex-start;gap:8px}
 .heading h2{font-size:20px}
 .counter{flex:none}
 .class-landing .class-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .class-landing .class-card-body{padding:10px 10px 13px}
 .class-landing .class-card-body .class-card-count{font-size:10px;padding:4px 7px;max-width:calc(100% - 26px)}
 .class-landing .class-card-body .class-card-sub{padding-right:21px}
 .browse .cards,.category-materials .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .category-materials .cardinfo{padding:9px}
 .material-card .stats{font-size:10px;gap:4px;margin:10px 0 9px}
 .material-card .cardinfo h3{overflow-wrap:anywhere}
 .material-card .btn{min-height:38px;text-align:center;white-space:normal}
 .detail,.panel-grid{grid-template-columns:minmax(0,1fr)}
 .detail-media,.detail-info{min-width:0}
 .detail-info h2{overflow-wrap:anywhere;font-size:21px}
 .inline-buttons{flex-wrap:wrap}
 .adminbox{padding:14px;min-width:0}
 .fields{grid-template-columns:minmax(0,1fr)}
 .admin-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .admin-tab{min-width:0;min-height:44px;padding:9px 7px;white-space:normal}
 .nav-admin-layout{grid-template-columns:minmax(0,1fr)}
 .home-block{min-width:0}
 .home-block>img{width:83px;flex:none}
 .home-block h3{overflow-wrap:anywhere}
 .online-footer{margin:4px 10px;padding:12px}
 .online-footer-roles{gap:6px}
 .online-chip{font-size:11px;padding:7px 9px}
}
@media (max-width:390px){
 .top{padding:11px 10px}
 .top>.brand strong{font-size:20px}
 .top .account .btn{font-size:11px;padding:8px 10px}
 .pagewrap{padding:10px 8px 19px}
 .class-landing .class-cards{gap:8px}
 .class-landing .class-card-body{padding:9px 8px 11px}
 .class-landing .class-card-body strong{font-size:13px}
 .class-landing .class-card-body .class-card-count{font-size:9px;padding:4px 6px;max-width:calc(100% - 25px)}
 .class-landing .class-card-body .class-card-go{right:7px;bottom:10px}
 .material-card .cardinfo{padding:8px}
 .material-card .stats{display:grid;gap:2px}
 .material-card .btn{font-size:11px;line-height:1.3;padding:9px 6px}
 .home-block{gap:9px;padding:10px}
 .home-block>img{width:64px}
 .online-footer{margin:4px 7px}
}