*{box-sizing:border-box}
:root{
  --blue:#075bd7;
  --blue2:#1b83ed;
  --ink:#06245f;
  --line:#a8cdf4;
  --glass:rgba(239,248,255,.88);
  --panel:#edf7ff;
}
html,body{margin:0;width:100%;height:100%;font-family:Tahoma,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#4c94d8}
button,input,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

/* LOGIN */

.login-screen{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 20%,#dff3ff 0,#a9d7fb 32%,#5ba3e5 70%,#327dc4 100%);
}
.login-card{
  width:min(390px,100%);
  text-align:center;
  padding:28px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:28px;
  background:rgba(241,249,255,.74);
  box-shadow:0 20px 70px rgba(0,46,112,.3),inset 0 1px white;
  backdrop-filter:blur(18px)
}
.cz-logo{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left}
.cz-logo strong{display:block;font-size:29px}
.cz-logo small{display:block}
.login-avatar{margin:35px 0 12px}
.login-card h1{margin:5px 0;font-size:38px}
.login-card p{font-family:"Segoe Script","Comic Sans MS",cursive;font-style:italic;font-size:20px;color:#1552a5}
.login-card input{
  width:100%;height:48px;border:1px solid #9fc8f4;border-radius:10px;
  padding:0 15px;background:rgba(255,255,255,.8);outline:none
}
.login-card input:focus{border-color:#2786ec;box-shadow:0 0 0 3px rgba(39,134,236,.13)}
.login-card button{
  width:100%;height:48px;margin-top:13px;border:0;border-radius:10px;color:white;
  font-weight:bold;background:linear-gradient(#3597fa,#0759d9);box-shadow:inset 0 1px rgba(255,255,255,.7)
}
.login-error{min-height:20px;margin-top:10px;color:#c21b31;font-size:13px}

/* MSN PEOPLE LOGO */

.people-logo{position:relative;width:58px;height:48px}
.people-logo span{position:absolute;display:block;border-radius:50% 50% 42% 42%;box-shadow:inset 4px 4px 8px rgba(255,255,255,.75),0 2px 5px rgba(0,40,100,.35)}
.people-logo span:first-child{width:30px;height:38px;background:linear-gradient(#7be96e,#13a72c);left:4px;top:8px}
.people-logo span:last-child{width:38px;height:45px;background:linear-gradient(#8ee6ff,#1687eb);left:22px;top:1px}
.people-logo.big{transform:scale(2);margin:auto}
.banner-logo{transform:scale(1.2)}

/* DESKTOP APP */

.app{
  height:100dvh;
  padding:12px;
  background:
    radial-gradient(circle at 50% -20%,#e9f8ff 0,#a8d6f8 38%,#68aee8 72%,#438acb 100%);
}
.titlebar{
  height:88px;position:relative;padding:10px 18px 25px;border:1px solid #86b8eb;border-radius:13px 13px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(206,232,255,.86));
  box-shadow:inset 0 1px white
}
.brand{display:flex;gap:8px;align-items:center}
.crown{font-size:28px;color:#f0a900;text-shadow:0 1px white}
.brand strong{display:block;font-size:23px;color:#073b93}
.brand small{display:block;font-size:13px}
.desktop-menu{position:absolute;left:18px;bottom:6px;font-size:12px}
.title-slogan{position:absolute;right:70px;top:28px;font-style:italic}
.mobile-back{display:none}

.layout{
  height:calc(100dvh - 112px);
  display:grid;
  grid-template-columns:285px minmax(400px,1fr) 255px;
  gap:8px;padding:8px;
  border:1px solid #87b9ec;border-top:0;
  background:rgba(235,247,255,.65)
}
.sidebar,.chat-panel,.right-panel{
  min-height:0;border:1px solid #9dc8f2;border-radius:9px;background:rgba(244,250,255,.82);
  box-shadow:inset 0 1px white
}
.sidebar{overflow:auto}
.my-profile{display:flex;gap:12px;padding:12px;border-bottom:1px solid #bdd8f2}
.avatar{display:grid;place-items:center;border-radius:9px;background:linear-gradient(#e7f6ff,#9bd0f7);border:1px solid #7db8ec}
.avatar-large{width:54px;height:54px;font-size:31px}
.profile-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.profile-copy strong{font-size:18px}
.profile-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.online{font-size:12px;color:#119b2b}
.searchbox{display:flex;margin:9px;border:1px solid #91bfea;border-radius:7px;background:white}
.searchbox input{width:100%;border:0;outline:0;padding:8px;background:transparent}
.searchbox span{padding:5px 9px;font-size:20px}
.side-section{border-top:1px solid #c1daf2}
.side-section h3{margin:0;padding:8px 10px;font-size:14px;background:linear-gradient(#fff,#dceeff)}
.channel-row,.person-row{
  display:flex;align-items:center;gap:9px;padding:7px 10px;cursor:pointer
}
.channel-row:hover,.person-row:hover{background:#d7ebff}
.channel-row.active{background:linear-gradient(90deg,#c7e3ff,#eaf6ff)}
.channel-hash{font-size:20px;font-weight:bold;color:#075bd7}
.channel-name{font-weight:bold;flex:1}
.badge{padding:2px 6px;border-radius:8px;background:#b9dcff;color:#0753bc;font-size:11px}
.person-dot{width:9px;height:9px;border-radius:50%;background:#22bd43}
.person-name{font-weight:bold}

.chat-panel{display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden}
.channel-head{
  min-height:64px;display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:linear-gradient(#fff,#d9edff);border-bottom:1px solid #a7cdf2
}
.channel-icon{font-size:31px}
.channel-head h2{margin:0;font-size:20px}
.channel-head p{margin:3px 0 0;font-size:12px}
.mobile-members{display:none;margin-left:auto}

.welcome-banner{
  min-height:104px;margin:8px;border:1px solid #91c4f2;border-radius:8px;
  display:flex;align-items:center;justify-content:center;gap:45px;
  font-family:"Segoe Script","Comic Sans MS",cursive;font-size:22px;font-style:italic;
  background:linear-gradient(150deg,#f4fbff,#cbe8ff 53%,#b6e9d6)
}

.messages{overflow:auto;padding:8px 16px 20px;scroll-behavior:smooth}
.message{display:grid;grid-template-columns:42px 1fr;gap:9px;padding:7px 0}
.message-avatar{
  width:38px;height:38px;display:grid;place-items:center;border-radius:7px;
  background:linear-gradient(#dff3ff,#99cef3);border:1px solid #83b8e5
}
.message-line{line-height:1.35}
.message-name{font-weight:bold;color:#0757bd}
.message.self .message-name{color:#13843a}
.message-time{margin-left:7px;color:#6684a9;font-size:11px}
.message-text{margin-top:2px;color:#08285d;overflow-wrap:anywhere}
.system-message{text-align:center;color:#6480a3;font-size:12px;padding:4px}

.composer{padding:7px;border-top:1px solid #9ec7ee;background:linear-gradient(#eef8ff,#cce7ff)}
.composer-tools{height:28px;display:flex;gap:4px}
.composer-tools button{border:0;background:transparent;font-weight:bold;color:#0758bd}
.composer-row{display:flex;gap:7px}
.composer textarea{
  flex:1;resize:none;min-height:42px;max-height:110px;padding:11px;border:1px solid #99c4ed;
  border-radius:7px;outline:none;background:white
}
.send-button{
  min-width:90px;border:1px solid #2675d6;border-radius:7px;color:#073d8f;font-weight:bold;
  background:linear-gradient(#fff,#bcdfff)
}

.right-panel{overflow:auto}
.info-card,.member-card{padding:10px}
.info-card{border-bottom:1px solid #b7d5f1}
.info-card h3,.member-card h3{margin:0 -10px 10px;padding:8px 10px;background:linear-gradient(#fff,#dceeff);font-size:14px}
.info-card h2{margin:8px 0 5px;font-size:18px}
.info-card p{font-size:12px;line-height:1.5}
.channel-stats{display:grid;gap:8px;margin-top:14px;font-size:12px}
.member-row{display:flex;align-items:center;gap:8px;padding:5px 2px}
.member-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#cbe7ff}
.member-prefix{font-weight:bold;color:#e59b00}
.member-nick{font-weight:bold}
.member-modes{font-size:11px;color:#6481a8}

.mobile-nav,.mobile-drawer,.drawer-shade{display:none}

/* MOBILE */

@media(max-width:760px){
  body{background:#d9efff}
  .app{padding:0;background:linear-gradient(#cbe9ff,#eef8ff)}
  .titlebar{
    height:58px;border-radius:0;padding:8px 12px;display:flex;align-items:center
  }
  .brand strong{font-size:18px}
  .brand small{font-size:10px}
  .crown,.desktop-menu,.title-slogan{display:none}

  .layout{
    display:block;height:calc(100dvh - 118px);padding:0;border:0;background:transparent
  }

  .sidebar,.right-panel{display:none}
  .chat-panel{height:100%;border:0;border-radius:0;grid-template-rows:auto auto 1fr auto}
  .channel-head{min-height:58px}
  .channel-head h2{font-size:18px}
  .channel-head p{font-size:11px}
  .mobile-members{display:block;border:0;background:transparent;color:#0756b9;font-weight:bold}
  .welcome-banner{min-height:58px;margin:0;border-width:0 0 1px;border-radius:0;font-family:Tahoma,sans-serif;font-size:12px;gap:8px}
  .banner-logo{display:none}

  .messages{padding:10px;background:linear-gradient(#e7f5ff,#f7fbff)}
  .message{display:flex;align-items:flex-end;gap:7px}
  .message-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%}
  .message-body{
    max-width:78%;padding:8px 10px;border:1px solid #d2dce8;border-radius:5px 14px 14px 14px;
    background:rgba(255,255,255,.9);box-shadow:0 2px 5px rgba(15,67,125,.07)
  }
  .message.self{flex-direction:row-reverse}
  .message.self .message-body{background:#d9f6e4;border-color:#b8e8ca;border-radius:14px 5px 14px 14px}
  .message-name{font-size:13px}
  .message-text{font-size:14px}
  .composer{padding:7px 8px;background:#e2f2ff}
  .composer-tools{display:none}
  .composer textarea{min-height:40px;border-radius:20px;padding:10px 14px}
  .send-button{min-width:48px;width:48px;border-radius:50%;font-size:0}
  .send-button:after{content:"➤";font-size:20px}

  .mobile-nav{
    height:60px;display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;bottom:0;left:0;right:0;z-index:20;
    padding-bottom:env(safe-area-inset-bottom);
    border-top:1px solid #9cc7ed;background:rgba(239,248,255,.97)
  }
  .mobile-nav button{border:0;background:transparent;color:#174f9b;font-size:19px}
  .mobile-nav span{display:block;font-size:10px;margin-top:2px}
  .mobile-nav .active{color:#0066df}

  .mobile-drawer{
    display:block;position:fixed;z-index:50;top:0;right:0;width:min(85vw,330px);height:100dvh;
    background:#eff8ff;box-shadow:-10px 0 30px rgba(0,45,100,.25);
    transform:translateX(105%);transition:.22s ease;padding-bottom:20px
  }
  .mobile-drawer.open{transform:translateX(0)}
  .drawer-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:linear-gradient(#fff,#d5ebff);border-bottom:1px solid #9dc7ed}
  .drawer-head button{border:0;background:transparent;font-size:28px;color:#0758bb}
  .mobile-drawer .member-list{padding:10px}
  .drawer-shade{position:fixed;z-index:49;inset:0;background:rgba(0,30,70,.3)}
  .drawer-shade.open{display:block}

  .login-card{background:transparent;border:0;box-shadow:none;backdrop-filter:none}
}

@media(min-width:761px) and (max-width:1050px){
  .layout{grid-template-columns:245px minmax(360px,1fr)}
  .right-panel{display:none}
}
/* =========================================
   MSN STYLE CONNECTING SCREEN
   ========================================= */

.connecting-screen{
  position:fixed;
  inset:0;
  z-index:9999;

  display:grid;
  place-items:center;

  background:
    radial-gradient(
      circle at 50% 30%,
      #f7fcff 0,
      #d8efff 32%,
      #9dd0f7 68%,
      #559ad8 100%
    );
}

.connecting-box{
  width:min(390px,calc(100vw - 32px));
  padding:38px 30px 32px;

  text-align:center;

  border:1px solid rgba(255,255,255,.95);
  border-radius:24px;

  background:rgba(242,249,255,.80);

  box-shadow:
    0 25px 70px rgba(0,53,120,.28),
    inset 0 1px 0 white;

  backdrop-filter:blur(15px);
}

.connecting-logo{
  height:125px;
  display:grid;
  place-items:center;
}

.msn-orbit{
  position:relative;
  width:105px;
  height:105px;

  animation:
    msnOrbit 1.15s linear infinite;
}

.msn-person{
  position:absolute;

  width:48px;
  height:64px;

  border-radius:
    48% 48% 42% 42%;

  box-shadow:
    inset 7px 7px 12px rgba(255,255,255,.75),
    0 5px 12px rgba(0,61,130,.28);
}

.msn-person::before{
  content:"";

  position:absolute;

  width:31px;
  height:31px;

  left:8px;
  top:-18px;

  border-radius:50%;

  background:inherit;

  box-shadow:
    inset 6px 6px 10px rgba(255,255,255,.75),
    0 3px 7px rgba(0,61,130,.25);
}

.msn-blue{
  right:4px;
  top:29px;

  background:
    linear-gradient(
      135deg,
      #a6eeff,
      #258eea 55%,
      #0861c8
    );
}

.msn-green{
  left:4px;
  top:14px;

  background:
    linear-gradient(
      135deg,
      #c2ff9c,
      #50c93f 55%,
      #15982c
    );
}

@keyframes msnOrbit{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}

.connecting-box h2{
  margin:8px 0 4px;

  font-size:30px;
  color:#074598;
}

.connecting-title{
  margin-top:18px;

  font-size:17px;
  font-weight:bold;

  color:#083d89;
}

.connecting-status{
  margin-top:8px;

  font-size:13px;
  color:#54769e;
}

.connecting-dots{
  display:flex;
  justify-content:center;
  gap:7px;

  height:25px;

  margin-top:13px;
}

.connecting-dots span{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#1679df;

  animation:
    connectingDot 1.2s infinite ease-in-out;
}

.connecting-dots span:nth-child(2){
  animation-delay:.18s;
}

.connecting-dots span:nth-child(3){
  animation-delay:.36s;
}

@keyframes connectingDot{

  0%,80%,100%{
    transform:scale(.65);
    opacity:.35;
  }

  40%{
    transform:scale(1.2);
    opacity:1;
  }

}

.connecting-box small{
  color:#6885a6;
}

@media(max-width:760px){

  .connecting-screen{
    background:
      radial-gradient(
        circle at 50% 25%,
        #f5fbff,
        #cce9ff 45%,
        #7eb9ec 100%
      );
  }

  .connecting-box{
    width:100%;
    height:100dvh;

    border:0;
    border-radius:0;

    box-shadow:none;
    background:transparent;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }

}

/* =====================================================
   ChatZone - MSN el ele dönen bağlantı animasyonu
   ===================================================== */

.connecting-logo {
    height: 150px;
    display: grid;
    place-items: center;
    overflow: visible;
}

.msn-buddies {
    position: relative;
    width: 150px;
    height: 125px;

    transform-origin: 50% 55%;

    animation:
        buddySpin 1.7s linear infinite,
        buddyFloat 0.85s ease-in-out infinite alternate;
}


/* =========================
   ORTAK KARAKTER YAPISI
   ========================= */

.msn-buddy {
    position: absolute;
    width: 58px;
    height: 92px;

    top: 17px;

    filter:
        drop-shadow(0 7px 7px rgba(0, 70, 140, .20));
}


/* YEŞİL */

.msn-buddy-green {
    left: 20px;
}


/* MAVİ */

.msn-buddy-blue {
    right: 20px;
}


/* =========================
   KAFA
   ========================= */

.buddy-head {
    position: absolute;

    width: 39px;
    height: 39px;

    top: 0;
    left: 9px;

    border-radius: 50%;

    z-index: 3;
}


.msn-buddy-green .buddy-head {
    background:
        radial-gradient(
            circle at 35% 28%,
            #efffdc 0%,
            #a7f16d 22%,
            #55ca38 58%,
            #159527 100%
        );

    box-shadow:
        inset -4px -5px 8px rgba(0, 90, 20, .20),
        inset 5px 5px 8px rgba(255,255,255,.60);
}


.msn-buddy-blue .buddy-head {
    background:
        radial-gradient(
            circle at 35% 28%,
            #e9fbff 0%,
            #7edaff 22%,
            #229ce8 58%,
            #0763bf 100%
        );

    box-shadow:
        inset -4px -5px 8px rgba(0,70,150,.22),
        inset 5px 5px 8px rgba(255,255,255,.65);
}


/* =========================
   GÖVDE
   ========================= */

.buddy-body {
    position: absolute;

    width: 55px;
    height: 58px;

    left: 1px;
    top: 32px;

    border-radius:
        48% 48%
        38% 38% /
        35% 35%
        62% 62%;

    z-index: 2;
}


.msn-buddy-green .buddy-body {
    background:
        linear-gradient(
            135deg,
            #b7fa84 0%,
            #55ce3e 45%,
            #15982b 100%
        );

    box-shadow:
        inset 8px 5px 12px rgba(255,255,255,.48),
        inset -6px -6px 10px rgba(0,90,20,.18);
}


.msn-buddy-blue .buddy-body {
    background:
        linear-gradient(
            135deg,
            #9eeaff 0%,
            #2ca8ee 45%,
            #0866c6 100%
        );

    box-shadow:
        inset 8px 5px 12px rgba(255,255,255,.52),
        inset -6px -6px 10px rgba(0,65,145,.20);
}


/* =========================
   KOLLAR
   ========================= */

.buddy-arm {
    position: absolute;

    width: 39px;
    height: 15px;

    top: 48px;

    border-radius: 20px;

    z-index: 5;
}


/* Yeşilin sağ kolu ortaya uzanıyor */

.msn-buddy-green .buddy-arm-right {
    right: -24px;

    transform:
        rotate(15deg);

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            #55cc3d,
            #79df58
        );
}


/* Mavinin sol kolu ortaya uzanıyor */

.msn-buddy-blue .buddy-arm-left {
    left: -24px;

    transform:
        rotate(-15deg);

    transform-origin: right center;

    background:
        linear-gradient(
            90deg,
            #57c8f5,
            #218fdc
        );
}


/* Ellerinin birleştiği nokta */

.buddy-hand {
    position: absolute;

    width: 17px;
    height: 17px;

    left: 66px;
    top: 61px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #75dc59 0%,
            #48bfe9 100%
        );

    box-shadow:
        0 0 8px rgba(80,180,255,.45);

    z-index: 7;
}


/* =========================
   DÖNÜŞ İZLERİ
   ========================= */

.orbit-trail {
    position: absolute;

    left: 4px;
    top: 48px;

    width: 140px;
    height: 47px;

    border-radius: 50%;

    pointer-events: none;
}


.orbit-trail-one {
    border-top:
        3px solid rgba(54,164,255,.50);

    transform:
        rotate(-8deg);

    filter:
        drop-shadow(
            0 0 4px rgba(40,160,255,.55)
        );
}


.orbit-trail-two {
    border-bottom:
        3px solid rgba(103,205,62,.45);

    transform:
        rotate(9deg);

    filter:
        drop-shadow(
            0 0 4px rgba(90,205,70,.50)
        );
}


/* =========================
   ANA DÖNÜŞ
   ========================= */

@keyframes buddySpin {

    0% {
        transform:
            rotateY(0deg)
            rotateZ(0deg);
    }

    25% {
        transform:
            rotateY(90deg)
            rotateZ(3deg);
    }

    50% {
        transform:
            rotateY(180deg)
            rotateZ(0deg);
    }

    75% {
        transform:
            rotateY(270deg)
            rotateZ(-3deg);
    }

    100% {
        transform:
            rotateY(360deg)
            rotateZ(0deg);
    }
}


/*
 * Hafif yukarı aşağı hareket.
 * Eski Messenger animasyonundaki
 * canlılık hissini artırıyor.
 */

@keyframes buddyFloat {

    from {
        margin-top: -3px;
    }

    to {
        margin-top: 4px;
    }
}


/* Dönüş sırasında hafif parıltı */

.msn-buddies::after {
    content: "";

    position: absolute;

    width: 105px;
    height: 18px;

    left: 22px;
    bottom: 3px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(53,156,236,.24),
            transparent 70%
        );

    filter: blur(5px);

    animation:
        buddyShadow 1.7s ease-in-out infinite;
}


@keyframes buddyShadow {

    0%, 100% {
        transform: scaleX(1);
        opacity: .65;
    }

    50% {
        transform: scaleX(.65);
        opacity: .30;
    }
}


/* MOBİL */

@media (max-width: 760px) {

    .connecting-logo {
        height: 165px;
    }

    .msn-buddies {
        transform-origin: center center;
    }

}