:root{
--blue:#0061ff;
--text:#111827;
--muted:#667085;
--line:#e7ebf1;
--soft:#f7f9fc;
--shadow:0 12px 38px rgba(18,43,80,.08)
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
font-family:Inter,Arial,sans-serif;
color:var(--text);
background:#fff
}

a{text-decoration:none;color:inherit}

button,input,textarea,select{font:inherit}

.topbar{
height:72px;
position:sticky;
top:0;
z-index:50;
background:rgba(255,255,255,.96);
backdrop-filter:blur(16px);
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
padding:0 28px;
gap:20px
}

.brand{
display:flex;
align-items:center;
gap:9px;
min-width:205px;
font-size:23px;
font-weight:800
}

.brand img{
max-width:160px;
height:38px;
object-fit:contain
}

.brand-mark{
width:34px;
height:26px;
border-radius:7px;
background:linear-gradient(135deg,var(--blue),#1949cf);
display:grid;
place-items:center;
color:#fff;
font-size:12px
}

.search{
width:min(610px,100%);
margin:auto;
display:flex;
border:1px solid #dfe5ed;
border-radius:10px;
overflow:hidden;
background:#fff
}

.search:focus-within{
border-color:#9bbdff;
box-shadow:0 0 0 4px #eef4ff
}

.search input{
flex:1;
min-width:0;
border:0;
outline:0;
padding:12px 16px
}

.search button{
width:56px;
border:0;
border-left:1px solid var(--line);
background:#fafbfd;
color:#344054;
cursor:pointer
}

.top-actions{
display:flex;
align-items:center;
gap:8px
}

.icon-btn{
position:relative;
border:0;
background:transparent;
width:40px;
height:40px;
border-radius:10px;
display:grid;
place-items:center;
font-size:17px;
color:#344054;
cursor:pointer
}

.icon-btn:hover{background:#f3f6fa}

.notify-btn b{
position:absolute;
right:0;
top:1px;
min-width:17px;
height:17px;
padding:0 4px;
border-radius:20px;
background:#ef4444;
color:#fff;
font-size:9px;
display:grid;
place-items:center;
border:2px solid #fff
}

.create{
display:flex;
align-items:center;
gap:8px;
font-weight:650;
font-size:14px;
padding:9px 11px;
border-radius:9px
}

.create:hover{background:#f4f7fb}

.avatar{
width:39px;
height:39px;
border-radius:50%;
overflow:hidden;
background:#eef2f7;
display:grid;
place-items:center
}

.avatar img{
width:100%;
height:100%;
object-fit:cover
}

.btn{
border:0;
border-radius:9px;
background:var(--blue);
color:#fff;
padding:10px 15px;
font-weight:750;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
cursor:pointer
}

.btn.ghost{
background:#eff4ff;
color:var(--blue)
}

.btn.danger{background:#e5484d}

.btn.light{
background:#f4f6f8;
color:#344054
}

.app-shell{display:flex}

.sidebar{
width:242px;
flex:0 0 242px;
border-right:1px solid var(--line);
min-height:calc(100vh - 72px);
padding:17px 13px;
position:sticky;
top:72px;
height:calc(100vh - 72px);
overflow:auto;
background:#fff
}

.sidebar nav{
display:flex;
flex-direction:column
}

.nav-item{
padding:11px 14px;
border-radius:10px;
display:flex;
align-items:center;
gap:15px;
font-size:14px
}

.nav-item:hover{background:#f5f7fa}

.nav-item.active{
background:#eef4ff;
color:var(--blue);
font-weight:700
}

.nav-item i{
width:20px;
text-align:center;
font-size:17px
}

.sidebar hr{
border:0;
border-top:1px solid var(--line);
width:100%;
margin:13px 0
}

.sidebar small{
color:#7b8494;
font-weight:800;
margin:7px 14px;
font-size:11px;
letter-spacing:.06em
}

.main{
width:calc(100% - 242px);
padding:26px 28px 55px;
min-height:calc(100vh - 72px)
}

.footer{
border-top:1px solid var(--line);
padding:22px 30px;
text-align:center;
color:var(--muted);
font-size:15px
}

.flash{
padding:12px 15px;
border:1px solid #d8e6ff;
background:#f0f6ff;
color:#1553b7;
border-radius:11px;
margin-bottom:18px;
display:flex;
gap:10px;
align-items:center
}

.flash.success{
background:#ecfdf3;
border-color:#c9f1d9;
color:#067647
}

.flash.error{
background:#fff1f1;
border-color:#ffd6d6;
color:#b42318
}

.flash.warning{
background:#fffaeb;
border-color:#fedf89;
color:#b54708
}

.categories{
display:flex;
gap:11px;
overflow:auto;
padding:0 0 16px
}

.chip{
white-space:nowrap;
border:1px solid #e1e6ee;
background:#f7f9fc;
border-radius:9px;
padding:9px 17px;
font-size:13px
}

.chip:hover{background:#f0f4f9}

.chip.active{
background:var(--blue);
color:#fff;
border-color:var(--blue)
}

.hero-grid{
display:grid;
grid-template-columns:minmax(0,1.9fr) minmax(330px,.9fr);
gap:18px
}

.hero{
min-height:350px;
border-radius:14px;
overflow:hidden;
position:relative;
background:linear-gradient(135deg,#1f4c78,#0c2744);
background-size:cover;
background-position:center;
box-shadow:var(--shadow)
}

.hero:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.08) 78%)
}

.hero-content{
position:absolute;
z-index:2;
left:28px;
bottom:34px;
color:#fff;
max-width:500px
}

.hero h1{
font-size:32px;
line-height:1.08;
margin:0 0 12px
}

.hero p{
margin:6px 0;
color:#e7eef8
}

.side-list{
border:1px solid var(--line);
border-radius:14px;
padding:6px 13px;
display:flex;
flex-direction:column;
justify-content:space-around
}

.side-video{
display:grid;
grid-template-columns:145px 1fr;
gap:12px;
padding:9px 0
}

.thumb{
aspect-ratio:16/9;
border-radius:10px;
overflow:hidden;
background:#e8edf3 center/cover no-repeat;
position:relative
}

.thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block
}

.duration{
position:absolute;
right:6px;
bottom:6px;
background:rgba(0,0,0,.82);
color:#fff;
font-size:11px;
padding:3px 6px;
border-radius:4px
}

.section-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
margin:27px 0 14px
}

.section-head h2{
font-size:19px;
margin:0
}

.section-head a{
color:var(--blue);
font-size:13px;
font-weight:700
}

.video-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:22px 15px
}

.video-card{min-width:0}

.video-card .thumb{width:100%}

.video-card h3 { font-size: 14px; margin: 8px 0 5px; line-height: 1.38; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.video-card .author{
font-size:12px;
color:#475467;
margin-bottom:2px
}

.meta{
font-size:12px;
color:var(--muted);
line-height:1.55
}

.shorts-row{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:13px;
overflow:hidden
}

.short-card{
aspect-ratio:9/14;
border-radius:11px;
overflow:hidden;
background:#e9edf3;
position:relative
}

.short-card img{
width:100%;
height:100%;
object-fit:cover
}

.short-card:after{
content:"";
position:absolute;
inset:45% 0 0;
background:linear-gradient(transparent,rgba(0,0,0,.65))
}

.short-card .short-meta{
position:absolute;
z-index:2;
bottom:10px;
left:10px;
color:#fff;
font-size:11px
}

.panel{
background:#fff;
border:1px solid var(--line);
border-radius:14px;
box-shadow:var(--shadow);
padding:22px
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px
}

.field{
display:flex;
flex-direction:column;
gap:7px
}

.field.full{grid-column:1/-1}

.field label{
font-size:13px;
font-weight:750
}

.field input,
.field textarea,
.field select{
width:100%;
border:1px solid #dfe5ee;
border-radius:10px;
padding:11px 12px;
outline:0;
background:#fff
}

.field input:focus,
.field textarea:focus,
.field select:focus{
border-color:#9bbdff;
box-shadow:0 0 0 3px #eef4ff
}

.field textarea{
min-height:125px;
resize:vertical
}

.table-wrap{overflow:auto}

.table{
width:100%;
border-collapse:collapse
}

.table th,
.table td{
padding:13px 12px;
border-bottom:1px solid var(--line);
text-align:left;
font-size:13px;
vertical-align:middle
}

.table th{
font-size:11px;
color:#667085;
text-transform:uppercase;
letter-spacing:.04em
}

.badge{
display:inline-flex;
align-items:center;
gap:5px;
border-radius:999px;
padding:5px 9px;
font-size:10px;
font-weight:800
}

.badge.success{
background:#eaf8f0;
color:#0061ff;
}

.badge.warning{
background:#fff5db;
color:#946200
}

.badge.danger{
background:#ffeded;
color:#c62a2f
}

.auth-wrap{
min-height:calc(100vh - 72px);
display:grid;
place-items:center;
padding:35px
}

.auth-card{
width:min(510px,100%);
border:1px solid var(--line);
border-radius:20px;
box-shadow:0 22px 55px rgba(28,48,90,.12);
padding:32px
}

.auth-card h1{
margin:0 0 7px;
font-size:27px
}

.auth-card>p{color:var(--muted)}

.watch-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 390px;
gap:27px
}

.player{
aspect-ratio:16/9;
background:#000;
border-radius:13px;
overflow:hidden;
position:relative
}

.player video{
width:100%;
height:100%;
display:block
}

.watch-title{
font-size:22px;
margin:16px 0 8px
}

.watch-actions{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
border-bottom:1px solid var(--line);
padding:0 0 13px
}

.watch-action{
border:0;
background:#f3f5f8;
border-radius:9px;
padding:9px 12px;
display:inline-flex;
align-items:center;
gap:7px;
cursor:pointer;
color:#344054
}

.watch-action.active{
background:#eaf1ff;
color:var(--blue)
}

.channel-row{
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line);
padding:17px 0
}

