/* Krowten Control: "geliştirici araçları" ve "panel" bölümlerinin birleşimi. */

.control-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#03121d,#041828 50%,#03121d);
  border-top:1px solid #143246; border-bottom:1px solid #143246;
  padding-block:104px 0;
}
.control-hero .devtools-vector{position:absolute;inset:0;z-index:-1}

/* --- Üst blok: metin + panel önizlemesi --- */
.control-top{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.24fr);
  gap:76px; align-items:center;
}
.control-copy h2{font-size:48px;letter-spacing:-2.2px;font-weight:550;line-height:1.15;margin:18px 0 0}
.control-copy h2>span{color:#93b9ca}
.control-copy>p{font-size:16px;line-height:1.8;color:#8cabbe;margin-top:22px;max-width:470px}

.control-points{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px}
.control-points li{
  display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start;
  padding:15px 0; border-top:1px solid #12344a;
}
.control-points li:last-child{border-bottom:1px solid #12344a}
.control-points li>span{
  display:inline-grid; place-items:center; width:26px; height:26px; margin-top:1px;
  border:1px solid #14607f; border-radius:50%;
  font-size:10px; font-weight:650; letter-spacing:.4px; color:#29c3ff;
}
.control-points strong{display:block;font-weight:500;font-size:15px;color:#d9eaf6;letter-spacing:-.2px}
.control-points small{display:block;margin-top:5px;font-size:12.5px;line-height:1.65;color:#7fa0b5}

.control-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:30px}
.control-link{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:#9fc8de}
.control-link>span{color:#29c3ff}
.control-link:hover{color:#dcf0fb}

/* --- Alt blok: servisler --- */
.control-services{padding-block:84px 0}
.control-services-head{max-width:620px;margin-bottom:30px}
.control-services-head h3{
  font-family:var(--heading); font-size:27px; font-weight:600;
  letter-spacing:-1px; margin:0; color:#dcebf5;
}
.control-services-head p{margin:12px 0 0;font-size:15px;line-height:1.75;color:#8cabbe}

.control-services-grid{
  display:grid; grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:34px; align-items:start;
}
.control-services-grid .tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.control-services-grid .connection-card{margin-top:0;max-width:none}

.control-hero .partner-band{margin-top:64px}

/* --- Açık tema --- */
html[data-theme=light] .control-hero{
  background:var(--surface2);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
html[data-theme=light] .control-copy h2>span{color:#5a7183}
html[data-theme=light] .control-copy>p,
html[data-theme=light] .control-services-head p{color:var(--muted)}
html[data-theme=light] .control-services-head h3{color:var(--text)}
html[data-theme=light] .control-points li{border-top-color:var(--line)}
html[data-theme=light] .control-points li:last-child{border-bottom-color:var(--line)}
html[data-theme=light] .control-points li>span{border-color:var(--accent);color:var(--accent)}
html[data-theme=light] .control-points strong{color:var(--text)}
html[data-theme=light] .control-points small{color:var(--dim)}
html[data-theme=light] .control-link{color:#3f5567}
html[data-theme=light] .control-link>span{color:var(--accent)}

/* --- Duyarlı --- */
@media(max-width:1250px){
  .control-top{gap:44px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .control-copy h2{font-size:40px}
  .control-services-grid{grid-template-columns:1fr;gap:26px}
  .control-services-grid .connection-card{max-width:560px}
}
@media(max-width:1150px){
  .control-services-grid .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:850px){
  .control-hero{padding-block:70px 0}
  .control-top{grid-template-columns:1fr;gap:38px}
  .control-copy>p{max-width:none}
  .control-services{padding-top:58px}
  .control-services-grid .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .control-hero .partner-band{margin-top:48px}
}
@media(max-width:520px){
  .control-copy h2{font-size:33px;letter-spacing:-1.4px}
  .control-services-head h3{font-size:22px}
}