.route-demo .main-container{background:#fafafa;padding:56px 20px 90px}
.demo-kutu{--mavi:#0c53af;--bag:#0f468c;--koyu:#0b2740;--gri:#4a6075;--cizgi:#d8dee5;--acik:#f5f8ff;display:grid;grid-template-columns:400px minmax(0,1fr);max-width:800px;margin:0 auto;background:#fff;color:var(--koyu);border:1px solid var(--cizgi);border-radius:8px;box-shadow:0 1px 4px rgba(11,39,64,.06);overflow:hidden;font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.demo-kutu.genis{max-width:1060px}
.demo-kutu h1,.demo-kutu h2,.demo-kutu h3,.demo-kutu p{font-family:inherit}

.demo-sol{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--cizgi)}
.demo-logo{display:flex;align-items:center;justify-content:center;height:173px;border-bottom:1px solid #e0e4e9}
.demo-logo img{display:block;width:210px;max-width:70%;height:auto}
.demo-sol-govde{flex:1;padding:30px 31px 14px}
.demo-sol .marka{display:block;font-size:15px;font-weight:600;color:#496174;margin-bottom:2px}
.demo-sol h1{font-size:26px;line-height:1.25;font-weight:700;letter-spacing:-.2px;color:#021e37;margin:0 0 22px}
.demo-bilgi{display:flex;gap:11px;align-items:flex-start;margin:0 0 12px;font-size:14.5px;font-weight:600;color:var(--gri)}
.demo-bilgi svg{flex:0 0 20px;width:20px;height:20px;margin-top:1px;stroke:var(--koyu);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.demo-sol .aciklama{margin-top:26px;font-size:15px;line-height:1.6;color:#12202b}
.demo-sol .aciklama strong{display:block;margin-bottom:16px;font-weight:700;color:#051d35}
.demo-sol-alt{display:flex;flex-wrap:wrap;gap:8px 28px;padding:16px 31px 26px}
.demo-sol-alt a{font-size:14.5px;font-weight:600;color:var(--bag);text-decoration:none}
.demo-sol-alt a:hover{text-decoration:underline}

.demo-sag{min-width:0;padding:34px 24px 36px}
.demo-sag h2{margin:0;padding-left:9px;font-size:20px;line-height:1.25;font-weight:700;color:#071c33}
.demo-secim{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.demo-kutu.genis .demo-secim{grid-template-columns:minmax(0,352px) minmax(150px,200px)}

.demo-ay-baslik{display:flex;align-items:center;justify-content:center;gap:28px;height:40px;margin:30px 0 12px}
.demo-ay-baslik .ay-adi{min-width:90px;text-align:center;font-size:16px;font-weight:700;color:#0e202c}
.demo-ay-baslik a,.demo-ay-baslik span.pasif{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--mavi);text-decoration:none}
.demo-ay-baslik svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.demo-ay-baslik a:hover{background:var(--acik)}
.demo-ay-baslik span.pasif{color:#a3b1c0}

.demo-izgara{display:grid;grid-template-columns:repeat(7,1fr);gap:8px 0;text-align:center}
.demo-izgara .baslik{padding:6px 0 10px;font-size:12.5px;font-weight:500;color:#4d6279}
.demo-izgara .gun{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto;border-radius:50%;font-size:16px;font-weight:400;color:#4e6275;text-decoration:none}
.demo-izgara a.gun{background:var(--acik);color:#17468d;font-weight:700}
.demo-izgara a.gun:hover{background:#e3edff}
.demo-izgara a.gun.secili{background:var(--mavi);color:#fff}
.demo-izgara .gun.bugun::after{content:"";position:absolute;bottom:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.demo-dilimi{margin-top:42px;font-size:14.5px;color:var(--koyu)}
.demo-dilimi strong{display:block;margin:0 0 9px;padding-left:9px;font-size:15px;font-weight:700;color:#082033}
.demo-dilimi .deger{display:flex;align-items:center;gap:6px;padding-left:19px;color:#0e1f30}
.demo-dilimi svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--koyu);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.demo-saatler h3{margin:8px 0 16px;font-size:16px;font-weight:600;color:#071c33}
.demo-saatler ul{display:flex;flex-direction:column;gap:10px;max-height:420px;margin:0;padding:0 4px 0 0;overflow-y:auto;list-style:none}
.demo-saatler a{display:block;padding:14px 8px;border:1px solid var(--mavi);border-radius:6px;background:#fff;text-align:center;font-size:15px;font-weight:700;color:var(--mavi);text-decoration:none}
.demo-saatler a:hover{background:var(--acik);border-color:var(--koyu);color:var(--koyu)}
.demo-yok{margin:14px 0 0;font-size:14px;color:var(--gri)}

.demo-form{max-width:480px;margin-top:22px;padding-left:9px}
.demo-form .satir{display:flex;gap:14px}
.demo-form .alan{flex:1;min-width:0;margin-bottom:16px}
.demo-form label,.demo-form .etiket{display:block;margin-bottom:6px;font-size:14.5px;font-weight:700;color:var(--koyu)}
.demo-form label i{color:#c0392b;font-style:normal}
.demo-form input[type=text],.demo-form input[type=email],.demo-form input[type=tel],.demo-form textarea{width:100%;padding:11px 13px;border:1px solid #bcc6d1;border-radius:8px;background:#fff;font:inherit;color:var(--koyu)}
.demo-form textarea{min-height:92px;resize:vertical}
.demo-form input:focus,.demo-form textarea:focus{outline:2px solid var(--mavi);outline-offset:1px;border-color:var(--mavi)}
.demo-form details{margin:0 0 16px}
.demo-form summary{display:inline-block;padding:6px 16px;border:1px solid var(--mavi);border-radius:99px;font-size:14px;font-weight:600;color:var(--mavi);cursor:pointer}
.demo-form details[open] summary{margin-bottom:10px}
.demo-form .ipucu{margin-top:6px;font-size:12.5px;color:var(--gri)}
.demo-form .onay{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;font-size:13px;color:var(--gri)}
.demo-form .onay input{width:16px;height:16px;margin-top:3px;accent-color:var(--mavi)}
.demo-form .onay a{color:var(--bag);text-decoration:underline}
.demo-form .iti{width:100%}
.demo-form .iti input{padding-left:52px}
.demo-dugmeler{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.demo-dugme{display:inline-block;padding:12px 26px;border:1px solid var(--mavi);border-radius:99px;background:var(--mavi);font:inherit;font-weight:700;color:#fff;text-decoration:none;cursor:pointer}
.demo-dugme:hover{background:#0a4390;border-color:#0a4390}
.demo-dugme.ikincil{background:#fff;color:var(--mavi)}
.demo-dugme.ikincil:hover{background:var(--acik)}

.demo-tamam{padding:30px 10px;text-align:center}
.demo-tamam .isaret{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:14px;border-radius:50%;background:#dcf4e8;font-size:34px;color:#11704a}
.demo-tamam h2{margin-bottom:10px;padding-left:0}
.demo-tamam .ozet{display:inline-block;margin:16px 0 20px;padding:14px 18px;border-radius:10px;background:#f4f8fa;text-align:left;font-weight:600}
.demo-kapali{padding:30px 9px;color:var(--gri)}

@media (max-width:860px){
  .route-demo .main-container{padding:20px 12px 60px}
  .demo-kutu,.demo-kutu.genis{grid-template-columns:minmax(0,1fr);max-width:none}
  .demo-sol{border-right:0;border-bottom:1px solid var(--cizgi)}
  .demo-logo{height:110px}
  .demo-sol-govde{padding:24px 20px 10px}
  .demo-sol-alt{padding:12px 20px 20px}
  .demo-sag{padding:26px 16px 30px}
  .demo-kutu.genis .demo-secim{grid-template-columns:minmax(0,1fr)}
  .demo-saatler ul{display:grid;grid-template-columns:repeat(3,1fr);max-height:none}
  .demo-form{padding-left:0}
  .demo-form .satir{flex-direction:column;gap:0}
  .demo-ay-baslik{gap:18px}
}