.channel-info{
display:flex;
align-items:center;
gap:12px
}

.channel-avatar{
width:48px;
height:48px;
border-radius:50%;
background:#eef2f7;
display:grid;
place-items:center;
overflow:hidden
}

.channel-avatar img{
width:100%;
height:100%;
object-fit:cover
}

.description{
white-space:pre-line;
background:#f7f8fa;
border-radius:11px;
padding:14px;
margin-top:15px;
font-size:13px;
line-height:1.6
}

.comment{
border-top:1px solid var(--line);
padding:15px 0
}

.comment-head{
display:flex;
gap:10px;
align-items:center
}

.comment-avatar{
width:35px;
height:35px;
border-radius:50%;
overflow:hidden;
background:#edf1f6;
display:grid;
place-items:center
}

.comment-avatar img{
width:100%;
height:100%;
object-fit:cover
}

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-bottom:18px
}

.stat{
padding:18px;
border:1px solid var(--line);
border-radius:13px;
background:#fff
}

.stat strong{
display:block;
font-size:26px;
margin-top:7px
}

.stat i{color:var(--blue)}

.profile-cover{
height:230px;
border-radius:14px;
background:linear-gradient(135deg,#dceaff,#eef3fa) center/cover;
position:relative
}

.profile-info{
display:flex;
align-items:flex-end;
gap:18px;
margin-top:-42px;
padding:0 24px 20px;
position:relative
}

.profile-avatar{
width:100px;
height:100px;
border-radius:50%;
border:5px solid #fff;
background:#e9eef5;
overflow:hidden;
display:grid;
place-items:center;
font-size:30px
}

.profile-avatar img{
width:100%;
height:100%;
object-fit:cover
}

.profile-info h1{
margin:0 0 4px;
font-size:25px
}

.tabs{
display:flex;
gap:5px;
border-bottom:1px solid var(--line);
margin-bottom:20px
}

.tabs a{
padding:13px 15px;
color:#667085;
font-size:13px;
font-weight:700
}

.tabs a.active{
color:var(--blue);
border-bottom:2px solid var(--blue)
}

.notification{
display:flex;
gap:13px;
padding:15px 0;
border-bottom:1px solid var(--line)
}

.notification.unread{
background:#f6f9ff;
margin:0 -12px;
padding-left:12px;
padding-right:12px;
border-radius:10px
}

.notification-icon{
width:40px;
height:40px;
border-radius:50%;
background:#eef4ff;
color:var(--blue);
display:grid;
place-items:center;
flex:0 0 40px
}

.empty{
text-align:center;
padding:55px 20px;
color:#7b8494
}

.mobile-menu{display:none}

@media(max-width:1100px){
.video-grid{grid-template-columns:repeat(3,1fr)}
.hero-grid,
.watch-layout{grid-template-columns:1fr}
.side-list{display:none}
.shorts-row{grid-template-columns:repeat(5,1fr)}
}

@media(max-width:800px){
.topbar{
padding:0 12px;
gap:8px
}

.brand{min-width:auto}

.brand strong{display:none}

.mobile-menu{display:grid}

.sidebar{
position:fixed;
z-index:60;
left:-255px;
background:#fff;
transition:.25s;
box-shadow:10px 0 30px rgba(0,0,0,.08)
}

.sidebar.open{left:0}

.main{
width:100%;
padding:18px 14px
}

.video-grid{grid-template-columns:repeat(2,1fr)}

.search{max-width:none}

.create span{display:none}

.form-grid{grid-template-columns:1fr}

.field.full{grid-column:auto}

.stats{grid-template-columns:1fr 1fr}

.shorts-row{
grid-template-columns:repeat(3,1fr);
overflow:auto
}

.profile-cover{height:180px}

.profile-info{
align-items:center;
margin-top:-50px;
padding:0 12px 16px;
flex-wrap:wrap
}

.profile-avatar{
width:86px;
height:86px
}

.profile-info h1{font-size:20px}
}

@media(max-width:520px){
.video-grid{grid-template-columns:1fr}

.top-actions .ghost{display:none}

.hero{min-height:300px}

.hero h1{font-size:25px}

.hero-content{
left:20px;
bottom:24px
}

.stats{grid-template-columns:1fr}

.watch-title{font-size:19px}

.shorts-row{grid-template-columns:repeat(3,130px)}
}

/* İzlevo Pro arayüz iyileştirmeleri */

.profile-menu-wrap{position:relative}

.avatar-button{
border:2px solid #fff;
box-shadow:0 0 0 1px #dfe5ed,0 5px 14px rgba(16,24,40,.08);
cursor:pointer;
transition:.18s
}

.avatar-button:hover{
transform:translateY(-1px);
box-shadow:0 0 0 2px #dbe8ff,0 7px 18px rgba(16,24,40,.12)
}

.profile-dropdown{
position:absolute;
right:0;
top:51px;
width:325px;
background:#fff;
border:1px solid #e3e8ef;
border-radius:17px;
box-shadow:0 22px 70px rgba(16,24,40,.18);
padding:8px;
opacity:0;
visibility:hidden;
transform:translateY(-8px) scale(.98);
transform-origin:top right;
transition:.17s;
z-index:120
}

.profile-dropdown.open{
opacity:1;
visibility:visible;
transform:none
}

.profile-dd-head{
padding:12px;
display:flex;
gap:12px;
border-bottom:1px solid var(--line)
}

.profile-dd-avatar{
width:48px;
height:48px;
border-radius:50%;
background:#eef2f7;
display:grid;
place-items:center;
overflow:hidden;
flex:0 0 48px
}

.profile-dd-avatar img{
width:100%;
height:100%;
object-fit:cover
}

.profile-dd-head>div:last-child{min-width:0}

.profile-dd-head strong,
.profile-dd-head span,
.profile-dd-head a{display:block}

.profile-dd-head strong{
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.profile-dd-head span{
font-size:12px;
color:#667085;
margin:3px 0 6px
}

.profile-dd-head a{
font-size:11px;
color:var(--blue);
font-weight:700
}

.profile-dd-list{padding:6px 0}

.profile-dd-list>a{
display:grid;
grid-template-columns:25px 1fr auto;
align-items:center;
gap:8px;
padding:10px 11px;
border-radius:9px;
font-size:13px
}

.profile-dd-list>a:hover{background:#f5f7fa}

.profile-dd-list>a>i:first-child{
width:22px;
text-align:center;
color:#475467
}

.profile-dd-list>a>i:last-child{
font-size:9px;
color:#98a2b3
}

.profile-dd-list em{
font-style:normal;
background:#e5484d;
color:#fff;
border-radius:999px;
min-width:20px;
padding:3px 6px;
text-align:center;
font-size:9px;
font-weight:800
}

.profile-dd-list hr{
border:0;
border-top:1px solid var(--line);
margin:6px 0
}

.profile-dd-list .logout-link{color:#b42318}

.profile-dd-foot{
padding:8px 11px 7px;
color:#98a2b3;
font-size:10px;
border-top:1px solid var(--line)
}

.creator-page{
max-width:1280px;
margin:0 auto
}

.creator-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin:1px 0 22px
}

.creator-head h1{
font-size:29px;
margin:6px 0 7px;
letter-spacing:-.035em
}

.creator-head p{
max-width:720px;
margin:0;
color:#667085;
font-size:13px;
line-height:1.6
}

.eyebrow{
display:inline-flex;
align-items:center;
gap:7px;
color:var(--blue);
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em
}

.upload-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:20px;
align-items:start
}

.upload-main{padding:25px}

.step-title{
display:flex;
gap:12px;
align-items:center;
margin-bottom:16px
}

.step-title>b{
width:34px;
height:34px;
flex:0 0 34px;
border-radius:10px;
background:#edf4ff;
color:var(--blue);
display:grid;
place-items:center;
font-size:13px
}

.step-title h2{
font-size:17px;
margin:0 0 3px
}

.step-title p{
margin:0;
color:#667085;
font-size:11px
}

.top-gap{
margin-top:28px;
padding-top:25px;
border-top:1px solid var(--line)
}

.dropzone{
min-height:285px;
border:1.5px dashed #c8d3e2;
border-radius:16px;
background:radial-gradient(circle at 50% 25%,#f3f8ff,transparent 42%),#fbfcfe;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
cursor:pointer;
transition:.2s;
padding:25px
}

.dropzone:hover,
.dropzone.drag{
border-color:var(--blue);
background:#f7faff;
box-shadow:inset 0 0 0 1px #cfe0ff
}

.dropzone.compact{
min-height:105px;
padding:14px;
display:none
}

.upload-orb{
width:68px;
height:68px;
border-radius:22px;
background:linear-gradient(135deg,var(--blue),#3c83ff);
color:#fff;
display:grid;
place-items:center;
font-size:26px;
box-shadow:0 14px 30px rgba(0,97,255,.22);
margin-bottom:17px
}

.dropzone strong{font-size:16px}

.dropzone>span:not(.upload-orb){
font-size:12px;
color:#667085;
margin-top:5px
}

.dropzone em{
font-style:normal;
margin-top:17px;
font-size:10px;
color:#667085;
background:#fff;
border:1px solid #e6eaf0;
border-radius:999px;
padding:7px 10px
}

.dropzone em i{
color:#12b76a;
margin-right:4px
}

.upload-progress{
border:1px solid #dce4ee;
border-radius:15px;
padding:16px;
background:#fbfcfe
}

.file-line{
display:flex;
align-items:center;
gap:11px
}

.file-icon{
width:42px;
height:42px;
border-radius:11px;
background:#edf4ff;
color:var(--blue);
display:grid;
place-items:center
}

.file-copy{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
flex:1
}

.file-copy strong{
font-size:13px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}

.file-copy small{
color:#667085;
font-size:10px
}

.file-line>b{
font-size:13px;
color:var(--blue)
}

.progress-track{
height:7px;
border-radius:99px;
background:#e8edf3;
overflow:hidden;
margin:13px 0 10px
}

.progress-track span{
display:block;
height:100%;
width:0;
background:linear-gradient(90deg,var(--blue),#54a0ff);
border-radius:inherit;
transition:width .18s
}

.progress-foot{
display:flex;
justify-content:space-between;
align-items:center;
font-size:10px;
color:#667085
}

.progress-foot>span{
display:flex;
align-items:center;
gap:6px
}

.upload-progress.complete{
border-color:#c8ead7;
background:#f7fdf9
}

.upload-progress.complete .file-icon,
.upload-progress.complete .progress-foot>span{
color:#067647
}

.upload-progress.failed{
border-color:#ffd6d6;
background:#fff9f9
}

.upload-progress.failed .progress-foot>span{color:#b42318}

.text-btn{
border:0;
background:none;
padding:4px 5px;
cursor:pointer;
font-weight:700;
font-size:10px
}

.danger-text{color:#b42318}

.required{color:#e5484d}

.upload-side{
display:flex;
flex-direction:column;
gap:14px;
position:sticky;
top:92px
}

.upload-side .panel{
padding:17px;
box-shadow:none
}

.upload-side h3{
font-size:13px;
margin:0 0 13px;
display:flex;
gap:7px;
align-items:center
}

.upload-side h3 i{color:var(--blue)}

.thumb-picker{
aspect-ratio:16/9;
border:1.5px dashed #cfd8e5;
border-radius:12px;
overflow:hidden;
display:grid;
place-items:center;
position:relative;
background:#f8fafc;
cursor:pointer
}

.thumb-picker img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:none
}

.thumb-picker img.has-image{display:block}

.thumb-picker span{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:4px;
color:#667085
}

.thumb-picker span>i{
font-size:24px;
color:#98a2b3;
margin-bottom:3px
}

.thumb-picker b{
font-size:11px;
color:#344054
}

.thumb-picker small{font-size:9px}

.server-card{background:#fafbfc!important}

.server-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:8px 0;
border-bottom:1px solid #eceff3;
font-size:10px
}

.server-row b{font-size:10px}

.server-row .ok{color:#067647}

.server-card p{
font-size:9px;
color:#667085;
line-height:1.55;
margin:11px 0 0
}

.publish-btn{
width:100%;
padding:13px
}

.publish-btn:disabled{
background:#cbd5e1;
cursor:not-allowed
}

.publish-hint{
display:flex;
gap:7px;
align-items:flex-start;
color:#667085;
font-size:9px;
line-height:1.5;
padding:0 5px
}

.publish-hint i{
margin-top:2px;
color:#98a2b3
}

@media(max-width:980px){
.upload-layout{grid-template-columns:1fr}

.upload-side{
position:static
}

.creator-head{align-items:flex-start}

.upload-side{
display:grid;
grid-template-columns:1fr 1fr
}

.publish-btn,
.publish-hint{
grid-column:1/-1
}
}

@media(max-width:650px){
.profile-dropdown{
position:fixed;
right:10px;
left:10px;
top:66px;
width:auto
}

.creator-head{flex-direction:column}

.creator-head h1{font-size:24px}

.upload-main{padding:16px}

.dropzone{min-height:230px}

.upload-side{grid-template-columns:1fr}
}