@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary: #d32f2f;
    --primary-hover: #b71c1c;
    --primary-light: #fce4e4;
    --bg-color: #f8f9fa; 
    --sidebar-bg: #ffffff;
    --surface: #ffffff;
    --text-dark: #202124; 
    --text-muted: #5f6368;
    --border: #dadce0;
    --radius: 8px; 
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body { font-family: 'Inter', sans-serif; background-color: var(--bg-color); color: var(--text-dark); margin: 0; overflow-x: hidden; position: relative; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeInUp 0.4s ease forwards; }

.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.75rem 1.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1040; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.brand-text { font-weight: 700; font-size: 1.3rem; color: var(--text-dark); text-decoration: none; display: flex; align-items: center; gap: 10px; transition: var(--transition); white-space: nowrap; }
.brand-text i { color: var(--primary); font-size: 1.5rem; }
.brand-text:hover { color: var(--primary); }

/* --- ARAMA KUTUSU (ÜST BARDA) --- */
.topbar-search { flex-grow: 1; max-width: 600px; margin: 0 30px; position: relative; }
.topbar-search input { width: 100%; border-radius: 8px; border: 1px solid var(--border); background: #f1f3f4; padding: 0.5rem 1rem 0.5rem 2.5rem; font-size: 0.95rem; transition: var(--transition); }
.topbar-search input:focus { background: #fff; border-color: transparent; box-shadow: 0 1px 6px rgba(0,0,0,0.15); outline: none; }
.topbar-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1rem; }

.app-container { display: flex; height: calc(100vh - 64px); }
.sidebar { width: 280px; background: var(--sidebar-bg); border-right: 1px solid var(--border); overflow-y: auto; padding: 1.5rem 0; flex-shrink: 0; }
.folder-tree { list-style: none; padding-left: 0; margin: 0; }
.folder-tree .folder-tree { padding-left: 1.5rem; }
.tree-item { padding: 0.5rem 1.5rem; display: flex; align-items: center; gap: 10px; color: var(--text-dark); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: var(--transition); border-radius: 0 24px 24px 0; margin-right: 1rem; }
.tree-item:hover { background-color: #f1f3f4; }
.tree-item.active { background-color: var(--primary-light); color: var(--primary); font-weight: 600; }
.tree-item i { color: var(--text-muted); font-size: 1.2rem; transition: var(--transition); }
.tree-item.active i { color: var(--primary); }

.main-content { flex-grow: 1; overflow-y: auto; padding: 2rem; background: var(--bg-color); padding-bottom: 60px; }

.folder-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: var(--transition); color: var(--text-dark); text-decoration: none; }
.folder-card:hover { background: #f8f9fa; border-color: #bdc1c6; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.folder-card i { font-size: 1.4rem; color: var(--text-muted); }
.folder-card:hover i { color: var(--primary); }
.folder-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; }

.file-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); height: 100%; display: flex; flex-direction: column; position: relative; }
.file-card:hover { box-shadow: var(--shadow-md); border-color: #bdc1c6; transform: translateY(-4px); }

.btn-info-overlay { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.8); border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-dark); z-index: 10; opacity: 0; transition: var(--transition); cursor: pointer; box-shadow: var(--shadow-sm); }
.btn-info-overlay:hover { background: var(--primary); color: white; }
.file-card:hover .btn-info-overlay { opacity: 1; }

.preview-area { height: 150px; background: #f1f3f4; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.preview-area img, .preview-area video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.file-card:hover .preview-area img, .file-card:hover .preview-area video { transform: scale(1.05); }
.preview-icon { font-size: 3.5rem; color: var(--text-muted); }

.file-info { padding: 16px; flex-grow: 1; display: flex; flex-direction: column; }
.file-name { font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { font-size: 0.8rem; color: var(--text-muted); display: flex; justify-content: space-between; margin-bottom: 14px; }
.file-stats { font-size: 0.8rem; color: var(--text-muted); display: flex; gap: 12px; }
.file-actions { margin-top: auto; display: flex; gap: 8px; }

.btn-corp { border-radius: 6px; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.8rem; transition: var(--transition); }
.btn-primary-corp { background-color: var(--primary); color: white; border: none; }
.btn-primary-corp:hover { background-color: var(--primary-hover); color: white; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(211,47,47,0.2); }
.btn-outline-corp { background-color: transparent; border: 1px solid var(--border); color: var(--text-dark); }
.btn-outline-corp:hover { background-color: #f1f3f4; border-color: #bdc1c6; }

.stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: var(--transition); }
.stat-box:hover { box-shadow: var(--shadow-sm); }

/* FOOTER */
.corp-footer { position: fixed; bottom: 15px; right: 25px; font-size: 0.75rem; color: var(--text-muted); font-weight: 500; z-index: 1050; pointer-events: none; background: rgba(255,255,255,0.7); padding: 4px 10px; border-radius: 4px; backdrop-filter: blur(4px); }

/* OFFCANVAS */
.offcanvas-details { width: 380px !important; border-left: 1px solid var(--border); box-shadow: -4px 0 15px rgba(0,0,0,0.05); }
.details-thumbnail { width: 100%; height: 180px; background: #f1f3f4; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; overflow: hidden; }
.details-thumbnail img, .details-thumbnail video { width: 100%; height: 100%; object-fit: cover; }
.details-thumbnail i { font-size: 4rem; color: var(--text-muted); }
.prop-row { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.prop-label { color: var(--text-muted); font-weight: 500; }
.prop-value { font-weight: 600; color: var(--text-dark); text-align: right; word-break: break-all; max-width: 60%; }

/* --- LİSTE GÖRÜNÜMÜ (LIST VIEW) --- */
.list-view .item-wrapper { width: 100% !important; flex: 0 0 100%; max-width: 100%; }

/* Klasörler Listede */
.list-view .folder-card { height: auto; padding: 10px 20px; margin-bottom: 5px; border-radius: 4px; }

/* Dosyalar Listede */
.list-view .file-card { flex-direction: row; height: 70px; align-items: center; margin-bottom: 5px; }
.list-view .file-card:hover { transform: translateY(-2px); }
.list-view .preview-area { width: 70px; height: 100%; border-bottom: none; border-right: 1px solid var(--border); }
.list-view .preview-icon { font-size: 1.8rem; }
.list-view .file-info { flex-direction: row; align-items: center; padding: 0 20px; gap: 20px; }
.list-view .file-name { margin-bottom: 0; flex: 3; font-size: 0.95rem; }
.list-view .file-meta { margin-bottom: 0; flex: 2; justify-content: flex-start; gap: 15px; }
.list-view .file-stats { margin-bottom: 0; flex: 2; }
.list-view .file-actions { flex: 2; justify-content: flex-end; }
.list-view .btn-info-overlay { position: static; opacity: 1; background: transparent; box-shadow: none; border: 1px solid var(--border); margin-inline: 10px; width: 34px; height: 34px; display:flex; align-items:center; justify-content:center;}
.list-view .file-card:hover .btn-info-overlay { background: var(--primary); color: white; border-color: var(--primary); }

@media (max-width: 768px) {
    .topbar-search { display: none; } /* Mobilde çok yer kaplamasın */
    .list-view .file-info { flex-direction: column; align-items: flex-start; gap: 5px; }
    .list-view .file-card { height: auto; padding-bottom: 10px; }
}